# Particle Bundler
Source: https://developers.particle.network/aa/architecture/bundler

Particle Network's Bundler is now fully open-source!

***

An ERC-4337 Bundler acts as a transaction aggregator that collects individual `UserOperations` from a specialized mempool, bundles them, and submits them as a single transaction to the network. This enables enhanced account abstraction on Ethereum and other EVM networks. It is a core infrastructure component for account abstraction on Ethereum Virtual Machine (EVM) networks.

The Particle Bundler is a specialized tool designed to make smart contracts and transactions work smoothly using the ERC-4337 standard. It is a fully compliant, feature-rich, high-performance, infinitely scalable 4337 Bundler implementation.

## Advantages of the Particle Bundler

Particle's Bundler offers several compelling advantages:

* **Seamless `UserOperations`:** We have implemented the persistence of `UserOperations`, Smart Account Nonce management, and automatic batch sending of `UserOperations`, among other features. The Particle Bundler simplifies the transaction process for users, streamlining the submission of `UserOperations`. This enhances the accessibility of ERC-4337, making it more user-friendly and approachable for a broader audience.
* **Smart Ops:** We know the importance of stable and reliable operational features for developers, so we have implemented functionalities like Bundler Signer configuration, automatic recharging, automatic blocking and recovery, and automatic monitoring alerts, enabling easy management and automatic expansion. The era of multi-chain Web3 is still unfolding, so we have simplified the deployment process to new chains down to executing a single command with minimum additional configurations. Thanks to this, support for a new chain can be completed within 5 minutes.
* **High Performance:** Particle's Bundler is engineered for optimal performance and can efficiently handle demanding workloads. Leveraging proprietary technology and optimization techniques, the Bundler ensures transactions are processed swiftly and effectively.
* **High Stability:** Stability is a hallmark feature of Particle's Bundler. Built with reliability in mind, it operates seamlessly, even under challenging conditions. Its robust architecture and adherence to best practices in infrastructure management contribute to its exceptional stability, providing users and developers with a dependable platform to solve their needs.

As a high-performance, highly stable Bundler implementation, the Bundler also features:

## Features

* All standard RPCs supported.
* Configurable RPCs, Signers, etc.
* Support for any chain.
* `UserOp` Persistence.
* `UserOp` Concurrent Handling.
* Built-in Gas Price Oracle.
* Multi-Bundler Signers Manager.
* Auto-fulfill bundler Signers’ balance.
* Auto-retry for failed transactions from a Bundler Signer account.
* Returns the correct transaction even when affected by MEV.
* Deploy new chains with one command.

<Tip>
  Learn more through the [open-source repository](https://github.com/Particle-Network/particle-bundler-server).
</Tip>


# Omnichain Paymaster
Source: https://developers.particle.network/aa/architecture/omni-paymaster

Our proprietary Paymaster allows developers to recharge and spend across different chains.

***

Particle Network’s Paymaster is a specialized tool designed to make gas payments easier and friendlier for end users across chains, leveraging Particle Network's Omnichain Account Abstraction design. This service, which has helped us sponsor over 500k `UserOperations` across different networks in the previous month, is already fully integrated with Particle’s Wallet as a Service (WaaS).

## Advantages of the Particle Paymaster

Particle's Paymaster offers several compelling advantages, making it a powerful component of the Omnichain AA ecosystem:

* **Multi-chain usage:** Once developers deposit USDT, they can sponsor UserOps on every EVM-compatible chain.
* **Adaptable sponsorship logic using Webhooks:** Configuring webhooks allows developers to accurately control which UserOP can be accepted by the cross-chain Paymaster
* **Monitoring:** Developers are able to monitor every UserOp they sponsored.
* **Expiration times:** Developers can define an expiration time for the Paymaster signature. Once the UserOperation reaches its expiration, the Paymaster signature will automatically lapse.

## How to use

1. Use [Particle Network's AA SDKs](/aa/sdks/desktop/web.mdx), Particle's Paymaster will be automatically included, and no extra configuration is needed;
2. Use [Particle Paymaster's RPC](/aa/paymaster) directly to plug the multi-chain paymaster in your AA project.

## Webhooks

Configuring webhooks allows developers to accurately control which UserOP can be accepted by the Paymaster. We use two types of webhooks:

1. Before the Paymaster signs— `before_paymaster_sign`.
2. After the Paymaster signs— `after_paymaster_sign`.

Every time a Webhook request is made, a signature for the body is generated, which developers can verify to determine whether the request was sent by Particle Network. A unique public and private key (RSA-2048) is generated for each project. This key can be downloaded from the users’ [Particle dashboard page](https://dashboard.particle.network/#/login) for verification.

<Frame>
  <div>
    <img alt="Webhooks in the Particle Network dashboard." />

    <img alt="Webhooks in the Particle Network dashboard." />
  </div>
</Frame>

### Webhook: `before_paymaster_sign`

This hook will be triggered before the Paymaster signs. The Paymaster will determine whether to sign the UserOP based on the status code returned by the Hook. It includes:

* Body
  * `chainId`
  * `UserOp` - UserOperation struct.
  * `entryPoint` - The entryPoint address.
  * `parsed` - Transaction struct. The Paymaster will attempt to parse the calldata of the UserOP. If it cannot be parsed, this field may not exist.
* Response\
  If the status code of the response returned is 200, then the Paymaster will accept the UserOP and sign it.

### Webhook: `after_paymaster_sign`

This hook will trigger after the Paymaster signs. It includes:

* Body
  * `chainId`
  * `UserOp` - UserOperation struct.
  * `entryPoint` - The entryPoint address.
  * `parsed` - Transaction struct. The Paymaster will attempt to parse the calldata of the `UserOP`. If it cannot be parsed, this field may not exist.

<Note>Find a guide on how to implement webhooks in [Paymaster guidance](/aa/guides/paymaster#conditional-sponsorship-webhooks).</Note>

### Whitelist Smart Contract

Developers can configure a whitelist of contract methods they want to sponsor in the backend. This means that after configuration, our server will only provide the Paymaster’s signature for the specified contract methods.

<Frame>
  <img alt="Whitelist Smart Contracts for Paymaster on Dashbaord" />
</Frame>

## Sponsorship Policy

The simplest way is to configure a whitelist of contract methods to sponsor. However, using Webhooks provides more flexibility, allowing for unlimited sponsorship strategies through any programmatic logic.

Developers can use Webhooks to implement any sponsorship logic they wish in conjunction with the Paymaster.

For the `before_paymaster_sign` webhook, we return all the data necessary:

* projectUuid
* chainId
* `UserOp`
* and parsed data:
  * accountType: BICONOMY, CYBERCONNECT, SIMPLE
  * txs
* Any policy
  * You can use chainId to decide which chains you want to sponsor.
  * You can use `UserOp` to decide which user address(sender) you want to sponsor.
  * You can use `UserOp` to calculate the gas fee and decide whether to sponsor or not.
  * You can use the accountType and txs to use them as a smart contract whitelist or blacklist.

This allows, for example, for the following business scenarios:

* A GameFi project to allow every new user to mint a game NFT gaslessly.
* A financial platform can sponsor gas for every deposit, so their users don't need to learn the concept of gas.
* An NFT platform can enable users to trade NFTs without gas, using their own fees to cover gas.

In many cases, programmatic sponsorship policies can be used and adapted to create a friendly experience and simplify experiences where it matters most.

<Tip>
  To learn more about Particle's Account Abstraction Stack, head over to the relevant [AA SDK reference pages](/aa/introduction).
</Tip>


# estimateUserOperationGas
Source: https://developers.particle.network/aa/bundler/estimateuseroperationgas

openapi-bundler POST /#eth_estimateUserOperationGas
Learn how to use the estimateUserOperationGas JSON-RPC method.

## Understanding `estimateUserOperationGas`

* `estimateUserOperationGas` takes a partial UserOperation object and returns detailed gas estimates to be used in continued UserOperation construction. It takes:
  * Partial user operation object:
    * `sender` - string.
    * `nonce` - string.
    * `initCode` - string.
    * `callData` - string.
    * `signature` - string.`signature` can be a dummy string, such as `0xfffffffffffffffffffffffffffffff0000000000000000000000000000000007aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1c`.
    * `entrypointAddress` - string.

***

## Query example

```json JSON theme={null}
{
  "method": "eth_estimateUserOperationGas",
  "params": [
    // partial user operation
    {
      "sender": "0x8fb859e944561678be40cdd2db16551396c0b074",
      "nonce": "0x0152",
      "initCode": "0x",
      "callData": "0x9e5d4c49000000000000000000000000329a7f8b91ce7479035cb1b5d62ab41845830ce8000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000",
      "signature": "0x73c3ac716c487ca34bb858247b5ccf1dc354fbaabdd089af3b2ac8e78ba85a4959a2d76250325bd67c11771c31fccda87c33ceec17cc0de912690521bb95ffcb1b"
    },
    "0x5ff137d4b0fdcd49dca30c7cf57e578a026d2789"
  ],
  "id": 1695717515,
  "jsonrpc": "2.0",
  "chainId": 80001
}
```


# getUserOperationByHash
Source: https://developers.particle.network/aa/bundler/getuseroperationbyhash

openapi-bundler POST /#eth_getUserOperationByHash
Learn how to use the getUserOperationByHash JSON-RPC method.

## Understanding `getUserOperationByHash`

* `getUserOperationByHash` returns a UserOperation object corresponding with a specific hash. It takes:
  * `hash` - string.

***

## Query example

```json JSON theme={null}
{
    "method": "eth_getUserOperationByHash",
    "params": [
      // user operation hash
      "0x1ee478a6e967c407e8dfb5e3f2eb1131a7418c36396147fce1f7e81a871102a3"
    ],
    "id": 1695717473,
    "jsonrpc": "2.0",
    "chainId": 80001
}
```


# getUserOperationReceipt
Source: https://developers.particle.network/aa/bundler/getuseroperationreceipt

openapi-bundler POST /#eth_getUserOperationReceipt
Learn how to use the getUserOperationReceipt JSON-RPC method.

## Understanding `getUserOperationReceipt`

* `getUserOperationReceipt` returns a detailed object containing specific transaction details for a given user operation hash. It takes:
  * `hash` - string.

***

## Query example

```json JSON theme={null}
{
  "method": "eth_getUserOperationReceipt",
  "params": [
    // user operation hash
    "0x1ee478a6e967c407e8dfb5e3f2eb1131a7418c36396147fce1f7e81a871102a3"
  ],
  "id": 1695717473,
  "jsonrpc": "2.0",
  "chainId": 80001
}
```


# sendUserOperation
Source: https://developers.particle.network/aa/bundler/senduseroperation

openapi-bundler POST /#eth_sendUserOperation
Learn how to use the sendUserOperation JSON-RPC method.

## Contextualizing `sendUserOperation`

* `sendUserOperation` pushes a signed UserOperation to the network, in this case through the Particle Bundler. It takes:
  * UserOperation object.
  * `entrypointAddress` - string.

***

## Query example

```json JSON theme={null}
{
  "method": "eth_sendUserOperation",
  "params": [
    // user operation
    {
      "sender": "0x8Fb859E944561678be40Cdd2dB16551396c0b074",
      "nonce": "0x0150",
      "initCode": "0x",
      "callData": "0x9e5d4c49000000000000000000000000329a7f8b91ce7479035cb1b5d62ab41845830ce8000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000",
      "callGasLimit": "0xa13c",
      "verificationGasLimit": "0xe2d8",
      "maxFeePerGas": "0x7ca702cd",
      "maxPriorityFeePerGas": "0x7ca702b0",
      "paymasterAndData": "0x000031dd6d9d3a133e663660b959162870d755d4000000000000000000000000329a7f8b91ce7479035cb1b5d62ab41845830ce8000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000416665636080709b968ebec098bf71fb0e79b3b480cc9ff809f192afb478c84ec50ad2de74b93a67860542099b11a1b5dbfa9bc21a2790c58e10015ce992a02f411b00000000000000000000000000000000000000000000000000000000000000",
      "preVerificationGas": "0x011120",
      "signature": "0x7cc0a2ae350b79c5b189bd36d55ab6a2756097d6d37537e3ec2c26daaa82c6d909fed87ff9d79a6fa127bd798126259ee72fa9395ecbeb1f70ed22ca35983aea1c"
    },
    // entrypoint contract address
    "0x5ff137d4b0fdcd49dca30c7cf57e578a026d2789"
  ],
  "id": 1695717470,
  "jsonrpc": "2.0",
  "chainId": 80001
}
```


# supportedEntryPoints
Source: https://developers.particle.network/aa/bundler/supportedentrypoints

openapi-bundler POST /#eth_supportedEntryPoints
Learn how to use the supportedEntryPoints JSON-RPC method.

## Contextualizing `supportEntryPoints`

* `supportEntryPoints` returns a list of EntryPoint addresses supported by the Particle Bundler. It takes no parameters.

<Note>At the moment, only `0x5ff137d4b0fdcd49dca30c7cf57e578a026d2789` is supported due to it being the flagship EntryPoint contract for ERC-4337.</Note>

***

## Query example

```json JSON theme={null}
{
  "chainId": 80001,
  "jsonrpc": "2.0",
  "id": 1,
  "method": "eth_supportedEntryPoints",
  "params": []
}
```


# Particle Account Abstraction FAQ
Source: https://developers.particle.network/aa/faq

Find Frequently Asked Questions about Particle Account Abstraction.

<AccordionGroup>
  <Accordion title="How can I support new ERC-20 tokens for Gas payments?" icon="gas-pump">
    **Answer:** Particle Network uses the Biconomy Paymaster to sponsor transactions using ERC-20 tokens for gas fees. To support new ERC-20 tokens, it is dependent on Biconomy's integration. The availability of a token for gas payments is determined by Biconomy's supported token list.

    <Note>For a complete list of supported ERC-20 tokens, please refer to the [Biconomy documentation](https://docs.biconomy.io/supportedNetworks#supported-tokens).</Note>
  </Accordion>

  <Accordion title="On which chains can I fund the Paymaster?" icon="filter-circle-dollar">
    **Answer:** You can fund the Paymaster by depositing **USDT** on either **Ethereum** or **BNB Chain** through the **Paymaster** menu on the **Particle Network Dashboard**.

    The choice of chain only affects the deposit origin, not the Paymaster’s functionality. Once deposited, USDT is converted to the native token of the target chain, enabling you to sponsor transactions on any supported EVM chain.

    To view the full list of supported EVM chains, head over to the [Network Coverage](/social-logins/network-coverage) page.

    <Note>No USDT deposit is needed for testnet sponsorship.</Note>
  </Accordion>

  <Accordion title="Can I use a custom smart account?" icon="file-user">
    **Answer:** The AA SDK currently doesn't offer native support for custom smart accounts. We support a select range of smart accounts:

    * **SimpleAccount**: `SIMPLE`
    * **Biconomy**: `BICONOMY`
    * **CyberConnect**: `CYBERCONNECT`
    * **Light**: `LIGHT`
    * **Coinbase**: `COINBASE`

    <Tip>For more information on supported smart accounts and how to initialize them, visit the [AA SDK documentation](/aa/sdks/desktop/web#initialization).</Tip>
  </Accordion>

  <Accordion title="Can I automate transactions and/or remove confirmation pop-ups?" icon="robot">
    **Answer:** Yes, with Biconomy V2, you can use **session keys** to grant users the ability to conditionally delegate signing authority. This allows for the automation of transactions and the elimination of confirmation pop-ups, providing a smoother user experience.

    <Note>Learn more about implementing [Session Keys](/aa/guides/keys) in your application.</Note>
  </Accordion>

  <Accordion title="How do I use a custom Bundler?" icon="box">
    **Answer:** Although our SDK doesn't natively support custom Bundlers, you can still create a `UserOperation` object using the SDK. Once constructed, this object can be executed via a standard API call to your own Bundler endpoint.

    <Tip>For detailed guidance on creating and using `UserOperation` objects, check out our [API reference](/aa/rpc/createuserop).</Tip>
  </Accordion>

  <Accordion title="How do I use a custom Paymaster?" icon="money-bill">
    **Answer:** The AA SDK currently only supports Particle's native Paymaster, accessible via the [Particle Network Dashboard](https://dashboard.particle.network), and Biconomy's Paymaster. If you wish to use a custom Paymaster, you'll need to integrate it through a custom API in your application, sponsoring a `UserOperation` constructed by the AA SDK/API.

    After that, using our SDK, you can execute the resulting `UserOperation` (including `paymasterAndData` from your Paymaster).

    <Tip>For more details on the available endpoints, visit the [AA APIs documentation](/aa/rpc/getsmartaccount).</Tip>
  </Accordion>

  <Accordion title="What are the differences between the natively supported smart accounts?" icon="user">
    **Answer:** Each natively-supported smart account differs in feature-set (such as session keys, multi-chain signatures, and so on).

    Below is a table detailing the core differences between account types as it relates to the features they support.

    | Account Type                                                                                                            | Session Keys | Transferable Signer | Multichain Signatures | Gasless Transactions |
    | ----------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------- | --------------------- | -------------------- |
    | [Biconomy (V2)](https://github.com/bcnmy/scw-contracts/blob/main/contracts/smart-account/SmartAccount.sol)              | ✓            | ✓                   | ✓                     | ✓                    |
    | Biconomy (V1)                                                                                                           | ✗            | ✗                   | ✗                     | ✓                    |
    | [Light](https://github.com/alchemyplatform/light-account)                                                               | ✗            | ✓                   | ✗                     | ✓                    |
    | [Coinbase](https://github.com/coinbase/coinbase-wallet-sdk)                                                             | ✗            | ✗                   | ✗                     | ✓                    |
    | CyberConnect                                                                                                            | ✗            | ✗                   | ✗                     | ✓                    |
    | [SimpleAccount](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol) | ✗            | ✗                   | ✗                     | ✓                    |

    <Tip>For more information on the chains supported by each account type, head over to the [Network Coverage page](/social-logins/network-coverage).</Tip>
  </Accordion>
</AccordionGroup>

<Note>
  **Still need help?**

  [Open a ticket](https://t.me/particle_developer_bot) with Particle's Developer Relations team through the dedicated Telegram support bot.
</Note>


# Bundler
Source: https://developers.particle.network/aa/guides/bundler



# Particle Bundler

The **Particle Bundler** is our open-source, production-ready ERC-4337 bundler.\
It has already processed **nearly 1M+ UserOperations** across the EVM ecosystem and powers some of the largest AA campaigns in Web3.

* Free to use via a public RPC: `https://bundler.particle.network`
* Automatically included in all Particle AA SDKs
* Proven to scale and battle-tested in live campaigns

<Tip>Explore the [Particle Bundler repository](https://github.com/Particle-Network/particle-bundler-server).</Tip>

***

## Why use the Particle Bundler?

* **Open-source & free** — no lock-in, use it standalone or with our SDKs
* **Production-grade** — tested at scale with millions of UserOps
* **Full RPC support** — standard bundler methods available out of the box
* **Multi-chain ready** — live on every chain supported by Particle’s Smart Wallet-as-a-Service

***

## Available RPC Methods

The Bundler RPC endpoint:

[https://bundler.particle.network/\{chainId?}](https://bundler.particle.network/\{chainId?})

Supported methods (no auth required):

* `eth_supportedEntryPoints`
* `eth_estimateUserOperationGas`
* `eth_sendUserOperation`
* `eth_getUserOperationByHash`
* `eth_getUserOperationReceipt`

Example request:

```json JSON [expandable] theme={null}
{
  "method": "eth_sendUserOperation",
  "params": [
    {
      "sender": "0x8Fb859E944561678be40Cdd2dB16551396c0b074",
      "nonce": "0x0150",
      "initCode": "0x",
      "callData": "0x9e5d4c49000000000000000000000000329a7f8b91ce7479035cb1b5d62ab41845830ce8000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000",
      "callGasLimit": "0xa13c",
      "verificationGasLimit": "0xe2d8",
      "maxFeePerGas": "0x7ca702cd",
      "maxPriorityFeePerGas": "0x7ca702b0",
      "paymasterAndData": "0x000031dd6d9d3a133e663660b959162870d755d4000000000000000000000000329a7f8b91ce7479035cb1b5d62ab41845830ce8000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000416665636080709b968ebec098bf71fb0e79b3b480cc9ff809f192afb478c84ec50ad2de74b93a67860542099b11a1b5dbfa9bc21a2790c58e10015ce992a02f411b00000000000000000000000000000000000000000000000000000000000000",
      "preVerificationGas": "0x011120",
      "signature": "0x7cc0a2ae350b79c5b189bd36d55ab6a2756097d6d37537e3ec2c26daaa82c6d909fed87ff9d79a6fa127bd798126259ee72fa9395ecbeb1f70ed22ca35983aea1c"
    },
    "0x5ff137d4b0fdcd49dca30c7cf57e578a026d2789"
  ],
  "id": 1695717470,
  "jsonrpc": "2.0",
  "chainId": 80001
}
```

### Supported Chains

The Particle Bundler supports all chains available in Smart Wallet-as-a-Service.

👉 For the full list, see [Network Coverage](/social-logins/network-coverage).

### Interactive Examples

You can try Bundler methods directly in our docs:

<CardGroup>
  <Card title="getUserOperationReceipt" icon="server" href="/aa/bundler/getuseroperationreceipt" />

  <Card title="getUserOperationByHash" icon="server" href="/aa/bundler/getuseroperationbyhash" />

  <Card title="sendUserOperation" icon="server" href="/aa/bundler/senduseroperation" />

  <Card title="estimateUserOperationGas" icon="server" href="/aa/bundler/estimateuseroperationgas" />

  <Card title="supportedEntryPoints" icon="server" href="/aa/bundler/supportedentrypoints" />
</CardGroup>

```
```


# Session Keys
Source: https://developers.particle.network/aa/guides/keys

How to use session keys with Particle’s Account Abstraction SDKs and RPC.

# Session Keys

**Session keys** let you delegate signing permissions under specific conditions to a temporary keypair.

With session keys, your app can:

* Allow users to interact without constant signature popups
* Enable short-term delegated permissions
* Automate transactions safely under defined rules

Particle Network supports session keys through both the [AA SDKs](/aa/introduction) and the [Account Abstraction RPC](/aa/rpc/getsmartaccount).

<Note>Currently supported only on the **Biconomy v2.0.0 smart account implementation**. Other smart account types will throw errors.</Note>

***

## How It Works

The session key flow has two main parts:

1. **Create & register the session**
   * Generate a temporary keypair (session key).
   * Define metadata (`sessionKeyData`) including:
     * Session key address (temporary public key)
     * Linked user address
     * Permission parameters (limits, scope, etc.)
   * Deploy or configure a **`sessionValidationModule`** contract to validate `UserOps`.
   * Register the session on-chain.

2. **Use the session key**
   * `UserOps` can now be signed by the session key instead of the primary wallet.
   * The validation module ensures only authorized operations go through.

👉 Check out this [demo repo](https://github.com/TABASCOatw/particle-session-key-demo/blob/main/src/App.tsx) for a practical example.

***

## API & SDK Methods

To work with session keys, use:

* `createSessions` — create and register a new session
* `validateSession` — validate that a `UserOperation` is authorized under the session

Both are available in:

* **AA SDKs**
* **AA RPC** ([createSessions](/aa/rpc/createsessions), [validateSession](/aa/rpc/validatesession))

***

## Example Validation Contract

Here’s an example `sessionValidationModule` contract that implements `validateSessionUserOp`:

```solidity Solidity [expandable] theme={null}
// SPDX-License-Identifier: MIT
pragma solidity 0.8.19;

import {UserOperation} from "@account-abstraction/contracts/interfaces/UserOperation.sol";

abstract contract ISessionValidationModule {
    // execute(address,uint256,bytes)
    bytes4 public constant EXECUTE_SELECTOR = 0xb61d27f6;
    // execute_ncC(address,uint256,bytes)
    bytes4 public constant EXECUTE_OPTIMIZED_SELECTOR = 0x0000189a;

    /**
     * @dev validates if the _op (UserOperation) matches the SessionKey permissions
     * and that _op has been signed by this SessionKey
     * @param _op User Operation to be validated.
     * @param _userOpHash Hash of the User Operation to be validated.
     * @param _sessionKeyData SessionKey data, that describes sessionKey permissions
     * @param _sessionKeySignature Signature over the the _userOpHash.
     * @return true if the _op is valid, false otherwise.
     */
    function validateSessionUserOp(
        UserOperation calldata _op,
        bytes32 _userOpHash,
        bytes calldata _sessionKeyData,
        bytes calldata _sessionKeySignature
    ) external virtual returns (bool);
}
```

## Tutorial Video

<Frame>
  <iframe title="Session Keys in Particle Smart Wallet as a Service: A Technical Deep Dive" alt="Session Keys in Particle Smart Wallet as a Service: A Technical Deep Dive" />
</Frame>


# Paymaster
Source: https://developers.particle.network/aa/guides/paymaster

How to use Particle Network’s Omnichain Paymaster for cross-chain gas sponsorship.

# Particle Omnichain Paymaster

The **Omnichain Paymaster** lets you sponsor gas fees across multiple chains with a **single USDT deposit**.

* Deposit USDT once (Ethereum or BNB Chain)
* Funds are automatically converted into the native gas token of the target chain
* Works out of the box with Particle’s Smart Wallet-as-a-Service
* Free to use on testnets (no deposit required)
* Fully customizable sponsorship logic via webhooks

This removes the need to manage separate balances for each chain.

***

## How to Use the Paymaster

There are two ways to use the Paymaster:

### 1. Through Particle’s AA SDKs

* Enabled automatically, no setup required.
* On testnets, transactions are sponsored for free.
* On mainnets, sponsorship is funded from your project’s Paymaster balance.

👉 Quickstarts: [Web](/aa/quickstart/web-aa) • [Mobile](/aa/quickstart/mobile-aa)

### 2. Through the Paymaster RPC

If you want direct control:

[https://paymaster.particle.network](https://paymaster.particle.network)

Supported RPC methods:

* `pm_sponsorUserOperation` — request gas sponsorship
* `pm_paymasterBalance` — check your deposit balance

👉 See [Paymaster RPC](/aa/paymaster/paymasterbalance) for examples and parameters.

***

## Funding the Paymaster

To sponsor transactions on mainnets:

1. Go to the [Particle Dashboard](https://dashboard.particle.network).
2. Create a project (if you don’t have one yet).
3. Open the **Paymaster** menu.
4. Deposit USDT on **Ethereum** or **BNB Chain**.

* Deposits are tied to your project (`projectId`, `clientKey`, `appId`).
* Deposits automatically cover sponsorships across all supported EVM chains.

<Note>USDT is not required for testnet sponsorship.</Note>

<div>
  <img alt="Paymaster menu." />

  <img alt="Paymaster menu." />
</div>

***

## Conditional Sponsorship (Webhooks)

You can define rules for when sponsorship applies using **webhooks**.

Available hooks:

* `before_paymaster_sign` — runs before sponsorship; determines if the `UserOp` should be signed.
* `after_paymaster_sign` — runs after sponsorship; useful for logging or post-processing.

Both hooks receive:

* `projectUuid` — your project ID
* `chainId` — chain where sponsorship is requested
* `userOp` — the full `UserOperation` object
* `entryPoint` — standard EntryPoint address (`0x5FF137...`)
* `parsed` — simplified transaction array

Return `200` to confirm sponsorship, or `400` to reject.

### Example: `before_paymaster_sign`

```json json [expandable] theme={null}
POST https://your-domain/hook-before-paymaster-sign
{
  "type": "before_paymaster_sign",
  "chainId": 80001,
  "projectUuid": "ef6c29f5-ad2b-545c-ad0c-54441068b71d",
  "userOp": {
        "sender": "0x2e9661BDA6201F97430dcc1541A1579b83980DD1",
        "nonce": "0x05",
        "initCode": "0x",
        "callData": "0xb61d27f6000000000000000000000000ac6a87c681a5ed4cb58bc4fa7bf81a83b928c83c00000000000000000000000000000000000000000000000000005af3107a400000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000",
        "callGasLimit": "0x9acc",
        "verificationGasLimit": "0x0186a0",
        "preVerificationGas": "0xc5dc",
        "maxFeePerGas": "0xa79dd02a",
        "maxPriorityFeePerGas": "0xa79dd015",
        "paymasterAndData": "0x",
        "signature": "0x"
        },
  "parsed": {
    "accountType": "SIMPLE",
    "txs": [
      { "to": "0xaC6A...", "value": "0x5af3107a4000", "data": "0x" }
    ]
  }
}
```

### Example: `after_paymaster_sign`

```json json [expandable] theme={null}
POST https://your-domain/hook-after-paymaster-sign
{
  "type": "after_paymaster_sign",
  "chainId": 80001,
  "projectUuid": "ef6c29f5-ad2b-545c-ad0c-54441068b71d",
  "userOpHash": "0x45d4f...",
  "userOp": { "sender": "0x...", "nonce": "0x05", ... }
}
```

### Request Verification

All webhook requests from Particle are signed.

* A unique RSA-2048 keypair is generated for each project.
* Download your project’s public key from the Particle Dashboard.
* Use it to verify the `x-particle-signature` header on incoming requests.

<div>
  <img alt="Request verification." />

  <img alt="Request verification." />
</div>

### Additional Resources

<CardGroup>
  <Card title="Paymaster RPC Reference" icon="code" href="/aa/paymaster/paymasterbalance" />

  <Card title="Architecture Overview" icon="diagram-project" href="/aa/architecture/omni-paymaster" />
</CardGroup>


# Introduction to Account Abstraction
Source: https://developers.particle.network/aa/introduction

Overview of Particle Network’s Account Abstraction SDKs.

<img alt="Particle Network Account Abstraction." />

<img alt="Particle Network Account Abstraction." />

## Account Abstraction with Particle

Particle Network makes it easy to use **ERC-4337 account abstraction** across your apps.\
With our Account Abstraction (AA) SDKs you can:

* Deploy and manage Smart Accounts
* Build and send UserOperations
* Sponsor gas fees
* Connect with Particle Auth or your own login system

***

### Why use the AA SDK?

* End-to-end account abstraction without running your own infra
* Works out of the box with Particle Auth
* Flexible enough to integrate into custom flows
* Access to Particle’s Bundler and enhanced RPC endpoints

***

### Available SDKs

<CardGroup>
  <Card title="Web SDK" icon="code" href="/aa/sdks/desktop/web">
    Add account abstraction to web apps.
  </Card>

  <Card title="Unity SDK" icon="code" href="/aa/sdks/mobile/unity">
    Use AA inside Unity games.
  </Card>

  <Card title="Android SDK" icon="code" href="/aa/sdks/mobile/android">
    Add AA to Android apps.
  </Card>

  <Card title="iOS SDK" icon="code" href="/aa/sdks/mobile/ios">
    Add AA to iOS apps.
  </Card>

  <Card title="Flutter SDK" icon="code" href="/aa/sdks/mobile/flutter">
    Add AA to Flutter apps.
  </Card>
</CardGroup>

### Avilable APIs

<CardGroup>
  <Card title="Account Abstraction API" icon="server" href="/aa/rpc/getsmartaccount">
    Enhanced API for Smart Accounts.
  </Card>

  <Card title="Bundler API" icon="server" href="/aa/bundler/getuseroperationreceipt">
    API for Particle’s in-house Bundler.
  </Card>

  <Card title="Paymaster API" icon="server" href="/aa/paymaster/paymasterbalance">
    API for Particle’s in-house Paymaster.
  </Card>
</CardGroup>

***

### Additional Resources

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/aa/quickstart" />

  <Card title="AA SDK Reference" icon="code" href="/aa/sdks" />

  <Card title="Bundler Overview" icon="server" href="/aa/architecture/bundler" />
</CardGroup>


# Network Coverage
Source: https://developers.particle.network/aa/network-coverage

A complete list of all networks covered by Particle's Account Abstraction stack.

Particle Network's Account Abstraction (AA) stack provides comprehensive support across a wide range of EVM-compatible networks, enabling developers to build seamless, wallet-less experiences for users across multiple blockchains.

Our AA implementation supports various account types including Biconomy, SimpleAccount, CyberConnect, Light, and Coinbase, allowing you to choose the solution that best fits your application's needs.

## Smart Account Support

### Account Types

* **BV1**: Biconomy V1
* **BV2**: Biconomy V2
* **SA**: SimpleAccount
* **CC**: CyberConnect
* **LT**: Light
* **CB**: Coinbase

## Full Support Networks

| Network  | BV1 | BV2 | SA | CC | LT | CB |
| -------- | --- | --- | -- | -- | -- | -- |
| Ethereum | ✓   | ✓   | ✓  | ✓  | ✓  | ✓  |
| Polygon  | ✓   | ✓   | ✓  | ✓  | ✓  | ✓  |
| Optimism | ✓   | ✓   | ✓  | ✓  | ✓  | ✓  |
| Base     | ✓   | ✓   | ✓  | ✓  | ✓  | ✓  |

## High Support Networks

| Network   | BV1 | BV2 | SA | CC | LT | CB |
| --------- | --- | --- | -- | -- | -- | -- |
| BNB Chain | ✓   | ✓   | ✓  | ✓  |    |    |
| Arbitrum  | ✓   | ✓   | ✓  | ✓  |    |    |
| Linea     |     | ✓   | ✓  | ✓  |    | ✓  |
| opBNB     |     | ✓   | ✓  | ✓  |    | ✓  |
| Avalanche | ✓   | ✓   | ✓  |    |    | ✓  |

## Medium Support Networks

| Network       | BV1 | BV2 | SA | CC | LT | CB |
| ------------- | --- | --- | -- | -- | -- | -- |
| Mantle        |     | ✓   | ✓  | ✓  |    |    |
| Scroll        |     | ✓   | ✓  | ✓  |    |    |
| Cyber         |     |     | ✓  | ✓  |    |    |
| Polygon zkEVM | ✓   | ✓   | ✓  |    |    |    |

## Basic Support Networks (SimpleAccount & Biconomy V2)

| Network   | BV1 | BV2 | SA | CC | LT | CB |
| --------- | --- | --- | -- | -- | -- | -- |
| Manta     |     | ✓   | ✓  |    |    |    |
| Moonbeam  |     | ✓   | ✓  |    |    |    |
| Combo     |     | ✓   | ✓  |    |    |    |
| Gnosis    |     | ✓   | ✓  |    |    |    |
| ZetaChain |     | ✓   | ✓  |    |    |    |
| Blast     |     | ✓   | ✓  |    |    |    |
| Sei       |     | ✓   | ✓  |    |    |    |

## SimpleAccount-Only Networks

| Network       | SimpleAccount |
| ------------- | ------------- |
| Fantom        | ✓             |
| GM Network    | ✓             |
| Fuse          | ✓             |
| IoTeX         | ✓             |
| Taiko         | ✓             |
| Bitlayer      | ✓             |
| Xterio        | ✓             |
| Astar zkEVM   | ✓             |
| Viction       | ✓             |
| Moonriver     | ✓             |
| Core          | ✓             |
| Mode          | ✓             |
| Ancient8      | ✓             |
| ZKFair        | ✓             |
| 5ire          | ✓             |
| Kakarot       | ✓             |
| Zircuit       | ✓             |
| Aura          | ✓             |
| Gravity       | ✓             |
| DODOChain     | ✓             |
| Duckchain     | ✓             |
| Story Network | ✓             |
| Plume         | ✓             |
| Soneium       | ✓             |
| Lumia         | ✓             |
| Movement      | ✓             |
| HashKey       | ✓             |


# paymasterBalance
Source: https://developers.particle.network/aa/paymaster/paymasterbalance

openapi-paymaster POST /#pm_paymasterBalance
Learn how to use the paymasterBalance JSON-RPC method.

## Understanding `paymasterBalance`

* `paymasterBalance` returns the USD balance (6 decimals) of the Paymaster associated with your `projectId` (`projectUuid`) and `serverKey` (`projectKey`). It takes no parameters other than the `projectUuid` and `projectKey` for authentication.

***

## Query example

```javascript JavaScript theme={null}
import Axios from "axios";

const projectUuid = "Your project uuid";
const projectKey = "Your project client key or server key";

const paymasterUrl = "https://paymaster.particle.network";
(async () => {
    const response = await Axios.post(
        paymasterUrl,
        {
            method: "pm_paymasterBalance",
            params: [],
        },
        {
            params: {
                projectUuid,
                projectKey,
            },
        }
    );

    console.log(response.data);
})();
```


# sponsorUserOperation
Source: https://developers.particle.network/aa/paymaster/sponsoruseroperation

openapi-paymaster POST /#pm_sponsorUserOperation
Learn how to use the sponsorUserOperation JSON-RPC method.

## Contextualizing `sponsorUserOperation`

* `sponsorUserOperation` returns a Paymaster signature to sponsor a given UserOperation, pulling from the USDT balance of the Paymaster. It takes:
* UserOperation object.
* `entrypointAddress` - string.

***

## Query example

```javascript JavaScript theme={null}
import Axios from "axios";

const chainId = 11155111;
const projectUuid = "Your project uuid";
const projectKey = "Your project client key or server key";
const entryPoint = "0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789";
const userOp = {
    sender: "0xfE71795B01d2c36FD5a001fe9D47EAec0da77e59",
    nonce: "0x00",
    initCode:
        "0x9406cc6185a346906296840746125a0e449764545fbfb9cf0000000000000000000000009a8c05c7ac9acecc1185d5a624eb185e63dde9c20000000000000000000000000000000000000000000000000000000000000000",
    callData:
        "0xb61d27f6000000000000000000000000aae0de40f94469761b797920a46f223d0fffd013000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000",
    maxFeePerGas: "0x5e18a0d2",
    maxPriorityFeePerGas: "0x5de29812",
    paymasterAndData: "0x",
    signature: "0x",
    preVerificationGas: "0xc954",
    verificationGasLimit: "0x066c12",
    callGasLimit: "0xf2a0",
};

const paymasterUrl = "https://paymaster.particle.network";
(async () => {
    const response = await Axios.post(
        paymasterUrl,
        {
            method: "pm_sponsorUserOperation",
            params: [userOp, entryPoint],
        },
        {
            params: {
                chainId,
                projectUuid,
                projectKey,
            },
        }
    );

    console.log(response.data);
})();
```


# Mobile (Android/iOS) Quickstart - AA
Source: https://developers.particle.network/aa/quickstart/mobile-aa



# Using Particle's Mobile AA SDKs

The Particle Mobile AA SDKs bring account abstraction to native mobile apps. They handle:

* Smart account deployment and assignment
* `UserOperation` construction and sending
* Session keys
* Integration with paymasters and bundlers

These SDKs are modular and compatible with different smart account implementations (`BICONOMY`, `CYBERCONNECT`, `SIMPLE`, `LIGHT`, etc.).

***

## Supported Platforms

| Platform         | Package                                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Android**      | `network.particle:aa-service` (Kotlin)                                                                                   |
| **iOS**          | `ParticleAA` (via CocoaPods)                                                                                             |
| **Flutter**      | `particle_aa` (Dart)                                                                                                     |
| **React Native** | `@particle-network/rn-aa` (JavaScript)                                                                                   |
| **Unity**        | [Unity AA Module](https://github.com/Particle-Network/particle-unity/tree/main/Assets/ParticleNetwork/Mobile/Modules/AA) |

***

## Setup Flow

1. Integrate either **Particle Connect** or **Particle Auth** (required as the authentication layer).
2. Install the AA SDK for your platform.
3. Initialize the AA service with your chosen smart account type.
   * Options:
     * `BICONOMY_V2`
     * `CYBERCONNECT`
     * `SIMPLE`
     * `LIGHT`
     * `COINBASE`

***

## Initialization Examples

```kotlin Android (Kotlin) theme={null}
// Optional: only if using Biconomy’s paymaster
val apiKey = mapOf(Ethereum.id to "API_KEY", Polygon.id to "API_KEY")

// Init with chosen service: BiconomyAAService, CyberConnectAAService, SimpleAAService
ParticleNetwork.initAAMode(apiKey, aaService = BiconomyAAService)
ParticleNetwork.getAAService().enableAAMode()

// Options: .biconomyV1, .biconomyV2, .cyberConnect, .simple, .light
AAService.initialize(name: .biconomyV1)

let aaService = AAService()
aaService.enableAAMode()
ParticleNetwork.setAAService(aaService)

// Options: BICONOMY_V1, BICONOMY_V2, CYBERCONNECT, SIMPLE, LIGHT
ParticleAA.init(AccountName.BICONOMY_V1())
ParticleAA.enableAAMode()

// Options: BICONOMY_V1, BICONOMY_V2, SIMPLE, CYBERCONNECT, LIGHT
ParticleAAInteraction.Init(AAAccountName.BICONOMY_V1())

// Options: BICONOMY_V1, BICONOMY_V2, CYBERCONNECT, SIMPLE, LIGHT
particleAA.init(AccountName.BICONOMY_V1())
```

***

Learn More

Select your platform for the full SDK reference:

<CardGroup>
  <Card title="Unity SDK" icon="code" href="/aa/sdks/mobile/unity" />

  <Card title="Android SDK" icon="code" href="/aa/sdks/mobile/android" />

  <Card title="iOS SDK" icon="code" href="/aa/sdks/mobile/ios" />

  <Card title="Flutter SDK" icon="code" href="/aa/sdks/mobile/flutter" />

  <Card title="React Native SDK" icon="code" href="/aa/sdks/mobile/react" />
</CardGroup>


# Web (Desktop) Quickstart - AA
Source: https://developers.particle.network/aa/quickstart/web-aa

Quickstart guide for leveraging Particle’s AA stack in web applications.

# Using Particle's Web AA SDK

The Particle Web **AA SDK** makes it simple to integrate account abstraction into your web apps. It streamlines smart account management, bundling transactions, and sponsoring gas fees—enhancing user experience and flexibility.

<Note>
  This guide shows how to initialize and configure the AA SDK in a web app using **Particle Authkit** as the authentication layer.
</Note>

***

## Getting Started

1. Clone the [Particle Authkit starter](https://github.com/Particle-Network/particle-authkit-starter).
2. Follow the `README` instructions to set it up.

<Info>This guide uses the **Next.js** version of the starter repo.</Info>

Once your Authkit project is running, install the **AA SDK**:

<CodeGroup>
  ```shell yarn theme={null}
  yarn add @particle-network/aa
  ```

  ```shell npm theme={null}
  npm install @particle-network/aa
  ```
</CodeGroup>

### Configuring the Smart Account

If you’re using Authkit, you can enable smart accounts in the `authkit.tsx` file:

```typescript authkit.tsx theme={null}
erc4337: {
    name: "SIMPLE",
    version: "2.0.0",
},
```

* Contract options: `BICONOMY`, `CYBERCONNECT`, `SIMPLE`, `LIGHT`, `COINBASE`
* Versions: `1.0.0` or `2.0.0` (recommended for better gas efficiency)

Here is an example of the full configuration file:

```tsx authkit.tsx [expandable] theme={null}
"use client";

// Particle imports
import {
  AuthCoreContextProvider,
  PromptSettingType,
} from "@particle-network/authkit";
import { AuthType } from "@particle-network/auth-core";
import { baseSepolia, sepolia } from "@particle-network/authkit/chains";

export const ParticleAuthkit = ({ children }: React.PropsWithChildren) => {
  return (
    <AuthCoreContextProvider
      options={{
        // All env variable must be defined at runtime
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
        clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
        appId: process.env.NEXT_PUBLIC_APP_ID!,

        // This is how you limit the options available.
        // Remove the authTypes array to display all options available
        authTypes: [
          AuthType.email,
          AuthType.google,
          AuthType.twitter,
          AuthType.github,
          AuthType.discord,
        ],
        // Locks the chain selector to Base Sepolia and Ethereum Sepolia
        chains: [baseSepolia, sepolia],

        // Optionally, switches the embedded wallet modal to reflect a smart account
        erc4337: {
          name: "SIMPLE",
          version: "2.0.0",
        },
        themeType: "dark",
        // You can prompt the user to set up extra security measure upon login or other interactions
        promptSettingConfig: {
          promptPaymentPasswordSettingWhenSign: PromptSettingType.first,
          promptMasterPasswordSettingWhenLogin: PromptSettingType.first,
        },
        wallet: {
          // Set to false to remove the embedded wallet modal
          visible: true,
          customStyle: {
            supportUIModeSwitch: true,
            supportLanguageSwitch: false,
          },
        },
      }}
    >
      {children}
    </AuthCoreContextProvider>
  );
};
```

<Note>This is only a UI configuration for Authkit’s embedded wallet modal.</Note>

Next, configure the smart account itself in your app, in this case in `page.tsx`:

```typescript page.tsx theme={null}
import { SmartAccount } from '@particle-network/aa';
import { baseSepolia, sepolia } from "@particle-network/authkit/chains";

const smartAccount = new SmartAccount(provider, {
  projectId: 'PROJECT_ID',
  clientKey: 'CLIENT_KEY',
  appId: 'APP_ID',
  aaOptions: {
    accountContracts: {
      SIMPLE: [
        {
          version: '2.0.0',
          chainIds: [baseSepolia.id, sepolia.id],
        }
      ],
    }
  },
});
```

Now the smart account is initialized and ready to be used.

### Using with ethers.js

To use the smart account in ethers, wrap it with `AAWrapProvider` and select the transaction mode:

<Note>In this example we use `ethers.js` as the provider, but you can also use the AA SDK directly like shown in the [AA SDK reference](/aa/sdks/desktop/web#examples-of-utilization).</Note>

```typescript page.tsx theme={null}
import { AAWrapProvider, SendTransactionMode } from '@particle-network/aa';
import { ethers, type Eip1193Provider } from "ethers";

const createEthersProvider = () => {
  return new ethers.BrowserProvider(
    new AAWrapProvider(smartAccount, SendTransactionMode.Gasless) as Eip1193Provider, // options: .gasless, .userPaidNative
    "any"
  );
};
```

Here we use `Gasless` mode to sponsor the transaction.

### Sending a Transaction

Every transaction sent through the this ethers provider will automatically be gasless, and you can use the ethers.js API as usual.

```typescript page.tsx theme={null}
const executeTxEthers = async () => {
  const ethersProvider = createEthersProvider();
  const signer = await ethersProvider.getSigner();
  const tx = {
    to: recipientAddress,
    value: ethers.parseEther("0.1"), // 0.1 ETH
  };
  const txResponse = await signer.sendTransaction(tx);
  const txReceipt = await txResponse.wait();
  console.log("Transaction receipt:", txReceipt);
};
```

Now you only need to wire this function to a button or UI element, and the transaction will be sent through the smart account.

The original EOA remains the onwer of the smart account and will be used to sign the `UserOperation`.

<Note>
  See a complete demo in this [repository](https://github.com/Particle-Network/kakarot-auth-aa-demo/blob/main/kakarot-particle-aa-nextjs/src/app/page.tsx).
</Note>


# createSessions
Source: https://developers.particle.network/aa/rpc/createsessions

openapi-aa POST /#particle_aa_createSessions
Learn how to use the createSessions JSON-RPC method.

## Contextualizing `createSessions`

* `createSessions` will generate transactions (or UserOperation objects and hashes, according to the fee payment mechanism) for initializing a session key within predefined parameters. It takes:
  * Account config object:
    * `name` - string.
    * `version` - string.
    * `ownerAddress` - string.
    * `biconomyApiKey` - (optional), string. It should only be used if you'd like to use a Biconomy Paymaster.
  * Array of sessions:
    * Session object:
      * `validUntil` - integer.
      * `validAfter` - integer.
      * `sessionValidationModule` - string.
      * `sessionKeyDataInAbi` (alternative: `sessionKeyData`) - array.

***

## Query example

```json JSON theme={null}
{
    "chainId": 80001,
    "jsonrpc": "2.0",
    "id": "f7423e6b-0f69-4b96-8d1e-dcd485f8c2eb",
    "method": "particle_aa_createSessions",
    "params": [
        { "name": "BICONOMY", "version": "2.0.0", "ownerAddress": "0xc19dd1f3e212b39a30036EF3DE3F83dEf5a66E41" },
        [
            {
                "validUntil": 0,
                "validAfter": 0,
                "sessionValidationModule": "0x4b7f018Fa27a97b6a17b6d4d8Cb3c0e2D9340133",
                "sessionKeyDataInAbi": [ // or use sessionKeyData to replace
                    ["address", "address", "address", "uint256"],
                    [
                        "0x1dacDa1087C4048774bEce7784EB8EC4CfBeDB2c",
                        "0x909E30bdBCb728131E3F8d17150eaE740C904649",
                        "0x11D266772b85C2C5D4f84A41ca3E08e9f04Fb5D3",
                        1
                    ]
                ]
            }
        ]
    ]
}
```


# createUserOp
Source: https://developers.particle.network/aa/rpc/createuserop

openapi-aa POST /#particle_aa_createUserOp
Learn how to use the createUserOp JSON-RPC method.

## Understanding `createUserOp`

* `createUserOp` will construct and return a UserOperation object and hash using a transaction or collection of transactions, alongside smart account and fee payment information. It takes:
  * Account config object:
    * `name` - string, either `BICONOMY`, `CYBERCONNECT`, or `SIMPLE`.
    * `version` - string, either `1.0.0` or `2.0.0`.
    * `ownerAddress` - string.
    * `biconomyApiKey` - (optional, for using Biconomy's Paymaster), string.
  * Array of transactions:
    * Standard transaction object.
  * Optionally, a token `feeQuote` object, retrieved from `getFeeQuotes`, only used if you're paying the gas fee in an ERC-20 token.
  * Token paymaster address - (optional), string.

***

## Query example

```json JSON theme={null}
{
  "jsonrpc": "2.0",
  "id": "4259f7fe-87aa-44fd-89c8-fc1e41f6d3d8",
  "chainId": 80001,
  "method": "particle_aa_createUserOp",
  "params": [
    // account config
    {
      "name": "BICONOMY",
      "version": "1.0.0",
      "ownerAddress": "0xA60123a1056e9D38B64c4993615F27cCe9A9E8D5",
      "biconomyApiKey": "LdF-gC43H.6f0ec763-fde5-4d5e-89f6-1b9ef12ba4a4" // optional
    },
    // txs
    [
      {
        "to": "0x329a7f8b91Ce7479035cb1B5D62AB41845830Ce8",
        "value": "0x1",
        "data": "0x"
      }
    ],
    // optional: If you don't pass the following params, it'll create a gasless/user paid user op
    // token feeQuote
    {
      "tokenInfo": {
        "chainId": 80001,
        "name": "WMATIC",
        "symbol": "WMATIC",
        "decimals": 18,
        "address": "0x9c3C9283D3e44854697Cd22D3Faa240Cfb032889",
        "logoURI": "https://polygonscan.com/token/images/wMatic_32.png"
      },
      "fee": "374428266633331",
      "balance": "1019119852023946296",
      "premiumPercentage": "10"
    },
    // token paymaster address
    "0x00000f7365cA6C59A2C93719ad53d567ed49c14C"
  ]
}
```


# getFeeQuotes
Source: https://developers.particle.network/aa/rpc/getfeequotes

openapi-aa POST /#particle_aa_getFeeQuotes
Learn how to use the getFeeQuotes JSON-RPC method.

## Understanding `getFeeQuotes`

* `getFeeQuotes` returns an array of UserOperation objects and hashes derived from a standard transaction object. Each returned object corresponds to a specific gas Payment method. It takes:
  * Account config object:
    * `name` - string.
    * `version` - string.
    * `ownerAddress` - string.
    * `biconomyApiKey` - (optional), string. It should only be used if you'd like to use a Biconomy Paymaster.
  * An array of standard transaction objects.

***

## Query example

```json JSON theme={null}
{
  "jsonrpc": "2.0",
  "id": "f216c7ea-3986-4784-954f-e54320c75b40",
  "chainId": 80001,
  "method": "particle_aa_getFeeQuotes",
  "params": [
    // account config
    {
      "name": "BICONOMY",
      "version": "1.0.0",
      "ownerAddress": "0xA60123a1056e9D38B64c4993615F27cCe9A9E8D5",
      "biconomyApiKey": "LdF-gC43H.6f0ec763-fde5-4d5e-89f6-1b9ef12ba4a4" // optional
    },
    // txs
    [
      {
        "to": "0x329a7f8b91Ce7479035cb1B5D62AB41845830Ce8",
        "value": "0x1",
        "data": "0x"
      }
    ]
  ]
}
```


# getSmartAccount
Source: https://developers.particle.network/aa/rpc/getsmartaccount

openapi-aa POST /#particle_aa_getSmartAccount
Learn how to use the getSmartAccount JSON-RPC method.

## Understanding `getSmartAccount`

* `getSmartAccount` returns information regarding a specific smart account (such as a `BICONOMY`, `CYBERCONNECT`, `SIMPLE`, `LIGHT`, `XTERIO` account) tied to an account address. It takes:
  * Account config object:
    * `name` - string. Either `BICONOMY`, `CYBERCONNECT` or `SIMPLE`.
    * `version` - string. Either `1.0.0`, '1.0.2' or `2.0.0` (see the [Web SDK](/aa/sdks/desktop/web) reference for supported configurations).
    * `ownerAddress` - string.

***

## Query example

```json JSON theme={null}
{
  "jsonrpc": "2.0",
  "id": "ee9cce2a-2f34-4c66-879e-c84c6f0e7f2d",
  "chainId": 80001,
  "method": "particle_aa_getSmartAccount",
  "params": [
    // account config array
    {
      "name": "BICONOMY",
      "version": "1.0.0",
      "ownerAddress": "0xA60123a1056e9D38B64c4993615F27cCe9A9E8D5"
    },
    {
      "name": "BICONOMY",
      "version": "1.0.0",
      "ownerAddress": "0x329a7f8b91Ce7479035cb1B5D62AB41845830Ce8"
    }
  ]
}
```


# sendUserOp
Source: https://developers.particle.network/aa/rpc/senduserop

openapi-aa POST /#particle_aa_sendUserOp
Learn how to use the sendUserOp JSON-RPC method.

## Understanding `sendUserOp`

* `sendUserOp` pushes a structured and signed UserOperation to the network, also handling session keys, sender management, etc. It takes:
  * Account config object:
    * `name` - string.
    * `version` - string.
    * `ownerAddress` - string.
    * `biconomyApiKey` - (optional), string. Should only be used if you'd like to use a Biconomy Paymaster.
  * UserOp object. This should be signed by the user and if applicable, the Paymaster as well.
  * Optionally, `sessions` array - Session key object(s).

***

## Query example

```json JSON theme={null}
{
  "jsonrpc": "2.0",
  "id": "89916c65-2a47-4933-aa4c-55f7e29edbf0",
  "chainId": 80001,
  "method": "particle_aa_sendUserOp",
  "params": [
    // account config
    {
      "name": "BICONOMY",
      "version": "1.0.0",
      "ownerAddress": "0xA60123a1056e9D38B64c4993615F27cCe9A9E8D5",
      "biconomyApiKey": "LdF-gC43H.6f0ec763-fde5-4d5e-89f6-1b9ef12ba4a4" // optional
    },
    // user op
    {
      "sender": "0x8fb859e944561678be40cdd2db16551396c0b074",
      "nonce": "0x64",
      "initCode": "0x",
      "callData": "0x912ccaa3000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000c0000000000000000000000000000000000000000000000000000000000000012000000000000000000000000000000000000000000000000000000000000000020000000000000000000000009c3c9283d3e44854697cd22d3faa240cfb032889000000000000000000000000329a7f8b91ce7479035cb1b5d62ab41845830ce80000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000c00000000000000000000000000000000000000000000000000000000000000044095ea7b300000000000000000000000000000f7365ca6c59a2c93719ad53d567ed49c14c0000000000000000000000000000000000000000000000000001548a5fd39873000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
      "signature": "0xf173083acfa6ddfdbbb84023ebdeb07ff2a38aa1a2e7f7b1b2eb27e180ff13987c14d72273b82f448b8e89066045aebb9e5423eea3c2314136cc9c75d7bb716f1b",
      "verificationGasLimit": "0x163b8",
      "callGasLimit": "0xd1e7",
      "preVerificationGas": "50736",
      "paymasterAndData": "0x00000f7365ca6c59a2c93719ad53d567ed49c14c000000000000000000000000000000000000000000000000000000000064d2762e0000000000000000000000000000000000000000000000000000000064d26f260000000000000000000000009c3c9283d3e44854697cd22d3faa240cfb03288900000000000000000000000000000f7748595e46527413574a9327942e744e910000000000000000000000000000000000000000000000000de567836c0e69c0000000000000000000000000000000000000000000000000000000000010c8e09292fc583c0427b08765e4eccc030122182d141b6dbc5bb539fc4de726935042106faec9ee5b7537cf15c5f7d317fc355a0ff41877815fcbf9c906e0b584c4b61b",
      "maxFeePerGas": "1500000034",
      "maxPriorityFeePerGas": "1500000000"
    },
    // Optional
    {
      "sessions": [
          {
              "validUntil": 0,
              "validAfter": 0,
              "sessionValidationModule": "0x4b7f018Fa27a97b6a17b6d4d8Cb3c0e2D9340133",
              "sessionKeyDataInAbi": [ // or use sessionKeyData to replace
                  ["address", "address", "address", "uint256"],
                  [
                      "0x1dacDa1087C4048774bEce7784EB8EC4CfBeDB2c",
                      "0x909E30bdBCb728131E3F8d17150eaE740C904649",
                      "0x11D266772b85C2C5D4f84A41ca3E08e9f04Fb5D3",
                      1
                  ]
              ]
          }
      ],
      "targetSession": {
          "validUntil": 0,
          "validAfter": 0,
          "sessionValidationModule": "0x4b7f018Fa27a97b6a17b6d4d8Cb3c0e2D9340133",
          "sessionKeyDataInAbi": [ // or use sessionKeyData to replace
              ["address", "address", "address", "uint256"],
              [
                  "0x1dacDa1087C4048774bEce7784EB8EC4CfBeDB2c",
                  "0x909E30bdBCb728131E3F8d17150eaE740C904649",
                  "0x11D266772b85C2C5D4f84A41ca3E08e9f04Fb5D3",
                  1
              ]
          ]
      }
    }
  ]
}
```


# validateSession
Source: https://developers.particle.network/aa/rpc/validatesession

openapi-aa POST /#particle_aa_validateSession
Learn how to use the validateSession JSON-RPC method.

## Contextualizing `validateSession`

* `validateSession` returns a Boolean, `result`, indicating the validity of a given session key instance. It takes:
  * Account config object:
    * `name` - string.
    * `version` - string.
    * `ownerAddress` - string.
    * `biconomyApiKey` - (optional), string. It should only be used if you'd like to use a Biconomy Paymaster.
  * Array of sessions:
    * Session object:
      * `validUntil` - integer.
      * `validAfter` - integer.
      * `sessionValidationModule` - string.
      * `sessionKeyDataInAbi` (alternative: `sessionKeyData`) - array.

***

## Query example

```json JSON theme={null}
{
    "chainId": 80001,
    "jsonrpc": "2.0",
    "id": "0a7a18a1-53af-45b1-8a7f-4ece06c09e04",
    "method": "particle_aa_validateSession",
    "params": [
        { "name": "BICONOMY", "version": "2.0.0", "ownerAddress": "0xc19dd1f3e212b39a30036EF3DE3F83dEf5a66E41" },
        {
            "sessions": [
                {
                    "validUntil": 0,
                    "validAfter": 0,
                    "sessionValidationModule": "0x4b7f018Fa27a97b6a17b6d4d8Cb3c0e2D9340133",
                    "sessionKeyDataInAbi": [ // or use sessionKeyData to replace
                        ["address", "address", "address", "uint256"],
                        [
                            "0x1dacDa1087C4048774bEce7784EB8EC4CfBeDB2c",
                            "0x909E30bdBCb728131E3F8d17150eaE740C904649",
                            "0x11D266772b85C2C5D4f84A41ca3E08e9f04Fb5D3",
                            1
                        ]
                    ]
                }
            ],
            "targetSession": {
                "validUntil": 0,
                "validAfter": 0,
                "sessionValidationModule": "0x4b7f018Fa27a97b6a17b6d4d8Cb3c0e2D9340133",
                "sessionKeyDataInAbi": [ // or use sessionKeyData to replace
                    ["address", "address", "address", "uint256"],
                    [
                        "0x1dacDa1087C4048774bEce7784EB8EC4CfBeDB2c",
                        "0x909E30bdBCb728131E3F8d17150eaE740C904649",
                        "0x11D266772b85C2C5D4f84A41ca3E08e9f04Fb5D3",
                        1
                    ]
                ]
            }
        }
    ]
}
```


# Web (JavaScript/TypeScript) - AA
Source: https://developers.particle.network/aa/sdks/desktop/web

Leveraging Particle's AA SDK within web applications.

Particle’s **AA SDK** brings ERC-4337 to web apps: construct and send **UserOperations**, sponsor gas (gasless), pay in ERC-20 via token paymasters.

<Info>
  This guide assumes you already have an EIP-1193 provider (e.g., <code>window\.ethereum</code> from a wallet extension, WalletConnect, or a custom provider).

  Check the [Quickstart](/aa/quickstart/web-aa) page for a step-by-step guide to integrate the AA SDK with [Particle Authkit](/social-logins/auth/introduction).
</Info>

***

## General integration steps

The following steps outline the general process for integrating the **AA SDK** into your web application:

<Steps>
  <Step title="Acquire a provider">
    Connect to a user's existing wallet through `window.ethereum`, **WalletConnect**, or another compatible provider.
  </Step>

  <Step title="Create a Smart Account">
    Initialize a Smart Account and configure your desired contract options.
  </Step>

  <Step title="Configure gas payment options">
    Wrap your Smart Account with a provider adapter and choose how transaction gas will be paid - gasless (sponsored), user-paid with native tokens.
  </Step>

  <Step title="Use with your favorite web3 library">
    The wrapper automatically converts regular transactions into `UserOperations`, allowing you to use familiar libraries like **ethers.js** or **viem** with Account Abstraction.
  </Step>
</Steps>

<Note>
  The Particle AA SDK is open source, available at [Particle-Network/aa-sdk](https://github.com/Particle-Network/aa-sdk).
</Note>

## Prerequisites

To integrate the Particle AA SDK into your web application, you'll need to:

1. **Install the SDK packages** in your project
2. **Configure your project credentials** from the Particle Dashboard

### Installation

Install the SDK in your project:

<CodeGroup>
  ```shell yarn theme={null}
  yarn add @particle-network/aa
  ```

  ```shell npm theme={null}
  npm install @particle-network/aa
  ```
</CodeGroup>

### Project setup

The AA SDK requires Particle project credentials from the [Particle Dashboard](https://dashboard.particle.network/).

To retrieve those values for configuration within your application, follow these steps:

<AccordionGroup>
  <Accordion title="Access the Particle Dashboard">
    Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network/)

    <div>
      <img alt="Login into Particle." />

      <img alt="Login into Particle." />
    </div>
  </Accordion>

  <Accordion title="Create a new project or enter an existing project">
    <div>
      <img alt="Create Particle project." />

      <img alt="Create Particle project." />
    </div>
  </Accordion>

  <Accordion title="Create a new web application, or skip this step if you already have one">
    <div>
      <img alt="Create web app." />

      <img alt="Create web app." />
    </div>
  </Accordion>

  <Accordion title="Retrieve the project credentials (project ID, client key, app ID)">
    <div>
      <img alt="Find app's credentials." />

      <img alt="Find app's credentials." />
    </div>
  </Accordion>
</AccordionGroup>

## Particle Paymaster

Particle Network includes a **Verifying Omnichain Paymaster** to sponsor gas fees:

* **Testnet use**: gasless transactions are automatically sponsored (no setup, no deposits).
* **Mainnet use**: deposit **USDT** on Ethereum or BNB in the [dashboard](/social-logins/dashboard#paymaster). The deposit is auto-converted into the native token of whichever chain your users transact on.

<Tip>
  If you prefer to use **Biconomy’s Verifying Paymaster** instead, create one on the [Biconomy dashboard](https://dashboard.biconomy.io) and set its `paymasterApiKeys` in your `aaOptions`.
</Tip>

* For **ERC-20 gas payments** (Token Paymaster), you can rely on Biconomy’s Token Paymaster. Simply pass the `feeQuote` you receive from `getFeeQuotes`, and the SDK will handle the ERC-20 settlement.

***

## Initialization

The first step is to initialize the Smart Account instance.

You can do this by creating a new instance of the `SmartAccount` class and passing in the provider and configuration options.

```ts theme={null}
import { SmartAccount } from "@particle-network/aa";

// Any EIP-1193 provider: injected wallet, WalletConnect, etc.
const provider = window.ethereum;

const smartAccount = new SmartAccount(provider, {
  projectId: "YOUR_PROJECT_ID",
  clientKey: "YOUR_CLIENT_KEY",
  appId: "YOUR_APP_ID",
  aaOptions: {
    accountContracts: {
      // Choose one or more implementations and list all chains you'll transact on
      SIMPLE: [{ version: "2.0.0", chainIds: [1, 8453, 11155111] }], // example: Ethereum, Base, Sepolia
      // Other options if needed: BICONOMY, CYBERCONNECT, LIGHT, COINBASE
    },
    // Optional: Biconomy Verifying Paymaster keys per chain
    // paymasterApiKeys: [{ chainId: 1, apiKey: "..." }]
  },
});

// Switch implementation at runtime if needed
// smartAccount.setSmartAccountContract({ name: "BICONOMY", version: "2.0.0" });
```

Find an updated list of smart account available and their chain compatibility in [Network Coverage](/social-logins/network-coverage#smart-accounts).

***

## Using an EIP-1193 provider

You can easily use any EIP-1193 provider with the smart account by wrapping it with `AAWrapProvider` and choosing how gas is paid.

Gas modes

* `SendTransactionMode.Gasless`: sponsored when eligible
* `SendTransactionMode.UserPaidNative`: user pays native gas

### ethers.js example

The following example shows how to use the smart account with `ethers.js`.

```ts ethers.js theme={null}
import { AAWrapProvider, SendTransactionMode } from "@particle-network/aa";
import { ethers, type Eip1193Provider } from "ethers";

const ethersProvider = new ethers.BrowserProvider(
  new AAWrapProvider(smartAccount, SendTransactionMode.Gasless) as Eip1193Provider,
  "any"
);

// Send transactions using the normal ethers API. 
// Any transaction will be automatically wrapped into a UserOperation and sent using the gasless provider.
const signer = await ethersProvider.getSigner();
const txResp = await signer.sendTransaction({ to: "0x...", value: ethers.parseEther("0.01") });
const txReceipt = await txResp.wait();
```

You can find a more complete example in this [demo repository](https://github.com/Particle-Network/connectkit-aa-usage/blob/da9dc9eb0401560c697778eb4ae8ae14a6bf2fbf/app/page.tsx#L169).

***

## Direct AA usage (no wrapper)

If you want to manage `UserOps` yourself, you have various options using the smart account instance directly.

### Smart account info

Fetch the smart account address, owner, and account info.

```ts theme={null}
const address = await smartAccount.getAddress();
const owner = await smartAccount.getOwner();
const info = await smartAccount.getAccount();
```

### Quote fees (single tx or batch)

Fetch the fee quotes for a single transaction or batch of transactions.

```ts ts theme={null}
const tx = { to: "0x...", value: "0x..." };
const feeQuotes = await smartAccount.getFeeQuotes(tx);

// Use one of the fee quotes to build a UserOperation depending on your use case
const gaslessUserOp = feeQuotes.verifyingPaymasterGasless?.userOp;
const nativeUserOp = feeQuotes.verifyingPaymasterNative?.userOp;
const tokenPaymasterAddress = feeQuotes.tokenPaymaster.tokenPaymasterAddress;
const tokenFeeQuotes = feeQuotes.tokenPaymaster.feeQuotes;
```

### Build & send UserOperation

Build and send a `UserOperation` for a single transaction or batch of transactions.

Here's a complete example of sending a gasless transfer transaction using the SDK to build a `userOp`:

```ts SDK example [expandable] theme={null}
async function sendGaslessTransaction(recipientAddress) {

    // Prepare transaction parameters
    const tx = {
      to: recipientAddress,
      value: ethers.parseEther("0.01").toString(),
      data: "0x",
    };

    // Get fee quotes for gasless transaction
    const feeQuotesResult = await smartAccount.getFeeQuotes(tx);
    const gaslessQuote = feeQuotesResult?.verifyingPaymasterGasless;
    
    if (!gaslessQuote) {
      throw new Error("Failed to get gasless fee quote");
    }

    // Send the user operation
    const hash = await smartAccount.sendUserOperation({
      userOp: gaslessQuote.userOp,
      userOpHash: gaslessQuote.userOpHash,
    });

}
```

You can find a more complete example in this [demo repository](https://github.com/Particle-Network/connectkit-aa-usage/blob/da9dc9eb0401560c697778eb4ae8ae14a6bf2fbf/app/page.tsx#L132).

### Deployment control

Check if the smart account is deployed and deploy it if not.

```ts theme={null}
if (!(await smartAccount.isDeployed())) {
  const txHash = await smartAccount.deployWalletContract();
}
```

***

## Use the AA SDK in a backend environment (server-owned EOA)

You can use the SDK in a backend environment to send transactions on behalf of the smart account.

The following example shows how to use the SDK with **viem** to create a wallet client from a private key, expose it as an EIP-1193 provider to the AA SDK, then route writes through the AA wrapper.

<Note>
  When using the SDK in a node environment, you need to import the package as follows:

  ```ts Node Imports theme={null}
  import { SmartAccount, AAWrapProvider, SendTransactionMode } from '@particle-network/aa/dist/esm/index.mjs';
  ```
</Note>

```ts Node Example [expandable] theme={null}
import { SmartAccount, AAWrapProvider, SendTransactionMode } from '@particle-network/aa/dist/esm/index.mjs';
import { createPublicClient, createWalletClient, custom, http, type Address } from "viem";
import { privateKeyToAccount } from "viem/accounts";
import { baseSepolia } from "viem/chains";

// 0) Load secrets safely (env, KMS/HSM). Never hard-code.
const RPC_URL = process.env.RPC_URL!;
const PROJECT_ID = process.env.PARTICLE_PROJECT_ID!;
const CLIENT_KEY = process.env.PARTICLE_CLIENT_KEY!;
const APP_ID = process.env.PARTICLE_APP_ID!;
const OWNER_PK = process.env.EOA_PRIVATE_KEY!; // hex string, "0x..."

const chain = baseSepolia;

// 1) Public client for reads
const publicClient = createPublicClient({ chain, transport: http(RPC_URL) });

// 2) Wallet client from private key (this is the Smart Account owner)
const ownerAccount = privateKeyToAccount(OWNER_PK);
const ownerWalletClient = createWalletClient({
  account: ownerAccount,
  chain,
  transport: http(RPC_URL),
});

// 3) Expose the owner wallet as a minimal EIP-1193 provider for the AA SDK
const ownerEip1193 = {
  request: (args: any) => ownerWalletClient.request(args),
} as any;

// 4) Create the Smart Account (list all chains you’ll use)
const smartAccount = new SmartAccount(ownerEip1193, {
  projectId: PROJECT_ID,
  clientKey: CLIENT_KEY,
  appId: APP_ID,
  aaOptions: {
    accountContracts: {
      SIMPLE: [{ version: "2.0.0", chainIds: [chain.id] }],
      // You can add BICONOMY / CYBERCONNECT / LIGHT / COINBASE here if needed
    },
    // Optional: Verifying/Token Paymaster keys per chain
    // paymasterApiKeys: [{ chainId: chain.id, apiKey: "..." }],
  },
});

// 5) Wrap writes through AA; choose gas mode
const aaProvider = new AAWrapProvider(smartAccount, SendTransactionMode.Gasless); // or UserPaidNative

// 6) A wallet client for writes that routes requests to the AA provider
const aaWalletClient = createWalletClient({
  chain,
  account: (await smartAccount.getAddress()) as Address, // the smart account address
  transport: custom({
    request: (args) => aaProvider.request(args as any),
  }),
});

// Reads use the public client
const saAddress = (await smartAccount.getAddress()) as Address;
const balance = await publicClient.getBalance({ address: saAddress });

// Writes are turned into UserOperations under the hood
const txHash = await aaWalletClient.sendTransaction({
  to: "0xRecipient...",
  value: 0n, // viem uses bigint
});
console.log("sent via AA:", txHash);
```

You can find a complete implementation in this [demo repository using the AA SDK to interacti with Circle Gateway](https://github.com/Particle-Network/circle-gateway-particle-aa-demo).

## Master reference

The following table is a **method-level reference** for the `SmartAccount` class. Use it when you need exact signatures or want to explore functionality beyond the common flows shown earlier (initialization, fee quotes, sending transactions).

Most methods follow the same input/output patterns as the examples above, so you can usually adapt them directly into your own code.

| Class        | Methods                 | Parameters (\* indicates optional)  |
| ------------ | ----------------------- | ----------------------------------- |
| SmartAccount | constructor             | provider, config                    |
| SmartAccount | setSmartAccountContract | contract                            |
| SmartAccount | getChainId              |                                     |
| SmartAccount | getAccountConfig        |                                     |
| SmartAccount | getPaymasterApiKey      |                                     |
| SmartAccount | getFeeQuotes            | tx                                  |
| SmartAccount | buildUserOperation      | tx, feeQuote, tokenPaymasterAddress |
| SmartAccount | signUserOperation       | userOpHash, userOp                  |
| SmartAccount | sendUserOperation       | userOpHash, userOp                  |
| SmartAccount | sendSignedUserOperation | userOp, sessionDataParams\*         |
| SmartAccount | sendTransaction         | tx, feeQuote, tokenPaymasterAddress |
| SmartAccount | getAccount              |                                     |
| SmartAccount | getAddress              |                                     |
| SmartAccount | getOwner                |                                     |
| SmartAccount | isDeployed              |                                     |
| SmartAccount | deployWalletContract    |                                     |
| SmartAccount | sendRpc                 | arg                                 |
| SmartAccount | createSessions          | options                             |
| SmartAccount | validateSession         | targetSession, sessions             |


# Android (Kotlin) - AA
Source: https://developers.particle.network/aa/sdks/mobile/android

Leveraging Particle's AA SDK within Android applications.

## Account Abstraction on Android

Particle Network's AA SDK facilitates the comprehensive use of ERC-4337 account abstraction. Particle's AA SDK handles every step in leveraging account abstraction: smart account deployment, user operation construction and sending, fee quote generation, etc., and is fully compatible with Android applications.

***

## Getting Started

Installing, initializing, and ultimately using the Particle Network AA SDK for Android only takes a few steps.

### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version: **8.5.1** or higher.
* Gradle Version: **8.9** or higher.

The first is including the `network.particle:aa-service` dependency within your `build.gradle` file, filling in `latest_version` with the most recent release on [Maven](https://central.sonatype.com/artifact/network.particle/aa-service/overview).

This should be defined in a way similar to the example below:

```groovy build.gradle theme={null}
dependencies {
    implementation("network.particle:aa-service:${latest_version}")

    // https://search.maven.org/search?q=g:network.particle
    // ...
}
```

<Note>
  <p>📘 Important details before initialization</p>

  <p />

  <p>
    Before initializing the SDK, there are a few key points to keep in mind,
    specifically regarding the utilization of Paymasters (to sponsor gas fees,
    pay for gas in ERC-20 tokens, etc.)
  </p>

  <p />

  <p>
    * All Testnets automatically have the Verifying Particle Network Omnichain
      Verifying Paymaster enabled. Transactions that request it will automatically
      be sponsored and thus gasless.
  </p>

  <p>
    * On the occasion that you'd like to use the Particle Network Omnichain
      Verifying Paymaster for Mainnets, you'll need to deposit USDT on either
      Ethereum or BNB Chain within the
      <a href="https://dashboard.particle.network">Particle dashboard</a>. This
      USDT will then automatically be converted as needed into the native token of
      the network on which you're requesting (and qualifying for) sponsorship.
  </p>

  <p>
    * The Particle Network AA SDK automatically uses Biconomy's Token Paymaster;
      transactions that request it will be able to leverage it without additional
      configuration.
  </p>
</Note>

***

## Initialization

With your project configured, you can move onto initializing the AA SDK. This is required before other SDK functions will work and allow you to select which smart account implementation you use. You can kickstart initialization through `ParticleNetwork.initAAMode`, which takes the following parameters:

* Optionally, `apiKey`, a singular or array of specific chains mapped to a given Biconomy API key, allowing for the usage of Biconomy's Paymaster (if applicable).
* `aaService`, dictating the smart account implementation to be used, this can be:
  * `BiconomyV1AAService`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts)
  * `BiconomyV2AAService`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts)
  * `CyberConnectAAService`, a [CyberConnect smart account](https://wallet.cyber.co/).
  * `SimpleV1AAService`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `SimpleV2AAService`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `LightAAService`, a [Light Account implementation](https://accountkit.alchemy.com/smart-contracts/light-account).

E.g.:

```kotlin Kotlin theme={null}
ParticleNetwork.initAAMode(aaService = BiconomyV2AAService)
```

## Enable AA Mode

Additionally, after initializing the SDK with `initAAMode`, you'll need to intentionally enable it (signaling an updated address on the wallet interface, among other things) by using `ParticleNetwork.getAAService().enableAAMode()`. Alternatively, if it's already enabled and you'd like to disable it, you can do so with `disableAAMode`.

If you're unsure whether or not AA mode is enabled or not, you can retrieve a Boolean representing this status with `isAAModeEnable`.

E.g.:

```kotlin Kotlin theme={null}
ParticleNetwork.getAAService().enableAAMode()

ParticleNetwork.getAAService().disableAAMode()

val isEnable = ParticleNetwork.getAAService().isAAModeEnable()
```

## Send Transaction

Sending a standard transaction (UserOperation after enabling AA mode), requesting a signature, and then automatically pushing it to the network with `ParticleNetwork` can be done through `ParticleNetwork.signAndSendTransaction`, which takes the following parameters:

* `transaction`, a stringified standard transaction object.
* `callback`, return handling.
* `feeMode`, the mechanism to be used for paying gas fees, can be:
  * `FeeModeGasless`, for sponsored transactions. This will happen automatically for Testnets, pulling from your previously defined (or configured) Paymaster for Mainnets.
  * `FeeModeNative`,  native payments.
  * `FeeModeToken`, enables the selection of a specific mechanism, takes one parameter:
    * `feeQuote`, to be used when leveraging a Token Paymaster, can be retrieved through `ParticleNetwork.getAAService().rpcGetFeeQuotes()`.

Additionally, if you're using Particle Connect, you can send the same type of transaction by calling the `signAndSendTransaction` method on a relevant adapter. This takes the same parameters, although it requires passing the `publicAddress` of the targeted user for the transaction.

```kotlin Kotlin theme={null}
val feeModeGasLess: FeeMode = FeeModeGasless()
val transaction = "your transaction"
val feeQuote = ParticleNetwork.getAAService().rpcGetFeeQuotes("eoa address", listOf(transaction)).result
val feeModeNative: FeeMode = FeeModeNative(verifyingPaymasterNative =feeQuote.verifyingPaymasterNative )
val feeModeToken: FeeMode = FeeModeToken(feeQuote.tokenPaymaster.feeQuotes[0], feeQuote.tokenPaymaster.tokenPaymasterAddress)
AuthCore.evm.sendTransaction(transaction, object : AuthCoreSignCallback<SignOutput> {
    override fun success(output: SignOutput) {
        // success output.signature
    }

    override fun failure(errMsg: ErrorInfo) {
        // Handle error
    }
}, feeModeGasLess) //feeModeNative or feeModeToken

// Alternatively, if using Particle Connect
connectAdapter.signAndSendTransaction(publicAddress, transaction, feeModeGasLess, callback)

connectAdapter.signAndSendTransaction(publicAddress, transaction, feeModeToken, callback)

connectAdapter.signAndSendTransaction(publicAddress, transaction, feeModeToken, callback)
```

## Send Batch Transactions

As an alternative to `signAndSendTransaction`, you can use `quickSendTransaction` to batch multiple transactions together within a single UserOperation. `quickSendTransaction` requires the following parameters:

* `transactions`, an array of stringified transaction objects.
* `feeMode`, the mechanism for paying gas fees.
* `messageSigner`, the owner/Signer address that'll be signing the UserOperation.
* `callback`, return handling.

E.g.:

```kotlin Kotlin theme={null}
ParticleNetwork.getAAService().quickSendTransaction(transactions, feeMode, messageSigner, callback)
```

***

## Master reference

For a direct, raw view into every method provided, below is a table containing every relevant one, alongside specific parameters and a short description. For methods listed that weren't covered in the above examples, live implementation often mimics the previously covered common structure throughout the SDK.

| Methods                      | Parameters                                                                                                                       |
| :--------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
| rpcGetSmartAccount           | addresses: List`<String>`                                                                                                        |
| rpcGetFeeQuotes              | eoaAddress: String, transactions: List`<PrefixedHexString>`                                                                      |
| rpcCreateUserPaidTransaction | eoaAddress: String, transactions: List`<PrefixedHexString>`, erc4337FeeQuote: Erc4337FeeQuote                                    |
| rpcSendUserPaidTransaction   | eoaAddress: String, walletTransaction: WalletTransaction, signature: String                                                      |
| rpcSendGaslessTransaction    | eoaAddress: String, userOp: WalletUserOp, signature: String                                                                      |
| rpcCreateGaslessTransaction  | eoaAddress: String, transactions: List`<PrefixedHexString>`                                                                      |
| isDeploy                     | eoaAddress: String                                                                                                               |
| deployWalletContract         | messageSigner: MessageSigner, feeMode: FeeMode\*                                                                                 |
| isAAModeEnable               |                                                                                                                                  |
| enableAAMode                 |                                                                                                                                  |
| disableAAMode                |                                                                                                                                  |
| getSmartAccount              | eosAddress: String                                                                                                               |
| getSmartAccountSync          | eosAddress: String                                                                                                               |
| getSmartAddress              | eosAddress: String                                                                                                               |
| getSmartAccounts             | eosAddresses: List`<String> `                                                                                                    |
| isSupportChainInfo           | chainInfo: ChainInfo                                                                                                             |
| getSupportChainInfos         |                                                                                                                                  |
| quickSendTransaction         | transactions: `String, feeMode: FeeMode\*, messageSigner: MessageSigner, sendCallback: WebServiceCallback<SignOutput>`\*         |
| quickSendTransaction         | transactions: List`<String>`, feeMode: FeeMode\*, messageSigner: MessageSigner, sendCallback: WebServiceCallback`<SignOutput>`\* |


# Flutter (Dart) - AA
Source: https://developers.particle.network/aa/sdks/mobile/flutter

Leveraging Particle's AA SDK within applications built using Flutter.

## Account Abstraction for Flutter

Particle Network's AA SDK offers a mechanism for facilitating full-stack ERC-4337 account abstraction, leveraging built-in infrastructure modularity without compromising simplicity. Paired with Particle Auth or Particle Connect for seamless onboarding, the Particle Network AA SDK presents itself as a key method for building high-quality UX within applications built using Flutter.

## Repository

All Particle Network Flutter SDKs, including the AA SDK for Flutter, are open-source in the [`particle-flutter` repository on GitHub](https://github.com/Particle-Network/particle-flutter), with each including demos/examples. It may be worthwhile taking a look at the [AA Flutter SDK](https://github.com/Particle-Network/particle-flutter/tree/master/particle-aa)'s architecture and implementation flow before continuing to build some context.

***

## Getting Started

Before jumping in, you'll need to already have setup either [Particle Auth](/social-logins/auth/mobile-sdks/flutter) or [Particle Connect](/social-logins/connect/mobile/flutter) within your Flutter project (the AA SDK doesn't work on its own, requiring one of the two to function). If you don't have either of these already implemented, read through those pages and follow the outlined steps, then return to continue.

With either of these SDKs set up, you can move on to adding `particle_aa` to your Flutter project through the following command:

```
flutter pub add particle_aa
```

<Note>
  Important details before initialization

  <p />

  <p>Before initializing the SDK, there are a few points to keep in mind, specifically regarding the utilization of Paymasters (to sponsor gas fees, pay for gas in ERC-20 tokens, etc.)</p>

  <p />

  <p>- All Testnets automatically have the Verifying Particle Network Omnichain Verifying Paymaster enabled. Transactions requesting it will automatically be sponsored and thus gasless.</p>
  <p>- On the occasion that you'd like to use the Particle Network Omnichain Verifying Paymaster for Mainnets, you'll need to deposit USDT on either Ethereum or BNB Chain within the <a href="https://dashboard.particle.network">Particle dashboard</a>. This USDT will then automatically be converted as needed into the native token of the network you're requesting (and qualifying for) sponsorship on.</p>
  <p>- The Particle Network AA SDK automatically uses Biconomy's Token Paymaster; transactions that request it will be able to leverage it without additional configuration.</p>
</Note>

## Initialization

The Particle Network AA SDK will fail to function correctly until it has been initialized. Initialization allows you to specify a smart account implementation and version, alongside the Paymaster you'd like to use. This can be initiated through `ParticleAA.init`, which takes the following parameters:

* `name`, the smart account implementation to be used (any of these choices):
  * `AccountName.BICONOMY_V1`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts).
  * `AccountName.BICONOMY_V2`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts).
  * `AccountName.CYBERCONNECT`, a [CyberConnect smart account](https://wallet.cyber.co/).
  * `AccountName.SIMPLE_V1`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `AccountName.SIMPLE_V2`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `AccountName.LIGHT`, a [Light Account implementation](https://accountkit.alchemy.com/smart-contracts/light-account).

Once `init` has been called, you can close off initialization by enabling AA mode with `ParticleAA.enableAAMode`.

```dart theme={null}

// Support BICONOMY_V1 | BICONOMY_V2 | CYBERCONNECT | SIMPLE_V1 | SIMPLE_V2 | LIGHT
ParticleAA.init(AccountName.BICONOMY_V2());

ParticleAA.enableAAMode();
```

***

## Examples of Utilization

### Is Deployed

Now that you've initialized the AA SDK, you can move onto several methods to utilize it. First, it's important to note that the smart account implementation you chose will be automatically deployed with the first transaction it initiates. The deployment transaction will be bundled (batched) in with the first transaction.

However, if you'd like to check the deployment status of a given smart account manually, you can first retrieve the host address with `Evm.getAddress`, then pass that into `ParticleAA.isDeploy`, which returns a Boolean indicating deployment status.

E.g.:

```dart theme={null}
final eoaAddress = await Evm.getAddress();

var isDeploy = await ParticleAA.isDeploy(eoaAddress);
```

***

### Disable AA Mode

If you'd like to exit AA mode and thus disable account abstraction functionality within your application, you'll need to call `ParticleAA.disableAAMode`. This will immediately render the usage of AA incompatible. Additionally, if you're unsure whether or not AA mode is enabled, you can call `ParticleAA.isAAModeEnable`, which will return a Boolean representing this status. E.g.:

```dart theme={null}
ParticleAA.disableAAMode();

var result = await ParticleAA.isAAModeEnable();  
```

***

### Send Transaction

Sending a transaction (UserOperation) is as simple as calling pre-existing methods within `ParticleConnect` or `Evm` in `particle_auth_core` and just passing in an additional parameter, `feeMode`. There are two ways to send transactions with the AA SDK: The first is with `signAndSendTransaction` of `sendTransaction` , which will send a singular transaction to the network. Alternatively, you can use `batchSendTransactions` to send batched transactions within a single UserOperation.

`ParticleConnect.signAndSendTransaction` or `Evm.sendTransaction` in `particle_auth_core` takes the following parameters:

* For Particle Connect, `walletType`, dictates the specific adapter being used/targeted.
* `account`, the public address of the smart account sending the transaction, which can be retrieved through `EvmService.getSmartAccount`.
* `transaction`, a stringified standard transaction object.
* `feeMode`, the mechanism to be used for paying gas fees, can be:
  * `AAFeeMode.gasless`, for sponsored transactions. This will happen automatically for Testnets and will pull from your previously defined (or configured) Paymaster for Mainnets. Takes one parameter:
    * `wholeFeeQuote`, which can be retrieved through `ParticleAA.rpcGetFeeQuotes`.
  * `AAFeeMode.native`, paying for gas fees in a native token (such as ETH). Takes one parameter:
    * `wholeFeeQuote`, which can be retrieved through `ParticleAA.rpcGetFeeQuotes`.
  * `AAFeeMode.token`, paying for gas fees in an ERC-20 token (such as USDC). Takes one parameter:
    * `feeQuote`, to be used when leveraging a Token Paymaster. It can be retrieved through `ParticleAA.rpcGetFeeQuotes`.
    * `tokenPaymasterAddress`, which can be retrieved through `ParticleAA.rpcGetFeeQuotes`.

Alternatively, for `ParticleConnect.batchSendTransactions` or ParticleAuthCore `Evm.batchSendTransactions`, the parameters will be the same, with the exception of `transaction` being an array of transactions.

```dart theme={null}
// with particle_auth_core
await Evm.sendTransaction(transaction,
        feeMode: AAFeeMode.gasless(result));

await Evm.sendTransaction(transaction,
        feeMode: AAFeeMode.native(result));

await Evm.sendTransaction(transaction,
        feeMode: AAFeeMode.token(feeQuote, tokenPaymasterAddress));

await Evm.batchSendTransactions(transactions,
        feeMode: AAFeeMode.native(result));

// with particle_connect
await ParticleConnect.signAndSendTransaction(
        WalletType.authCore, eoaPublicAddress, transaction,
        feeMode: AAFeeMode.gasless(result));

await ParticleConnect.signAndSendTransaction(
        WalletType.authCore, eoaPublicAddress, transaction,
        feeMode: AAFeeMode.native(result));

await ParticleConnect.signAndSendTransaction(
        WalletType.authCore, eoaPublicAddress, transaction,
        feeMode: AAFeeMode.token(feeQuote, tokenPaymasterAddress));

await ParticleConnect.batchSendTransactions(
        WalletType.authCore, eoaPublicAddress, transactions,
        feeMode: AAFeeMode.native(result));
```

Check if you can send with AAFeeMode.gasless/native/token.

```dart theme={null}
var result = await ParticleAA.rpcGetFeeQuotes(EoaPublicAddress, [transaction]);
var verifyingPaymasterNative = result["verifyingPaymasterNative"];
var feeQuote = verifyingPaymasterNative["feeQuote"];
var fee = BigInt.parse(feeQuote["fee"], radix: 10);
var balance = BigInt.parse(feeQuote["balance"], radix: 10);

// Check if the account can afford gas
if (balance < fee) {
  print("Native balance is not enough for gas fee");
  return;
}

// Check if a gasless (sponsored) transaction is available
var verifyingPaymasterGasless = result["verifyingPaymasterGasless"];
if (verifyingPaymasterGasless == null) {
  print("Gasless is not available");
  return;
}

// Check if gas payment via ERC20 is available
List<dynamic> feeQuotes = result["tokenPaymaster"]["feeQuotes"];

var overFeeQuotes = feeQuotes.where((element) {
	var fee = BigInt.parse(element["fee"], radix: 10);
	var balance = BigInt.parse(element["balance"], radix: 10);
return balance >= fee;
}).toList();

if (overFeeQuotes.isEmpty) {
  print("Can't pay in tokens, no valid token for gas fee");
  return;
}

// Select a fee quote (native, gasless, token), for example the first.
var feeQuote = overFeeQuotes[0];
String tokenPaymasterAddress = result["tokenPaymaster"]["tokenPaymasterAddress"];
```

***

See the [Particle Auth](/social-logins/auth/mobile-sdks/flutter) and [Particle Connect](/social-logins/connect/mobile/flutter) pages for insights into additional compatible methods (such as `signAndSendTransaction`), as shown here.


# iOS (Swift) - AA
Source: https://developers.particle.network/aa/sdks/mobile/ios

Leveraging Particle's AA SDK within iOS applications.

## Account Abstraction for iOS

Particle Network's AA SDK, existing at the center of its Smart Wallet-as-a-Service, facilitates flexible end-to-end utilization of ERC-4337 account abstraction, natively supporting modular smart account implementations, Paymasters, and natural Bundler usage. Within iOS applications, the Particle Network AA SDK can be used (in tandem with Particle Auth or Particle Connect) to refine user experience through account abstraction.

Details on configuration, initialization, and utilization **are listed below**.

***

## Getting Started

To get started, you'll need to have already integrated either [Particle Connect](/social-logins/auth/mobile-sdks/ios) or [Particle Auth](/social-logins/connect/mobile/ios) within your iOS application. If you haven't, head over to those pages, follow the configuration process, and return here. Otherwise, you can begin by including `ParticleAA` within your Podfile, as shown below:

```ruby Podfile theme={null}
pod 'ParticleAA'
```

This new addition to your Podfile can then be settled and installed by running the command below:

```shell Terminal theme={null}
pod install --repo-update
```

<Note>
  Important details before initialization

  <p />

  <p>Before initializing the SDK, there are a few points to keep in mind, specifically regarding the utilization of Paymasters (to sponsor gas fees, pay for gas in ERC-20 tokens, etc.)</p>

  <p />

  <p>- All Testnets automatically have the Verifying Particle Network Omnichain Verifying Paymaster enabled. Transactions requesting it will automatically be sponsored and thus gasless.</p>
  <p>- On the occasion that you'd like to use the Particle Network Omnichain Verifying Paymaster for Mainnets, you'll need to deposit USDT on either Ethereum or BNB Chain within the <a href="https://dashboard.particle.network">Particle dashboard</a>. This USDT will then automatically be converted as needed into the native token of the network you're requesting (and qualifying for) sponsorship on.</p>
  <p>- The Particle Network AA SDK automatically uses Biconomy's Token Paymaster; transactions that request it will be able to leverage it without additional configuration.</p>
</Note>

***

## Initialization

To begin, before using the SDK, you'll need to initialize it; without this, the `setAAService` within `ParticleNetwork` will fail or raise issues down the line.

You can initialize the SDK through `AAService.initialize`, which requires the following parameters:

* `name`, the name of the smart account implementation to be used, the choices here are:
  * `.biconomyV1`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts).
  * `.biconomyV2`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts).
  * `.cyberConnect`, a [CyberConnect smart account](https://wallet.cyber.co/).
  * `.simpleV1`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `.simpleV2`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `.light`, a [Light Account](https://accountkit.alchemy.com/smart-contracts/light-account).

Once `AAService.initialize` has been called, you'll need to use `ParticleNetwork.setAAService`, passing in an instance of `AAService`. This will tell Particle Auth to use your smart account rather than your EOA. Either before or after doing this, you'll also need to call `aaService.enableAAMode`.

```swift theme={null}
AAService.initialize(name: .biconomyV1)

let aaService = AAService()
aaService.enableAAMode()

ParticleNetwork.setAAService(aaService)
```

## Examples of Utilization

### Disable AA Mode

If you'd like to disable AA mode (stop using account abstraction) after enabling it during the initialization process (through `enableAAMode`), then you'll need to call `aaService.disableAAMode`, with `aaService` being an instance of `AAService`.

However, if you aren't sure whether AA mode is enabled or not, you can call `aaService.isAAModeEnable`, which returns a Boolean representing this status.

E.g.:

```swift theme={null}
aaService.disableAAMode() 

let isEnable = aayService.isAAModeEnable()
```

### Get Smart Account

You can also retrieve the address of the smart account, among other details, by calling the `getSmartAccount` method on `aaService` (which can be defined by `ParticleNetwork.getAAService` if needed), in which you can pass `by` (your Signer/owner address, which should be an EOA), and `chainInfo`, which should be a `ChainInfo` object representing the chain on which you're querying account information. E.g.:

| Field           | Type         | Description                              |
| --------------- | ------------ | ---------------------------------------- |
| `publicAddress` | `String`     | EOA address.                             |
| `chainInfo`     | `ChainInfo?` | (Optional) default is current chainInfo. |

```swift theme={null}
let smartAccount = try await aaService.getSmartAccount(by: eoaAddress, chainInfo: chainInfo).value
```

### Send Transaction

Sending a transaction (UserOperation) is also quite simple, primarily just deviating in the fee mechanism being used for it. There are three ways to send transactions with the AA SDK:

The `auth.evm.sendTransaction` method, defined in `ParticleAuthCore`, is used to send a single transaction to the network.

The `adapter.signAndSendTransaction` method, defined in `ConnectAdapter`, is used to send a single transaction to the network.

The `aaService.quickSendTransactions` method, defined in `ParticleAA`, is used to send batched transactions within a single UserOperation.

`auth.evm.sendTransaction` takes the following parameters:

* `transaction`, a stringified standard transaction object.
* `feeMode`, the mechanism to be used for paying gas fees, can be:
  * `.gasless`, for sponsored transactions; this will happen automatically for Testnets, and will pull from your previously defined (or configured) Paymaster for Mainnets.
  * `.native`, paying for gas fees in a native token (such as ETH).
  * `.token`, paying for gas fees in an ERC-20 token (such as USDC), and thus takes one parameter:
    * `feeQuote`, to be used when leveraging a Token Paymaster.
* Optionally, `chainInfo`: a `ChainInfo` object representing the chain on which this transaction will be executed.

`adapter.signAndSendTransaction` takes the following parameters:

* `publicAddress`, the connected public address, if `adapter.WalletType` is `.authCore`, you can pass an empty string, for other walletTypes, you need pass a connected public address.
* `transaction`, a stringified standard transaction object.
* `feeMode`, the mechanism to be used for paying gas fees, can be:
  * `.gasless`, for sponsored transactions; this will happen automatically for Testnets, and will pull from your previously defined (or configured) Paymaster for Mainnets.
  * `.native`, paying for gas fees in a native token (such as ETH).
  * `.token`, paying for gas fees in an ERC-20 token (such as USDC), and thus takes one parameter:
    * `feeQuote`, to be used when leveraging a Token Paymaster.
* Optionally, `chainInfo`: a `ChainInfo` object representing the chain on which this transaction will be executed.

Alternatively, for `aaService.quickSendTransactions`, the parameters will be the same with the following exceptions:

* `transactions` being an array of transactions.
* `feeMode` is same with upon.
* `messageSigner`, which is the Signer/owner authenticating the transaction.
* `wholeFeeQuote`, which for each `feeMode` should be passed with a complete fee quote object.
* Optionally, `chainInfo` is same with upon.

E.g.:

```swift theme={null}
// Gasless
let txHash = try await auth.evm.sendTransaction(transaction, feeMode: .gasless, chainInfo: chainInfo)

let txHash =  try await aaService.quickSendTransactions([transaction], feeMode: .gasless, messageSigner: self, wholeFeeQuote: wholeFeeQuote, chainInfo: chainInfo).value

// Native
let txHash = try await auth.evm.sendTransaction(transaction, feeMode: .native, chainInfo: chainInfo) 

let txHash = try await aaService.quickSendTransactions([transaction], feeMode: .native, messageSigner: self, wholeFeeQuote: wholeFeeQuote, chainInfo: chainInfo).value

// ERC-20 Token
let txHash = try await auth.evm.sendTransaction(transaction, feeMode: .token(feeQuote), chainInfo: chainInfo)

let txHash = try await aaService.quickSendTransactions([transaction], feeMode: .token(feeQuote), messageSigner: self, wholeFeeQuote: wholeFeeQuote, chainInfo: chainInfo).value
```

Implement MessageSigner protocol

```swift theme={null}
class YourViewController {
  var publicAddress: String = ""
}

extension YourViewController: MessageSigner {
    func signMessage(_ message: String, chainInfo: ParticleNetworkBase.ParticleNetwork.ChainInfo?) -> RxSwift.Single<String> {
        // If you are using ParticleAuthService
        return Single<String>.fromAsync { [weak self] in
            guard let self = self else { throw ParticleNetwork.ResponseError(code: nil, message: "self is nil") }
            return try await self.evm.personalSign(message, chainInfo: chainInfo)
        }
        
        // If you are using ParticleConnectService
        // Get current adapter by walletType and publicAddress
        // Here we assume currentWalletType is Metamask
        
        let currentWalletType = WalletType.metaMask
        let adapters = ParticleConnect.getAllAdapters().filter {
            $0.walletType == currentWalletType
        }
        if let adapter = adapters.first {
            return adapter.signMessage(publicAddress: self.publicAddress, message: message)
        } else {
            return .error(NSError(domain: "", code: 0))
        }
    }
    
    func getEoaAddress() -> String {
        // If you are using ParticleAuthCore
        return auth.evm.getAddress() ?? ""
        
        // If you are using ParticleConnectService
        return self.publicAddress
    }
}
// Add this single extension to support converting rxswift function to combine function
extension Single {
    static func fromAsync<T>(_ fn: @escaping () async throws -> T) -> Single<T> {
        .create { observer in
            let task = Task {
                do { try await observer(.success(fn())) }
                catch { observer(.failure(error)) }
            }
            return Disposables.create { task.cancel() }
        }.observe(on: MainScheduler.instance)
    }
}
```

Check if you can send gasless/native/token.

```swift theme={null}
extension YourViewController {
    func sendTransactionInAA() async throws {
        let aa = ParticleNetwork.getAAService()!
                
        let chainInfo = ParticleNetwork.getChainInfo()
        let eoaAddress = ""
        let transaction = ""
        let wholeFeeQuote = try await aa.rpcGetFeeQuotes(eoaAddress: eoaAddress, transactions: [transaction], chainInfo: chainInfo).value
            
        if wholeFeeQuote.gasless != nil {
            // There are two ways to sponsor transactions
            // 1, call adapter or ParticleAuthService, requires one transaction
            let txHash1 = try await auth.evm.sendTransaction(transaction, feeMode: .gasless, chainInfo: chainInfo)
            // 2, call AA, supports batched transactions, requires implementation of MessageSigner delegate.
            let txHash2 = try await aa.quickSendTransactions([transaction], feeMode: .gasless, messageSigner: self, wholeFeeQuote: wholeFeeQuote, chainInfo: chainInfo).value
        } else {
            // Gasless wouldn't be possible in this condition.
        }
            
        let nativeFeeQuote = AA.FeeQuote(json: wholeFeeQuote.native.feeQuote, tokenPaymasterAddress: nil)
        if nativeFeeQuote.isEnoughForPay {
            // There are two ways to send, pay token
            // 1, call adapter or ParticleAuthService, requires one transaction
            let txHash1 = try await auth.evm.signAndSendTransaction(transaction, feeMode: .native, chainInfo: chainInfo)
            // 2, call AA, supports batched transactions, requires implementation of MessageSigner delegate.
            let txHash2 = try await aa.quickSendTransactions([transaction], feeMode: .native, messageSigner: self, wholeFeeQuote: wholeFeeQuote, chainInfo: chainInfo).value
        } else {
            // User can't afford transaction
        }

        if let token = wholeFeeQuote.token {
            let tokenPaymasterAddress = token.tokenPaymasterAddress
            let tokenFeeQuotes = token.feeQuotes.map {
                AA.FeeQuote(json: $0, tokenPaymasterAddress: tokenPaymasterAddress)
            }.filter {
                // Filter out balance >= fee
                $0.isEnoughForPay
            }
            if tokenFeeQuotes.count > 0 {
                // Select a feeQuote, here we select the first one.
                let feeQuote = tokenFeeQuotes[0]
                // There are two ways to send, pay token
                // 1, call adapter or ParticleAuthService, requires one transaction
                let txHash1 = try await auth.evm.signAndSendTransaction(transaction, feeMode: .token(feeQuote), chainInfo: chainInfo)
                // 2, call AA, supports batched transactions, requires implementation of MessageSigner delegate.
                let txHash2 = try await aa.quickSendTransactions([transaction], feeMode: .token(feeQuote), messageSigner: self, wholeFeeQuote: wholeFeeQuote, chainInfo: chainInfo).value
            } else {
                // You can't select a token to pay
            }
        }
    }
}
```

### Manually Deploy Smart Account

An undeployed smart account will automatically be deployed upon the ***first transaction*** (UserOperation) it sends through the SDK (the deployment transaction is bundled/batched with the other). If you'd like to initiate deployment manually, bypassing automatic deployment, then you can use `aaService.deployWalletContract`, which will create, request signature for, and send a deployment transaction. This method requires `messageSigner` (the Signer of the transaction), and the `feeMode` of the deployment transaction.

The status of deployment can be retrieved with `smartAccount.isDeploy`, which takes an owner/Signer `eoaAddress`.

E.g.:

```swift theme={null}
let isDeploy = try await aaService.isDeploy(eoaAddress: eoaAddress).value

aaService.deployWalletContract(messageSigner: signer, feeMode: .gasless)
```


# React Native (JavaScript) - AA
Source: https://developers.particle.network/aa/sdks/mobile/react

Leveraging Particle's AA SDK within React Native applications.

## React Native

### 1. Add the Account Abstraction Service SDK to Your React Native App

Run this command:

```shell Terminal theme={null}
npm install @particle-network/rn-aa

// Or

yarn add @particle-network/rn-aa
```

Click [here](https://github.com/Particle-Network/particle-react-native/tree/master/particle-aa) to get the demo source code

### 2. Add Particle Auth or Particle Connect to your project

Account Abstraction service can't be used individually.

<Note>
  Important details before initialization.

  <p />

  <p>Before initializing the SDK, there are a few key points to keep in mind, specifically regarding the utilization of Paymasters (to sponsor gas fees, pay for gas in ERC-20 tokens, etc.)</p>

  <p />

  <p>- All Testnets automatically have the Verifying Particle Network Omnichain Paymaster enabled. Transactions that request it will automatically be sponsored and thus gasless.</p>
  <p>- On the occasion that you'd like to use the Particle Network Omnichain Paymaster for Mainnets, you'll need to deposit USDT on either Ethereum or BNB Chain within the <a href="https://dashboard.particle.network">Particle dashboard</a>. This USDT will then automatically be converted as needed into the native token of the network you're requesting (and qualifying for) sponsorship on.</p>
</Note>

## Initialize the SDK

The Particle Network AA SDK will fail to function correctly until it has been initialized. Initialization allows you to specify a smart account implementation and version, alongside the Paymaster you'd like to use. This can be initiated through `particleAA.init`, which takes the following parameters:

* `accountName`, the smart account implementation to be used (any of these choices):
  * `AccountName.BICONOMY_V1`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts).
  * `AccountName.BICONOMY_V2`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts).
  * `AccountName.CYBERCONNECT`, a [CyberConnect smart account](https://wallet.cyber.co/).
  * `AccountName.SIMPLE_V1`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `AccountName.SIMPLE_V2`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `AccountName.LIGHT`, a [Light Account](https://accountkit.alchemy.com/smart-contracts/light-account).

Once `init` has been called, you can close off initialization by enabling AA mode with `ParticleAA.enableAAMode`.

```typeScript theme={null}
import * as particleAA from '@particle-network/rn-aa';
import { AAVersion } from '@particle-network/rn-base';

// Support BICONOMY_V1 | BICONOMY_V2 | CYBERCONNECT | SIMPLE_V1 | SIMPLE_V2 | LIGHT
particleAA.init(AccountName.BICONOMY_V2());
particleAA.enableAAMode();
```

***

### Is Deployed

Now that you've initialized the AA SDK, you can move onto several methods to utilize it. First, it's important to note that the smart account implementation you chose will be automatically deployed with the first transaction it initiates. The deployment transaction will be bundled (batched) in with the first transaction.

However, if you'd like to check the deployment status of a given smart account manually, you can first retrieve the host address with `evm.getAddress`, then pass that into `particleAA.isDeploy`, which returns a Boolean indicating deployment status.

E.g.:

```typeScript theme={null}
const eoaAddress = await evm.getAddress();
const isDeploy = await particleAA.isDeploy(eoaAddress);
```

***

### Disable AA Mode

If you'd like to exit AA mode and thus disable account abstraction functionality within your application, you'll need to call `ParticleAA.disableAAMode`. This will immediately render the usage of AA incompatible. Additionally, if you're unsure whether or not AA mode is enabled, you can call `ParticleAA.isAAModeEnable`, which will return a Boolean representing this status. E.g.:

```typeScript theme={null}
particleAA.disableAAMode();

const result = await particleAA.isAAModeEnable();
```

***

## RPC get fee quotes

This is always used with `sendTransaction`. Select a `feeQuote`, and then send the transaction using the chosen custom fee mode.

```typeScript theme={null}
const wholeFeeQuote = (await particleAA.rpcGetFeeQuotes(eoaAddress, [transaction])) as WholeFeeQuote;
```

### Send Transaction

Sending a transaction (UserOperation) is as simple as calling pre-existing methods within `ParticleConnect` or `Evm` in `@particle-network/rn-auth-core` and just passing in an additional parameter, `feeMode`.

There are two ways to send transactions with the AA SDK:

The first is with `signAndSendTransaction` of `sendTransaction` , which will send a singular transaction to the network. Alternatively, you can use `batchSendTransactions` to send batched transactions within a single UserOperation.

`particleConnect.signAndSendTransaction` or `Evm.sendTransaction` in `@particle-network/rn-auth-core` takes the following parameters:

* For Particle Connect, `walletType`, dictates the specific adapter being used/targeted.
* `account`, the public address of the smart account sending the transaction, which can be retrieved through `EvmService.getSmartAccount`.
* `transaction`, a stringified standard transaction object.
* `feeMode`, the mechanism to be used for paying gas fees, can be:
  * `AAFeeMode.gasless`, for sponsored transactions. This will happen automatically for Testnets and will pull from your previously defined (or configured) Paymaster for Mainnets. Takes one parameter:
    * `wholeFeeQuote`, which can be retrieved through `particleAA.rpcGetFeeQuotes`.
  * `AAFeeMode.native`, paying for gas fees in a native token (such as ETH). Takes one parameter:
    * `wholeFeeQuote`, which can be retrieved through `particleAA.rpcGetFeeQuotes`.
  * `AAFeeMode.token`, paying for gas fees in an ERC-20 token (such as USDC). Takes one parameter:
    * `feeQuote`, to be used when leveraging a Token Paymaster. It can be retrieved through `particleAA.rpcGetFeeQuotes`.
    * `tokenPaymasterAddress`, can be  retrieved through `particleAA.rpcGetFeeQuotes`.

Alternatively, for `particleConnect.batchSendTransactions` or ParticleAuthCore `Evm.batchSendTransactions`, the parameters will be the same, with the exception of `transaction` being an array of transactions.

```typeScript theme={null}
// with @particle-network/rn-auth-core
await evm.sendTransaction(transaction,
        feeMode: AAFeeMode.gasless(result));

await evm.sendTransaction(transactions,
        feeMode: AAFeeMode.native(result));

await evm.signAndSendTransaction(transaction,
        feeMode: AAFeeMode.token(feeQuote, tokenPaymasterAddress));

await evm.batchSendTransactions(transactions,
        feeMode: AAFeeMode.native(result));

// with @particle-network/rn-connect
await ParticleConnect.signAndSendTransaction(
        WalletType.AuthCore, eoaPublicAddress, transaction,
        feeMode: AAFeeMode.gasless(result));

await ParticleConnect.signAndSendTransaction(
        WalletType.AuthCore, eoaPublicAddress, transaction,
        feeMode: AAFeeMode.native(result));

await ParticleConnect.signAndSendTransaction(
        WalletType.AuthCore, eoaPublicAddress, transaction,
        feeMode: AAFeeMode.token(feeQuote, tokenPaymasterAddress));

await ParticleConnect.batchSendTransactions(
        WalletType.AuthCore, eoaPublicAddress, transactions,
        feeMode: AAFeeMode.native(result));
```

Check if you can send a transaction with AAFeeMode.gasless/native/token.

```typeScript theme={null}
const wholeFeeQuote = await particleAA.rpcGetFeeQuotes(eoaAddress, [
        transaction,
      ]) as WholeFeeQuote;
      
const feeQuote = wholeFeeQuote.verifyingPaymasterNative['feeQuote'];
const fee = BigNumber(feeQuote['fee']);
const balance = BigNumber(feeQuote['balance']);

// Check if user can afford te transaction
if (balance.isLessThan(fee)) {
  console.log("Native balance too low to pay for gas fees");
  return;
}

// Check if the transaction can be sponsored
const verifyingPaymasterGasless = wholeFeeQuote.verifyingPaymasterGasless;
if (verifyingPaymasterGasless == undefined) {
  console.log("Gasless mode is not available");
  return;
}

// Check if the transaction can be paid for using ERC20 tokens
 const feeQuotes = wholeFeeQuote.tokenPaymaster['feeQuotes'] as any[];

const validFeeQuotes = feeQuotes.filter(item => {
  const fee = BigNumber(item['fee']);
  const balance = BigNumber(item['balance']);
  if (balance.isLessThan(fee)) {
    return false;
  } else {
    return true;
  }
});


if (validFeeQuotes.length == 0) {
  console.log("Token not valid to pay gas fees");
  return;
}

// Select a fee quote.
const feeQuote = validFeeQuotes[0];

const tokenPaymasterAddress =
        wholeFeeQuote.tokenPaymaster["tokenPaymasterAddress"] as string;

```

***

## Dive Deeper

See the [Particle Auth](/social-logins/auth/mobile-sdks/react) and [Particle Connect](/social-logins/connect/mobile/react) pages for insights into additional compatible methods (such as `signAndSendTransaction`), as shown here.


# Unity (C#) - AA
Source: https://developers.particle.network/aa/sdks/mobile/unity

Leveraging Particle's AA SDK within on Unity applications with C#.

## Account Abstraction on Unity

Applications built using Unity can also directly leverage Particle Network's AA SDK to facilitate end-to-end utilization of ERC-4337 account abstraction. Particle Network's AA SDK handles smart account deployment (modularized to multiple built-in implementations), UserOperation construction and sponsoring, fee quote generation, etc. Particle's AA SDK is the core infrastructure component, working hand-in-hand with Particle's Bundler and Paymaster, which power Particle Network's Modular Smart Wallet-as-a-Service.

This document will cover the installation, configuration, and utilization flow of Particle's AA SDK for Unity.

## Repository

Before diving in, you'll need to open the official [`particle-unity` GitHub repository](https://github.com/Particle-Network/particle-unity). This is where all of Particle Network's Unity SDKs are open-sourced and available for download. Before beginning, feel free to take a look at the underlying architecture and demos within `particle-unity` to contextualize the processes covered within this page.

***

## Getting Started

### Prerequisites

To start using the Particle AA SDK for Unity, you'll need to ensure that your project meets the minimum requirements for your platform (iOS or Android). Otherwise, you may run into compatibility issues, resulting in the SDK being non-functional. These prerequisites are as follows:

* **Unity 2021.3.35f1** or higher.
* For iOS:
  * **Xcode 15.0** or higher.
  * **CocoaPods 1.14.3** or higher.
  * **iOS 14** or higher.
* For Android:
  * **Minimum API level 23** or higher.
  * **Targets API level 33** or higher.
  * **Java SDK version 11**.

### Setting up Particle Auth or Particle Connect

With your prerequisites set, you'll need to set up either Particle Auth or Particle Connect for Unity. Particle Auth will offer a direct social login mechanism resulting in a Particle wallet. Otherwise, Particle Connect will allow for a more generalized connection modal aggregating both social logins and external Web3 wallets.

* Particle Auth: [Unity (C#)](/social-logins/auth/mobile-sdks/unity).
* Particle Connect: [Unity (C#)](/social-logins/connect/mobile/unity).

<Note>
  Important details before initialization.

  <p />

  <p>Before initializing the SDK, there are a few key points to keep in mind, specifically regarding the utilization of Paymasters (to sponsor gas fees, pay for gas in ERC-20 tokens, etc.)</p>

  <p />

  <p>- All Testnets automatically have the Verifying Particle Network Omnichain Verifying Paymaster enabled, transactions (that request it) will automatically be sponsored and thus gasless.</p>
  <p>- On the occasion that you'd like to use the Particle Network Omnichain Verifying Paymaster for Mainnets, you'll need to deposit USDT on either Ethereum or BNB Chain within the <a href="https://dashboard.particle.network">Particle dashboard</a>. This USDT will then automatically be converted as needed into the native token of the network you're requesting (and qualifying for) sponsorship on.</p>
  <p>- The Particle Network AA SDK automatically uses Biconomy's Token Paymaster. Transactions that request it will be able to leverage it without additional configuration.</p>
</Note>

***

## Initialization

Now that you have a project set up with either Particle Auth or Particle Connect, you can initialize the Particle AA SDK. But first, make sure you have the `ParticleAA` prefab within your first scene. This can be retrieved through the AA package within the forenamed [GitHub repository](https://github.com/Particle-Network/particle-unity/tree/main/Assets/ParticleNetwork/Mobile/Modules/AA).

Before you can use the full extent of the SDK, you'll need to initialize it through `ParticleAAInteraction.Init`. This process will allow you to choose between a Biconomy or Particle Paymaster, alongside the specific smart account implementation you'd like your users to rely on. `ParticleAAInteraction.Init` takes the following parameters:

* `accountName`, the name of the smart account implementation you'd like to use. Either:
  * `BICONOMY_V1`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts).
  * `BICONOMY_V2`, a [Biconomy smart account](https://www.biconomy.io/smart-accounts).
  * `CYBERCONNECT`, a [CyberConnect smart account](https://wallet.cyber.co).
  * `SIMPLE_V1`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `SIMPLE_V2`, a [SimpleAccount implementation](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol).
  * `LIGHT`, a [Light Account implementation](https://accountkit.alchemy.com/smart-contracts/light-account).

Once the Particle AA SDK has been initialized through `ParticleAAInteraction`, you'll need to go ahead and enable AA mode through `ParticleAAInteraction.EnableAAMode`. From there, you can directly interact with the SDK (sending UserOperations, retrieving fee quotes, etc.)

E.g.:

```csharp theme={null}

// BICONOMY_V1 || BICONOMY_V2 | SIMPLE_V1 | SIMPLE_V2 | CYBERCONNECT | LIGHT
ParticleAAInteraction.Init(AAAccountName.BICONOMY_V1);

ParticleAAInteraction.EnableAAMode();
// Inversely, ParticleAAInteraction.DisableAAMode();
```

## Examples of Utilization

### Is Deployed

Upon initiating social login, a smart account will be assigned to your user's EOA (either a SimpleAccount, Biconomy account, or CyberConnect account), although even upon assignment, that smart account still needs to be deployed. This deployment will happen automatically upon the first UserOperation execution, as the deployment operation will be batched in with the first transaction request. Although, if you'd like to see whether an EOA's assigned smart account has been deployed or not, you can call `ParticleAA.Instance.IsDeploy`, as shown below.

```csharp theme={null}
var evmAddress = ParticleAuthCoreInteraction.EvmGetAddress()
var result = await ParticleAA.Instance.IsDeploy(eoaAddress);
```

### Is AA Mode Enabled

As mentioned prior, upon initialization, you'll need to enable the AA mode. If you're unsure whether this is currently enabled for a specific instance, then you can use `ParticleAAInteraction.IsAAModeEnable`, which will return a Boolean indicating either`true` or `false` otherwise. E.g.:

```csharp theme={null}
var result = ParticleAAInteraction.IsAAModeEnable();
```

### Get Fee Quotes

As you'll see in a moment, sending a UserOperation requires the retrieval of a `feeQuote` object, containing constructed UserOperations for three different fee payment mechanisms, either gasless, native paid (native token), or token paid (ERC-20 token Paymaster). Thus, upon sending a transaction, you'll need to pass in a complete response from the `ParticleAA.Instance.RpcGetFeeQuotes` method. Specifically, `ParticleAA.Instance.RpcGetFeeQuotes` takes the following parameters:

* `eoaAddress`, the address of the Signer/owner of the smart account in question (can be retrieved through `ParticleAuthCoreInteraction.GetEvmAddress` for Particle Auth).
* `transaction`, an array of multiple or a singular standard transactions to be sent from the smart account. The fee quote response will be based on the parameters defined within the transaction object.

E.g.:

```csharp theme={null}
var nativeResultData = await ParticleAA.Instance.RpcGetFeeQuotes(eoaAddress, new List<string> { transaction });
```

### Send Transaction

Sending a transaction or UserOperation within the AA SDK is also quite simple. There are four mechanisms that can achieve this: either through a singular transaction with Particle Auth, multiple (batched) transactions with Particle Auth, or the same two options for Particle Connect. Each option functions slightly differently; although, in general, these methods will take the following parameters:

* For Particle Connect, `walletType`. This is the specific adapter or wallet being used through Particle Connect.
* For Particle Connect, `eoaAddress`, the owner (or Signer) address of the smart account.
* `transaction` (or for batched transaction, `transactions`, an array), a standard transaction object (or objects) containing the parameters of the transaction in question (`to`, `value`, `data`, etc.)
* `AAFeeMode`, the mechanism used to pay gas fees. Either:
  * `AAFeeMode.Native`, natively paid by the smart account (native referring to the network's base token).
  * `AAFeeMode.Gasless`, sponsored by either the Particle Paymaster or a Biconomy Paymaster, depending on initialization settings.
  * `AAFeeMode.Token`, leverages a token Paymaster to pay the gas fee in an ERC-20 token.
* For each of the above methods, you'll need to pass in a JSON representation of a `feeQuote` object. The SDK will automatically choose the fee quote corresponding to the previous choice. If you've chosen `AAFeeMode.Token`, you'll need to pass in the address of the token Paymaster alongside the `feeQuote` object.

E.g.:

```csharp theme={null}
// Particle Auth, singular transaction
var nativeResultData = await ParticleAuthCore.Instance.SendTransaction(transaction, AAFeeMode.Native(JObject.Parse(feeQuotesResult.data)));

// Particle Auth, batched transactions
var nativeResultData = await ParticleAuthCore.Instance.BatchSendTransactions(transactions, AAFeeMode.Gasless(JObject.Parse(feeQuotesResult.data)));

// Particle Connect, singular transaction
var nativeResultData = await ParticleConnect.Instance.SignAndSendTransaction(WalletType.MetaMask, eoaAddress, transaction, AAFeeMode.Token(feeQuote, tokenPaymasterAddress));

// Particle Connect, batched transactions
var nativeResultData = await ParticleConnect.Instance.BatchSendTransactions(WalletType.MetaMask, eoaAddress, transactions, AAFeeMode.Native(JObject.Parse(feeQuotesResult.data)));
```

Check if you can send gasless/native/token.

```csharp theme={null}
// Check if user can afford the transaction
var feeQuotesResult =
    await ParticleAA.Instance.RpcGetFeeQuotes(eoaAddress, new List<string> { transaction });

var verifyingPaymasterNative = JObject.Parse(feeQuotesResult.data)["verifyingPaymasterNative"];
var feeQuote = verifyingPaymasterNative["feeQuote"];

var fee = BigInteger.Parse((string)feeQuote["fee"]);
var balance = BigInteger.Parse((string)feeQuote["balance"]);

if (balance < fee)
{
  Debug.Log("Native balance is not enough for gas fee");
  return;
}

// Check if the transaction can be sponsored
var verifyingPaymasterGasless = JObject.Parse(feeQuotesResult.data)["verifyingPaymasterGasless"];

if (verifyingPaymasterGasless == null)
{
  Debug.Log("Gasless is not available");
  return;
}

// Check if the transaction can be paid for using an ERC20 token
 JArray feeQuotes = (JArray)(JObject.Parse(feeQuotesResult.data)["tokenPaymaster"]["feeQuotes"]);

var overFeeQuotes = feeQuotes
.Where(jt => {
  var fee = BigInteger.Parse(jt["fee"].Value<string>());
  var balance = BigInteger.Parse((string)jt["balance"].Value<string>());
  return balance >= fee;
})
.ToList();

if (overFeeQuotes.Count == 0)
{
  Debug.Log("No valid token for gas fee");
  return;
}

// Select a feeQuote, for example the first.
var feeQuote = overFeeQuotes[0];
var tokenPaymasterAddress =
    JObject.Parse(feeQuotesResult.data)["tokenPaymaster"]["tokenPaymasterAddress"].Value<string>();

```

***


# Introduction to Account Abstraction
Source: https://developers.particle.network/intro/account-abstraction

ERC-4337 smart accounts, powered by Particle Network’s SDK.

**Account Abstraction (AA)** brings smart account capabilities to users, enabling features like gasless transactions, batched operations, and programmable account logic.

Particle Network provides a full-stack **Account Abstraction SDK**, designed for developers who want to implement **ERC-4337 Smart Wallet-as-a-Service** with minimal effort. Whether paired with **Particle Auth** (MPC-secured EOAs) or integrated externally, the SDK handles the heavy lifting of smart account deployment and UserOperation management.

<Frame>
  <img alt="Account Abstraction" />

  <img alt="Account Abstraction" />
</Frame>

***

# Understanding Account Abstraction

From a technical standpoint, Account Abstraction (ERC-4337) separates account logic from EOAs, replacing them with **Smart Accounts**. These programmable accounts allow for improved UX while staying fully decentralized.

The **Particle AA SDK** enables developers to:

* Deploy smart accounts bound to EOAs (MPC-secured via Particle Auth or external).
* Construct, sponsor, and send **UserOperations**.
* Retrieve fee quotes and handle gas sponsorship.
* Support recovery flows and custom logic.

***

## Key Features

### User Experience

* **Gasless transactions** through paymaster sponsorship.
* **Batched operations** (e.g., approve + swap in one click).
* **Programmable logic** for recovery, spending limits, or custom policies.

### Developer Benefits

* **Full ERC-4337 support** out of the box.
* Works natively with Particle Auth (MPC EOAs) or external wallets.
* Simple SDK integration for constructing, simulating, and sending UserOperations.

***

<Card title="Explore the AA SDK" icon="cogs" href="/aa/introduction">
  Start building with ERC-4337 smart accounts.
</Card>

<Tip>
  **Smart Wallet-as-a-Service**

  Particle’s AA SDK provides the infrastructure to launch fully programmable smart wallets, with sponsorship, batching, and recovery built-in. Ideal for consumer-ready dApps.
</Tip>


# Custom Page with Toggles
Source: https://developers.particle.network/intro/interactive



<InteractiveLayout />


# Introduction
Source: https://developers.particle.network/intro/introduction

Particle Network's developer docs.

<Frame>
  ![Particle Network and the Chain Abstraction Coalition.](https://static.particle.network/mintlify/images/0.png)
</Frame>

# Particle Network Documentation

Particle Network provides the infrastructure for building **chain-agnostic, next-generation Web3 applications**.
Our stack consists of three core products:

1. **Universal Accounts**
   Universal Accounts enable any app to become chain-agnostic. They do so by providing users with a single account and unified balance across multiple chains.

   Thanks to this, users can spend their assets from multiple chains in a combined manner, use integrated dApps regardless of where their assets are or the chain the dApp is deployed on, and never manually bridge again.

   This user experience is known as [chain abstraction](https://developers.particle.network/intro/what-is-cha).
2. **Social Logins**
   Wallet creation and access with familiar Web2 credentials (Google, Twitter, Discord, etc.). This lowers onboarding friction and lets users start using dApps instantly.
3. **Account Abstraction (ERC-4337 AA)**
   Smart account infrastructure following the ERC-4337 standard.
   Features include gas sponsorship, batched transactions, and programmable account logic.

***

## New to Particle Network?

<CardGroup>
  <Card title="Introduction to Universal Accounts" icon="globe" href="./universal-accounts">
    Learn how Universal Accounts unify balances across chains to enable Chain Abstraction.
  </Card>

  <Card title="Introduction to Social Logins" icon="address-card" href="/social-logins/">
    Onboard users instantly with familiar Web2 logins and auto-generated wallets.
  </Card>

  <Card title="Introduction to Account Abstraction" icon="bolt" href="./account-abstraction">
    Explore how ERC-4337 smart accounts enable gasless txs, batching, and programmability.
  </Card>

  <Card title="What is Particle Network?" icon="atom-simple" href="./what-is-particle-network">
    Understand our mission to make Web3 retail-ready through Chain Abstraction and beyond.
  </Card>
</CardGroup>

***

## Want to Build?

<CardGroup>
  <Card title="Universal Account Quickstart" icon="star-shooting" href="/universal-accounts/cha/web-quickstart">
    Integrate Universal Accounts into an existing dApp in minutes.
  </Card>

  <Card title="Social Login Quickstart" icon="wand-magic-sparkles" href="/social-logins/connect/quickstart/web-quickstart">
    Add social logins to your dApp with just a few lines of code.
  </Card>

  <Card title="Account Abstraction Quickstart" icon="bolt" href="/aa/quickstart/web-aa">
    Start building with ERC-4337 Smart Accounts using the Particle AA SDK.
  </Card>
</CardGroup>

***

## Resources

<CardGroup>
  <Card title="GitHub Repos" icon="github" href="https://github.com/orgs/Particle-Network/repositories">
    Particle Network's open-source SDKs and core packages.
  </Card>

  <Card title="Tutorial Videos" icon="video" href="https://www.youtube.com/@ParticleNtwrk">
    Watch walkthroughs and deep dives on integration.
  </Card>

  <Card title="Slack Community" icon="slack" href="https://join.slack.com/t/particlenetworkhq/shared_invite/zt-3blxdzcd2-7skD8MNWUn_20eOrp9SICA">
    Join our Slack community for support and collaboration.
  </Card>
</CardGroup>


# Brand Assets
Source: https://developers.particle.network/intro/more/assets

Aggregation of Particle Network brand assets for external usage.

## Particle Network Brand Assets

Particle Network has numerous brand assets that you can use for comarketing or to display the fact that your application is powered by Particle. To download these assets, click the following links. If none of these assets meet your needs, please contact us rather than modifying the logo yourself.

<Note>
  <p>General icons: [https://particle.network/icons.zip](https://particle.network/icons.zip)</p>
  <p>Powered by Particle Network banners: [https://particle.network/poweredby.zip](https://particle.network/poweredby.zip)</p>
</Note>

***

## Brand Colors

Additionally, see the following images for the specific colors used within Particle Network marketing material. It's recommended to use these when working with the above brand assets or associated Particle-related imagery.

### Light (Purple)

<div>
  <img alt="Particle Network light palette." />

  <img alt="Particle Network light palette." />
</div>

### Dark

<div>
  <img alt="Particle Network dark palette." />

  <img alt="Particle Network dark palette." />
</div>

### Banners

<div>
  <img alt="Particle Network banners palette." />

  <img alt="Particle Network banners palette." />
</div>


# Security Audits
Source: https://developers.particle.network/intro/more/audits



> 🏅 Particle Network has private audits with [Salus Sec](https://salusec.io/), as well as public ones with [CertiK](https://skynet.certik.com/projects/particle-network) and [OpenZeppelin](https://blog.openzeppelin.com/particle-network-btc-smart-account-audit).
>
> Particle Network regularly has it's codebase audited to ensure a constant baseline of security. Thus, Particle Network is currently ranked in [second place](https://skynet.certik.com/leaderboards/non-token), globally, among non-token audits by CertiK.
>
> Additionally, Particle Network runs an active bug bounty program with CertiK, viewable [here](https://skynet.certik.com/projects/particle-network).


# Model Context Protocol (MCP) Server
Source: https://developers.particle.network/intro/more/mcp

Access Particle's documentation programmatically via an MCP server

The Particle docs host a **Model Context Protocol (MCP) server** that lets AI applications query our documentation directly. This enables developers to build AI tools and assistants with first-class access to guides, API references, and implementation details.

***

## What is MCP?

The **Model Context Protocol (MCP)** is a standard for connecting AI systems to external tools and data sources.\
With MCP, AI models can extend their capabilities beyond static training data by retrieving real-time, contextual information.

Particle Network’s MCP server bridges AI applications and our documentation, allowing AI systems to:

* Search across the full documentation knowledge base
* Retrieve relevant guides, API references, and code snippets
* Provide contextual answers with direct links back to docs

***

## Connecting to Particle Network’s MCP Server

To use the Particle MCP server, your AI application must support the Model Context Protocol (MCP). Many modern AI tools and IDEs already provide native support.

Some examples include:

* **Windsurf IDE**: an AI-powered IDE with built-in MCP integration.
* **Claude Code**: Anthropic’s coding assistant with MCP support.
* **Any other MCP-compatible client**: custom tools or assistants that can connect to a streamable HTTP MCP endpoint.

You’ll connect these clients to the following server URL:

```sh URL theme={null}
https://developers.particle.network/mcp
```

## Available Tools

Currently, the Particle MCP server exposes one tool:

`SearchParticleNetworkDocs`

A search endpoint for querying the entire Particle Network documentation knowledge base. It returns contextual content along with titles and direct links to the docs.

Use this tool when you need to:

* Answer technical questions about Particle Network features
* Locate integration guides and API references
* Retrieve implementation details and code samples
* Provide contextual answers with links back to official docs

## Integration Instructions

### Using Windsurf IDE

Windsurf is an AI-powered IDE with built-in MCP support. You can connect it to the Particle Network docs in a few steps:

1. Navigate to `Advanced Settings → Cascade → Manage MCPs`.
2. Click `View Raw Config` and paste the following snippet:

```json mcp_config.json theme={null}
{
  "mcpServers": {
    "particle-docs": {
      "serverUrl": "https://developers.particle.network/mcp"
    }
  }
}
```

Once added, Windsurf will automatically use the MCP server to query Particle’s documentation inside Cascade — giving your IDE real context about Particle SDKs, APIs, and integration details.

### Manual Configuration

For other AI tools that support streamable HTTP MCP (the current MCP standard, replacing older SSE connections), you can connect directly using the following URL:

```sh URL theme={null}
https://developers.particle.network/mcp
```

This provides full access to Particle Network’s documentation and developer resources via MCP.


# Introduction to Social Logins
Source: https://developers.particle.network/intro/social-logins

Onboard users with familiar credentials and automatic wallet creation.

**Social Logins** let users sign in to dApps using credentials they already know — Google, Twitter, Discord, Apple, and more — while automatically generating a secure, non-custodial wallet in the background.

This eliminates the friction of seed phrases and manual wallet setup, allowing developers to offer a **Web2-like onboarding experience** without sacrificing decentralization. Particle Network ensures keys are safely managed using [MPC (Multi-Party Computation)](/social-logins/mpc-tss), keeping control in the user’s hands.

<Frame>
  <img alt="Particle Connect Login Modal" />
</Frame>

***

# Understanding Social Logins

From a technical standpoint, Social Logins work by binding a user’s Web2 identity (e.g., Google OAuth) to a non-custodial wallet. Particle’s infrastructure abstracts away key management, ensuring wallets can be recovered while staying decentralized.

## Key Features

### User Experience

* One-click onboarding with familiar Web2 credentials.
* No need for seed phrases, extensions, or manual wallet creation.
* Fast, familiar login flow users already trust.

### Developer Benefits

* Easy SDK integration with minimal code changes.
* Works across web, mobile, and desktop environments.
* Fully compatible with other Particle products (Universal Accounts, Account Abstraction).

***

<Card title="Get started with Social Logins" icon="address-card" href="/social-logins/overview">
  Add Social Logins to your dApp.
</Card>

<Tip>
  **Best for onboarding retail users**

  Social Logins reduce drop-off by removing seed phrases and wallet setup barriers, making them ideal for consumer-ready dApps and mainstream audiences.
</Tip>


# API & SDK License Agreement
Source: https://developers.particle.network/intro/tos/license-agreement

Effective Date: May 1, 2022

## Developer API and SDK License Agreement | Particle Network

BY ACCESSING OR USING THE PARTICLE NETWORK LABS, INC. (“**WE**”, “**US**”, “**OUR**”, “**Particle Network**”) API OR SDK (EACH AS DEFINED BELOW), YOU OR THE ENTITY OR COMPANY THAT YOU REPRESENT (“**YOU,**” “**YOUR,**” “**YOURS**” OR “**LICENSEE**”) ARE AGREEING TO BE BOUND BY THIS PARTICLE NETWORK API/SDK LICENSE AGREEMENT, EACH OF OUR USER AND DEVELOPER TERMS OF SERVICE, ANY ADDITIONAL TERMS INCORPORATED BY REFERENCE HEREIN, TERMS WITHIN THE ACCOMPANYING API DOCUMENTATION, AND ANY RELATED APPLICABLE POLICIES AND GUIDELINES WE MAY MAKE AVAILABLE FROM TIME TO TIME (COLLECTIVELY, THE “**AGREEMENT**”), AND HEREBY REPRESENT THAT YOU ARE AUTHORIZED TO BIND LICENSEE.YOUR DOWNLOAD OR CONTINUED USE OF THE SDK OR API WILL CONSTITUTE ASSENT TO THE TERMS OF THIS AGREEMENT. IF YOU DO NOT UNCONDITIONALLY AGREE TO ALL OF THE TERMS OF THIS AGREEMENT, IMMEDIATELY CEASE THE DOWNLOAD OR USE, AND YOU WILL HAVE NO RIGHT TO USE, THE SDK OR API. IF THESE TERMS ARE CONSIDERED AN OFFER, ACCEPTANCE IS EXPRESSLY LIMITED TO THIS AGREEMENT TO THE EXCLUSION OF ALL OTHER TERMS.THIS AGREEMENT CONTAINS AN ARBITRATION PROVISION. YOU AGREE AND UNDERSTAND THAT DISPUTES ARISING UNDER THIS AGREEMENT WILL BE SETTLED IN BINDING ARBITRATION. YOU ALSO AGREE AND UNDERSTAND THAT ENTERING INTO THIS AGREEMENT CONSTITUTES A WAIVER OF YOUR RIGHT TO A TRIAL BY JURY OR PARTICIPATION IN A CLASS ACTION LAWSUIT.

* Subject to full compliance with the terms of this Agreement, Particle Network hereby grants you a limited, personal, non-sublicensable, non-transferable, royalty-free, nonexclusive license to access and use our application programming interface located at api.particle.network and related information and documentation (collectively, the “**API**”) and our API Software Development Kit (“**SDK**”), but only to build software applications (each an “**App**”) that communicate with our proprietary authentication platform service or other services that we may provide through the API (the “**Services**”). Some of the software required by or included in our APIs may be offered under an open source license. Open source software licenses constitute separate written agreements. For certain APIs, open source software is listed in the documentation. To the limited extent the open source software license expressly supersedes the Agreement, the open source license instead sets forth your agreement with Particle Network for the applicable open source software.
* Subject to full compliance with the terms of this Agreement, we hereby grant you a limited, personal, non-sublicensable, non-transferable, royalty-free, nonexclusive license to distribute those components of the SDK we identify as “**distributable**” but only in object code form, as part of an App.
* Except as expressly authorized herein, you will not disclose (or allow access to) the API or SDK (or any information derived from them) or any other confidential information provided to you to any third party and will limit access to the API and SDK (and any derived information) to your employees who are developing the App. In support of this obligation, you will apply at least the same security that you use to protect your own most confidential information. You will not reverse engineer any aspect of the API or SDK or permit anyone else to do so (except to the limited extent this restriction is expressly prohibited by applicable law).
* You will use your App and the Services in compliance with all applicable laws and regulations (“**Laws**”) and will obtain all necessary permits or licenses (“**Permits**”), which includes without limitation, all approvals, authorizations, consents, qualifications to do business and certificates issued by any governmental authority, quasi-governmental authority, or legal body of the United States or any foreign body of any foreign jurisdiction related to the transmission of fiat currency, digital or cryptocurrency or other blockchain tokens necessary for your end users use of your App or the Services.
* You will require your end users to comply with (and not knowingly enable them to violate) applicable Laws, regulations, and the Agreement, including separately agreeing to our User Terms of Service. You will provide and adhere to a privacy policy for your App that clearly and accurately describes to users of your App what user information you collect and how you use and share such information (including for advertising) with Particle Network and third parties. If your or your end users’ use of the Services is prohibited by Laws or you do not have the required Permits, then you and your end users are not authorized to use the Services. We cannot and will not be responsible for your or your end users using the Services in a way that breaks any Laws.
* You agree not to block, disable, hide or limit in any way the ability of any device (whether or not it includes the App) to access the Services or any portion or functionality of or enabled by the Services. In addition, you agree that, when using the APIs, you shall not (or allow those acting on your behalf to):
  * Sublicense an API for use by a third party or create an App that functions substantially the same as the APIs and offer it for use by third parties;
* Perform an action with the intent of introducing to Particle Network products and services any viruses, worms, defects, Trojan horses, malware, or any items of a destructive nature;
* Seek to gain access to a user’s private key or other login information related to a digital asset wallet without their explicit consent subject to a previously disclosed privacy policy;
* Defame, abuse, harass, stalk, or threaten others;
* Interfere with or disrupt the APIs or the servers or networks providing the APIs;
* Promote or facilitate unlawful online gambling;
* Reverse engineer or attempt to extract the source code from any API or any related software, except to the extent that this restriction is expressly prohibited by applicable law; or
* Violate or infringe upon the privacy, publicity, intellectual property, or other proprietary rights of third parties.
* Each App must maintain 100% compatibility with the API, the SDK and the Services (including changes provided to you by Particle Network, which will be implemented in the App promptly thereafter). If any App uses or implements an outdated version of the API, SDK or the Services, you acknowledge and agree that such App may not be able to communicate with the Services. You agree not to modify, extend, subset or superset the API or SDK to any extent. You also acknowledge and agree that Particle Network may set and enforce limits on your use of the APIs (e.g. limiting the number of API requests that you may make or the number of users you may serve), in our sole discretion. You agree to, and will not attempt to circumvent, such limitations documented with each API without our express consent (and we may decline that request or condition acceptance on your agreement to additional terms and/or charges for that use). You understand that we may cease support of old versions or releases of the API or SDK.
* You will use commercially reasonable efforts to protect user information collected by your App, including personally identifiable information ("PII"), from unauthorized access or use and will promptly report to your users any unauthorized access or use of such information to the extent required by applicable law. Particle Network will use commercially reasonable efforts to (i) provide basic support to you and (ii) maintain the security and integrity of the Services.
* By using Particle Network Services, we do not acquire ownership in your App, and by using our APIs, you do not acquire ownership of any rights in our APIs, the SDK, or the content that is accessed through our APIs. However, you hereby grant Particle Network a nonexclusive, sublicensable, fully-paid, worldwide license to fully exercise and exploit all intellectual property rights with respect to improvements or extensions that you create or are created for you that are relevant to the API or SDK or otherwise result from or are enabled by access to the API or SDK. If you provide feedback or suggestions about our APIs, then we (and those we allow) may use such information without obligation to you. For clarity, you are not required to disclose any such patent or patent rights to Particle Network. Particle Network shall have the right to collect and analyze data and other information relating to the provision, use and performance of various aspects of the API, SDK and/or the Services and related systems and technologies, and Particle Network will be free (during and after the term hereof) to (i) use such information and data to improve and enhance the API, SDK and the Services and for other development, diagnostic and corrective purposes in connection with the API, SDK and the Services and other Particle Network offerings, and (ii) disclose such data solely in aggregate or other de-identified form in connection with its business.
* PARTICLE NETWORK PROVIDES THE API, SDK AND THE SERVICES “**AS IS**” AND WITHOUT WARRANTY OF ANY KIND, AND HEREBY DISCLAIMS ALL EXPRESS AND IMPLIED WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, PERFORMANCE, ACCURACY, RELIABILITY, AND NON-INFRINGEMENT. PARTICLE NETWORK DOES NOT MAKE ANY REPRESENTATIONS OR WARRANTIES THAT THE USE OF ITS API, SDK OR SERVICES WILL BE UNINTERRUPTED, TIMELY, OR ERROR-FREE.
* LIMITATION OF LIABILITY: NOTWITHSTANDING ANYTHING TO THE CONTRARY, TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, NONE OF PARTICLE NETWORK OR ITS SUPPLIERS OR RESELLERS WILL BE LIABLE UNDER ANY LEGAL OR EQUITABLE THEORY, INCLUDING, BUT NOT LIMITED TO, TORT, CONTRACT, NEGLIGENCE, STRICT LIABILITY, OR OTHERWISE, FOR (A) ANY INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOST PROFITS, LOSS OF GOODWILL, , OR DAMAGES RESULTING FROM LICENSEE’S USE OF THE API OR SDK, OR (B) ANY DIRECT DAMAGES OF ANY KIND ARISING OUT OF THIS AGREEMENT IN EXCESS OF \\\$100. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF INCIDENTAL OR CONSEQUENTIAL DAMAGES, SO THE ABOVE LIMITATION AND EXCLUSION MAY NOT APPLY TO YOU.
* You agree to indemnify and hold harmless Particle Network, its affiliates, subsidiaries, directors, managers, members, officers, and employees from any and all claims, liabilities, demands, actions, damages, losses, costs or expenses, including without limitation, reasonable legal fees, arising out of or relating to (i) your or your end users’ use or misuse of, or access to, your App and the Services (ii) your violation of this Agreement or any Laws or Permits, (iii) your infringement, or the infringement by any third party using your account, of any intellectual property or other right of any person or entity, (iv) a claim alleging that any of your or your end users’ data infringes the rights of, or has caused harm to, a third party or (v) any violation of any rights of any other person or entity; provided however, that you will not indemnify Particle Network for claims or losses arising out of Particle Network’s gross negligence or willful misconduct.
* You may stop using our APIs at any time with or without notice. Further, if you want to terminate the Terms, you must provide us with prior written notice and upon termination and cease your use of the applicable APIs. We reserve the right to terminate the Agreement with you or discontinue the APIs or any portion or feature or your access thereto for any reason and at any time without liability or other obligation to you. Provisions that, by their nature, should survive termination of these Terms shall survive termination. By way of example, all of the following will survive termination: any obligation you have to pay us (if applicable) or indemnify us, any limitations on our liability, any terms regarding ownership or intellectual property rights, and terms regarding disputes between us.
* Except as described in this Agreement, all notices to be provided under this Agreement shall be given in writing (a) as to the Licensee, at the email address provided by Licensee upon registration of Licensee’s account or user ID in Particle Network’s systems, or at such other account Licensee maintains with Particle Network, and (b) as to Particle Network, at [contact@particle.network](mailto:contact@particle.network). This Agreement is the complete agreement concerning the subject matter hereof between the parties and supersedes all prior agreements and representations between them. Particle Network reserves the right to modify this Agreement from time to time upon notice to Licensee (via email or by posting a notice to the page where Licensee accesses its SDK or API account); if Licensee does not agree with this Agreement as so modified, its only remedy shall be to terminate this Agreement by providing notice to Particle Network. Any use of or access to the SDK or API and/or Services in any manner whatsoever following a notice of modification of this Agreement shall constitute acceptance of the Agreement as so modified. If any part of this Agreement is held to be unenforceable for any reason, that part will be reformed only to the extent necessary to make it enforceable. No failure by Particle Network in exercising any right under this Agreement will constitute a waiver of that right. You may not assign or transfer any of your rights or obligations without Particle Network’s consent and any action or conduct in violation of the foregoing will be void and without effect. Particle Network may assign or transfer this Agreement.
* If you would like to report a vulnerability or have a security concern regarding our user-facing and developer-related services, SDK, API, infrastructure, and architecture etc., please e-mail [help@particle.network](mailto:help@particle.network).
* The API and SDK were developed solely at private expense and are commercial computer software and related documentation within the meaning of the applicable U.S. Federal Acquisition Regulation and agency supplements thereto.


# Privacy Policy
Source: https://developers.particle.network/intro/tos/privacy-policy

Effective Date: May 1st, 2022

## Privacy Policy | Particle Network

At Particle Network, we take your privacy seriously. Please read this Privacy Policy to learn how we treat your personal data. By using or accessing our Services in any manner, you acknowledge that you accept the practices and policies outlined below, and you hereby consent that we will collect, use and share your information as described in this Privacy Policy. Any terms we use in this Policy without defining them have the definitions given to them in the Terms of Service.

## What this Privacy Policy Covers

This Privacy Policy covers how we treat Personal Data that we gather when you access or use our Services. “Personal Data” means any information that identifies or relates to a particular individual and also includes information referred to as “personally identifiable information” or “personal information” under applicable data privacy laws, rules, or regulations. This Privacy Policy does not cover the practices of companies we don’t own or control or people we don’t manage.

## Personal Data

### Categories of Personal Data We Collect

This chart details the categories of Personal Data that we collect and have collected over the past 12 months.

| Category of Personal Data | Examples of Personal Data We Collect                                                                         | Categories of Third Parties With Whom We Share this Personal Data: |
| ------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
| Profile or Contact Data   | Email address, Cell-phone number, Social login Provider ID or login information, Phone number                | Service Providers, Analytics Partners                              |
| Device/IP Data            | IP address, Device identifiers, Type of device, operating system, or web browser used to access the Services | Service Providers, Analytics Partners                              |
| Social Network Data       | Email, IP address, Device ID, Phone number                                                                   | Service Providers, Analytics Partners                              |
| Geolocation Data          | IP-address-based location information                                                                        | Service Providers, Analytics Partners                              |

#### Is collected Personal Information secure and confidential?

We endeavor to protect the privacy of your Personal Information we hold in our records, however, we cannot guarantee complete security. Unauthorized entry or use, hardware or software failure, and other factors may compromise the security of user information. If at any time, there is an identified concern for the security of the site or confidentiality of personal information, please contact [help@particle.network](mailto:help@particle.network) for a prompt investigation.

### Categories of Sources of Personal Data

We collect Personal Data about you from the following categories of sources:

* **You**
  * When you provide such information directly to us.
  * When you create an account or use our interactive tools and Services.
  * When you voluntarily provide information in free-form text boxes through the Services or through responses to surveys or questionnaires.
  * When you send us an email or otherwise contact us.
* **When you use the Services and such information is collected automatically.**
  * Through Cookies (defined in the “Tracking Tools and Opt-Out” section below).
  * If you use the software we make available, we may receive and collect information transmitted from your computing device for the purpose of providing you the relevant Services, such as information regarding when you are logged on, information about the device from which you are logged in, and the network used to connect to the Services (such as IP address).

### Our Commercial or Business Purposes for Collecting Personal Data

#### Providing, Customizing, and Improving the Services

* Creating and managing your account or other user profiles.
* Providing you with the products, services, or information you request.
* Meeting or fulfilling the reason you provided the information to us.
* Providing support and assistance for the Services.
* Improving the Services, including testing, research, internal analytics, and product development.
* Personalizing the Services, website content, and communications based on your preferences.
* Evaluating and providing fraud and automated bot protection.
* Improving site security and facilitating debugging.
* Carrying out other business purposes stated when collecting your Personal Data or as otherwise set forth in applicable data privacy laws, such as the California Consumer Privacy Act (the “CCPA”) or the European Union’s General Data Protection Regulation (“GDPR”).

#### Corresponding with You

* Responding to correspondence that we receive from you, contacting you when necessary or requested, and sending you information about Particle Network, or the Services.
* Sending emails and other communications according to your preferences or that display content that we think will interest you.

#### Meeting Legal Requirements and Enforcing Legal Terms

* Fulfilling our legal obligations under applicable law, regulation, court order, or other legal processes, such as preventing, detecting, and investigating security incidents and potentially illegal or prohibited activities.
* Protecting the rights, property, or safety of you, Particle Network, or another party.
* Enforcing any agreements with you.
* Responding to claims that any posting or other content violates third-party rights.
* Resolving disputes.

We will not collect additional categories of Personal Data or use the Personal Data we collected for materially different, unrelated, or incompatible purposes without providing you notice.

## How We Share Your Personal Data

We disclose your Personal Data to the categories of service providers and other parties listed in this section. Depending on state laws that may be applicable to you, some of these disclosures may constitute a “sale” of your Personal Data. For more information, please refer to the state-specific sections below.

#### Service Providers

These parties help us provide the Services or perform business functions on our behalf. They include:

* Hosting, technology, and communication providers.
* Security and fraud prevention consultants and vendors.
* Support and customer service vendors.
* Payment processors.
* Our payment processing partner Stripe, Inc. (“Stripe”) collects your voluntarily-provided payment card information necessary to process your payment. Please see Stripe’s terms of service and privacy policy for information on its use and storage of your Personal Data.
* Analytics Partners. These parties provide analytics on web traffic or usage of the Services. They include:
  * Companies that track how users found or were referred to the Services.
  * Companies that track how users interact with the Services.
  * Companies that help identify user experience issues or service impacts.

#### Legal Obligations

We may share any Personal Data that we collect with third parties in conjunction with any of the activities set forth under “Meeting Legal Requirements and Enforcing Legal Terms” in the “Our Commercial or Business Purposes for Collecting Personal Data” section above.

#### Business Transfers

All of your Personal Data that we collect may be transferred to a third party if we undergo a merger, acquisition, bankruptcy, or other transaction in which that third party assumes control of our business (in whole or in part). Should one of these events occur, we will make reasonable efforts to notify you before your information becomes subject to different privacy and security policies and practices.

#### Data that is not Personal Data

We may create aggregated, de-identified, or anonymized data from the Personal Data we collect, including by removing information that makes the data personally identifiable to a particular user. We may use such aggregated, de-identified, or anonymized data and share it with third parties for our lawful business purposes, including to analyze, build and improve the Services and promote our business, provided that we will not share such data in a manner that could identify you.

## Tracking Tools and Opt-Out

The Services use cookies and similar technologies such as image loading, browser local storage, cookies, and JavaScript (collectively, “Cookies”) to enable our servers to recognize your web browser, tell us how and when you visit and use our Services, analyze trends, learn about our user base and operate and improve our Services. Cookies are small pieces of data – usually text files – placed on your computer, tablet, phone, or similar device when you use that device to access our Services. We may also supplement the information we collect from you with information received from third parties, including third parties that have placed their own Cookies on your device(s).

#### We use the following types of Cookies:

* **Essential Cookies**. Essential Cookies are required for providing you with features or services that you have requested. For example, certain Cookies enable you to log into secure areas of our Services. Disabling these Cookies may make certain features and services unavailable.
* **Functional Cookies**. Functional Cookies are used to record your choices and settings regarding our Services, maintain your preferences over time and recognize you when you return to our Services. These Cookies help us to personalize our content for you, greet you by name and remember your preferences (for example, your choice of language or region).
* **Performance/Analytical Cookies**. Performance/Analytical Cookies allow us to understand how visitors use our Services. They do this by collecting information about the number of visitors to the Services, what pages visitors view on our Services and how long visitors are viewing pages on the Services. Performance/Analytical Cookies also help us measure the performance of our advertising campaigns in order to help us improve our campaigns and the Services’ content for those who engage with our advertising.

You can decide whether or not to accept Cookies through your internet browser’s settings. Most browsers have an option for turning off the Cookie feature, which will prevent your browser from accepting new Cookies, as well as (depending on the sophistication of your browser software) allow you to decide on acceptance of each new Cookie in a variety of ways. You can also delete all Cookies that are already on your device. If you do this, however, you may have to manually adjust some preferences every time you visit our website and some of the Services and functionalities may not work.

## Data Security and Retention

We seek to protect your Personal Data from unauthorized access, use and disclosure using appropriate physical, technical, organizational and administrative security measures based on the type of Personal Data and how we are processing that data. You should also help protect your data by appropriately selecting and protecting your password and/or other sign-on mechanisms; limiting access to your computer or device and browser; and signing off after you have finished accessing your account. Although we work to protect the security of your account and other data that we hold in our records, please be aware that no method of transmitting data over the internet or storing data is completely secure. We retain Personal Data about you for as long as you have an open account with us or as otherwise necessary to provide you with our Services. In some cases, we retain Personal Data for longer, if doing so is necessary to comply with our legal obligations, resolve disputes, or collect fees owed, or is otherwise permitted or required by applicable law, rule, or regulation. We may further retain information in an anonymous or aggregated form where that information would not identify you personally. Information about data retention and our data retention policy is available.

## Personal Data of Children

As noted in the Terms of Use, we do not knowingly collect or solicit Personal Data about children under 18 years of age; if you are a child under the age of 18, please do not attempt to register for or otherwise use the Services or send us any Personal Data. If we learn we have collected Personal Data from a child under 18 years of age, we will delete that information as quickly as possible. If you believe that a child under 18 years of age may have provided Personal Data to us, please contact us at [help@particle.network](mailto:help@particle.network).

## Data Deletion Requests

### Requesting Data Deletion

If you would like to request the deletion of your personal data from our records, please follow the steps outlined below:

1. Email us at: [help@particle.network](mailto:help@particle.network) with subject starting with: "Data Deletion Requests";
2. Provide your Third-Party account and your Particle Account.

### Verification of Identity

To ensure the security and accuracy of the data deletion process, we may require additional information or verification of your identity before proceeding with your request. This is to protect your data from unauthorized access or deletion.

* We will verify the email address and Third-Party account and your Particle Account;

### Data Deletion Timeframe

We will make reasonable efforts to process and fulfill your data deletion request within 30 days from the date of receipt. However, please note that certain legal obligations or technical constraints may prevent immediate or complete deletion of your data.

### Communication of Data Deletion

Once your data has been successfully deleted from our systems, we will notify you through [help@particle.network](mailto:help@particle.network). Please note that residual copies of your data may remain in our backup systems for a limited period, as permitted by law or necessary for legitimate business purposes.

## California Resident Rights

If you are a California resident, you have the rights set forth in this section. Please see the “Exercising Your Rights” section below for instructions regarding how to exercise these rights. Please note that we may process the Personal Data of our customers’ end users or employees in connection with our provision of certain services to our customers. If we are processing your Personal Data as a service provider, you should contact the entity that collected your Personal Data in the first instance to address your rights with respect to such data. If there are any conflicts between this section and any other provision of this Privacy Policy and you are a California resident, the portion that is more protective of Personal Data shall control to the extent of such conflict. If you have any questions about this section or whether any of the following rights apply to you, please contact us at [help@particle.network](mailto:help@particle.network).

#### Access

You have the right to request certain information about our collection and use of your Personal Data over the past 12 months. In response, we will provide you with the following information:

* The categories of Personal Data that we have collected about you.
* The categories of sources from which that Personal Data was collected.
* The business or commercial purpose for collecting or selling your Personal Data.
* The categories of third parties with whom we have shared your Personal Data.
* The specific pieces of Personal Data that we have collected about you.

If we have disclosed your Personal Data to any third parties for a business purpose over the past 12 months, we will identify the categories of Personal Data shared with each category of the third-party recipient. If we have sold your Personal Data over the past 12 months, we will identify the categories of Personal Data sold to each category of the third-party recipient.

#### Deletion

You have the right to request that we delete the Personal Data that we have collected about you. Under the CCPA, this right is subject to certain exceptions: for example, we may need to retain your Personal Data to provide you with the Services or complete a transaction or other action you have requested. If your deletion request is subject to one of these exceptions, we may deny your deletion request.

#### Exercising Your Rights

To exercise the rights described above, you or your Authorized Agent (defined below) must send us a request that (1) provides sufficient information to allow us to verify that you are the person about whom we have collected Personal Data, and (2) describes your request in sufficient detail to allow us to understand, evaluate and respond to it. Each request that meets both of these criteria will be considered a “Valid Request.” We may not respond to requests that do not meet these criteria. We will only use Personal Data provided in a Valid Request to verify your identity and complete your request. You do not need an account to submit a Valid Request. Typically, accounts associated with an email address will require verification of the email address, as well as a description of the requested user rights or regulations invoked. Particle Network also values those who are not covered by specific regulations and offers to extend a goodwill effort towards requests originating from other jurisdictions. We will work to respond to your Valid Request within 30 days of receipt. We will not charge you a fee for making a Valid Request unless your Valid Request(s) is excessive, repetitive, or manifestly unfounded. If we determine that your Valid Request warrants a fee, we will notify you of the fee and explain that decision before completing your request. You may submit a Valid Request using the following methods:

* Email us at: [help@particle.network](mailto:help@particle.network)

You may also authorize an agent (an “Authorized Agent”) to exercise your rights on your behalf. To do this, you must provide your Authorized Agent with written permission to exercise your rights on your behalf, and we may request a copy of this written permission from your Authorized Agent when they make a request on your behalf.

#### Personal Data Sales Opt-Out and Opt-In

We will not sell your Personal Data and have not done so over the last 12 months. To our knowledge, we do not sell the Personal Data of minors under 18 years of age.

We will not discriminate against you for exercising your rights under the CCPA. We will not deny you our goods or services, charge you different prices or rates, or provide you a lower quality of goods and services if you exercise your rights under the CCPA. However, we may offer different tiers of our Services as allowed by applicable data privacy laws (including the CCPA) with varying prices, rates, or levels of quality of the goods or services you receive related to the value of Personal Data that we receive from you.

## Other State Law Privacy Rights

#### California Resident Rights

Under California Civil Code Sections 1798.83-1798.84, California residents are entitled to contact us to prevent disclosure of Personal Data to third parties for such third parties’ direct marketing purposes. In order to submit such a request, please contact us at [help@particle.network](mailto:help@particle.network). Please note, however, that we do not disclose Personal Data to third parties for such third parties’ direct marketing purposes.

#### Nevada Resident Rights

If you are a resident of Nevada, you have the right to opt-out of the sale of certain Personal Data to third parties who intend to license or sell that Personal Data. You can exercise this right by contacting us at [help@particle.network](mailto:help@particle.network) with the subject line “Nevada Do Not Sell Request” and providing us with your name and the email address associated with your account. Please note, however, that we do not sell Personal Data.

## European Union Data Subject Rights

#### EU Residents

If you are a resident of the European Union (“EU”), United Kingdom, Lichtenstein, Norway, or Iceland, you may have additional rights under the EU General Data Protection Regulation (the “GDPR”) with respect to your Personal Data, as outlined below. For this section, we use the terms “Personal Data” and “processing” as they are defined in the GDPR, but “Personal Data” generally means information that can be used to individually identify a person, and “processing” generally covers actions that can be performed in connection with data such as collection, use, storage, and disclosure. Particle Network will be the controller of your Personal Data processed in connection with the Services. If there are any conflicts between this section and any other provision of this Privacy Policy, the policy or portion that is more protective of Personal Data shall control to the extent of such conflict. If you have any questions about this section or whether any of the following applies to you, please contact us at [help@particle.network](mailto:help@particle.network). Note that we may also process the Personal Data of our customers’ end users or employees in connection with our provision of certain services to customers, in which case we are the processor of Personal Data. If we are the processor of your Personal Data (i.e., not the controller), please contact the controller party in the first instance to address your rights with respect to such data.

#### Personal Data We Collect

The “Categories of Personal Data We Collect” section above details the Personal Data that we collect from you.

### Personal Data Use and Processing Grounds

The “Our Commercial or Business Purposes for Collecting Personal Data” section above explains how we use your Personal Data. We will only process your Personal Data if we have a lawful basis for doing so. Lawful bases for processing include consent, contractual necessity, and our “legitimate interests” or the legitimate interest of others, as further described below.

**Contractual Necessity**: We process the following categories of Personal Data as a matter of “contractual necessity”, meaning that we need to process the data to perform under our Terms of Use with you, which enables us to provide you with the Services. When we process data due to contractual necessity, failure to provide such Personal Data will result in your inability to use some or all portions of the Services that require such data.

* Profile or Contact Data
* Device/IP Data
* Social Network Data
* Geolocation Data

**Legitimate Interest**: We process the following categories of Personal Data when we believe it furthers the legitimate interest of us or third parties:

* Profile or Contact Data
* Device/IP Data
* Geolocation Data
* We may also de-identify or anonymize Personal Data to further our legitimate interests.

Examples of these legitimate interests include (as described in more detail above):

* Providing, customizing, and improving the Services.
* Marketing the Services.
* Corresponding with you.
* Meeting legal requirements and enforcing legal terms.
* Completing corporate transactions.

**Consent**: In some cases, we process Personal Data based on the consent you expressly grant to us at the time we collect such data. When we process Personal Data based on your consent, it will be expressly indicated to you at the point and time of collection.

**Other Processing Grounds**: From time to time, we may also need to process Personal Data to comply with a legal obligation if it is necessary to protect the vital interests of you or other data subjects, or if it is necessary for a task carried out in the public interest.

#### Sharing Personal Data

The “How We Share Your Personal Data” section above details how we share your Personal Data with third parties.

### EU Data Subject Rights

You have certain rights with respect to your Personal Data, including those set forth below. For more information about these rights, or to submit a request, please email us at [help@particle.network](mailto:help@particle.network). Please note that in some circumstances, we may not be able to fully comply with your request, such as if it is frivolous or extremely impractical, if it jeopardizes the rights of others, or if it is not required by law, but in those circumstances, we will still respond to notify you of such a decision. In some cases, we may also need you to provide us with additional information, which may include Personal Data, if necessary to verify your identity and the nature of your request.

* **Access**: You can request more information about the Personal Data we hold about you and request a copy of such Personal Data. Users of Particle Network’s dashboard can also access certain of your Personal Data by logging on to your account.
* **Rectification**: If you believe that any Personal Data we are holding about you is incorrect or incomplete, you can request that we correct or supplement such data. Users of Particle Network’s dashboard can also correct some of this information (for example, email address) directly by logging on to your account.
* **Erasure**: You can request that we erase some or all of your Personal Data from our systems.
* **Withdrawal of Consent**: If we are processing your Personal Data based on your consent (as indicated at the time of collection of such data), you have the right to withdraw your consent at any time. Please note, however, that if you exercise this right, you may have to then provide express consent on a case-by-case basis for the use or disclosure of certain of your Personal Data, if such use or disclosure is necessary to enable you to utilize some or all of our Services.
* **Portability**: You can ask for a copy of your Personal Data in a machine-readable format. You can also request that we transmit the data to another controller where technically feasible.
* **Objection**: You can contact us to let us know that you object to the further use or disclosure of your Personal Data for certain purposes, such as for direct marketing purposes.
* **Restriction of Processing**: You can ask us to restrict further processing of your Personal Data.
* **Right to File Complaint**: You have the right to lodge a complaint about Particle Network's practices with respect to your Personal Data with the supervisory authority of your country or EU Member State.

## Changes to this Privacy Policy

We’re constantly trying to improve our Services, so we may need to change this Privacy Policy from time to time, but we will alert you to any such changes by placing a notice on the Particle Network website, by sending you an email, and/or by some other means. Please note that if you’ve opted not to receive legal notice emails from us (or you haven’t provided us with your email address), those legal notices will still govern your use of the Services, and you are still responsible for reading and understanding them. If you use the Services after any changes to the Privacy Policy have been posted, that means you agree to all of the changes. Use of information we collect is subject to the Privacy Policy in effect at the time such information is collected.

## Company Information

Name: **MINI JOY GLOBAL PTE. LTD.**

Reg Number: **202014032M**

Address: **1 RAFFLES PLACE #50 ONE RAFFLES PLACE SINGAPORE (048616)**


# Terms of Use
Source: https://developers.particle.network/intro/tos/terms-of-use

Effective Date: May 1, 2022.

### Terms of Service | Particle Network

Welcome to Particle Network and/or Dashboard. Particle Network (the “**Site**”), owned and operated by Particle Network Labs, Inc. (“Particle Network,” “Particle,” “**we**,” or “**us**”). By using this Site, you agree to these terms and conditions of use (the “**Terms**”), as well as our standard User Terms of Service (the “**User Terms**”) and any other terms or policies referenced in these Terms. If you do not agree, you may not use the Site. Particle Network may modify the Site and/or these Terms from time to time without notice to you, except that if Particle Network makes material changes to these Terms, we will post the revised Terms and the revised effective date on this Site and/or provide notice by some other means. You understand and agree that by using the Site following any modifications to the Terms, you agree to be bound by the modified Terms. **Important**: These Terms apply to the Site and your use of our developer tools and do not govern your use of Particle Network’s services as a direct end user of Particle Network’s services and products, which are subject to the User Terms.

### 1. Use of the Site

You must be of legal age to enter into contracts where you reside to use our Site. We do not knowingly collect or solicit personally identifiable information from individuals under 18. If you are under 18, please do not attempt to use the Services or send any personal information about yourself to us. If we learn we have collected personal information from an individual under 18, we will delete that information as quickly as possible. You will comply with all applicable laws, rules, and regulations in connection with your use of the Site. You will not violate or attempt to violate the security of the Site or Particle Network's systems or network security, including, without limitation by (i) accessing data not intended for users of the Site or gaining unauthorized access to an account, server or any other computer system; (ii) attempting to probe, scan or test the vulnerability of a system or network or to breach security or authentication measures; (iii) attempting to interfere with the function of the Site, host or network. You may not "**crawl**," "**scrape**," or "**spider**" any portion of the Site (through the use of manual or automated means); (iv) attempt to access another user's private key or other login information to a digital asset wallet without such user's explicit consent subject to a previously disclosed privacy policy; (v) framing or mirroring any part of the Site without our express prior written consent; or (vi) impersonating or pretending to be anyone else but you, falsely stating, or otherwise misrepresenting your affiliation with any person or entity in connection with the Site, or expressly or implicitly suggesting that we endorse any statement you make.

### 2. Information Not Confidential

If you choose to contact any Particle Network personnel using the contact information you find on the Site, you understand any information and/or materials you provide to such personnel will not be treated as confidential or proprietary. Particle Network undertakes no obligation to review information submitted by you or to return such information to you.

### 3. Particle Network Proprietary Rights

The Site, including all of its contents (including, text, images, audio, and the HTML used to generate the pages) (“**Content**”), are the property of Particle Network or that of our suppliers or licensors and are protected trademark, copyright, and/or other intellectual property laws. You may not download, copy, print, display, perform, reproduce, publish, modify, prepare derivative works from, license, transmit, or distribute any Content from this Site in whole or in part, for any public or commercial purpose without prior written consent from Particle Network. Particle Network grants you a limited, personal, non-exclusive, non-transferable license to access the Site and to use the Content, solely for personal, internal, and non-commercial purposes. Particle Network (on behalf of itself and its suppliers and licensors) reserves all rights not expressly granted herein. Without limiting the foregoing, as between you and Particle Network, Particle Network is the owner and/or authorized user of any trademark, registered trademark, logo, and/or service mark appearing on the Site (the “**Marks**”). Nothing on the Site should be construed to grant any license or right to use any Particle Network Mark. You may not use or exploit any Marks without prior written consent from Particle Network.

### 4. Links from and to the Site

The Site may contain links to third-party websites (“**Third Party Sites**”). Third-Party Sites are not reviewed, controlled, or examined by Particle Network in any way and Particle Network is not responsible for any content contained therein. These links do not imply Particle Network’s endorsement of, or association with, any Third Party Site. Particle Network is not liable, directly or indirectly, to anyone for any loss or damage arising from or in connection with the use of the Third Party Sites.

### 5. Reporting Suspected Vulnerabilities

If you would like to report a vulnerability or have a security concern regarding our user-facing and developer-related services, SDK, API, infrastructure, architecture etc., please e-mail [help@particle.network](mailto:help@particle.network).

### 6. Disclaimer of Warranties

THE SITE, INCLUDING, WITHOUT LIMITATION, THE SITE AND ALL CONTENT AND FUNCTIONALITY THEREOF, IS PROVIDED "**AS IS**," WITHOUT WARRANTY OF ANY KIND, INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF AVAILABILITY, ACCURACY, COMPLETENESS, USEFULNESS, TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE, AND PARTICLE NETWORK (ON BEHALF OF ITSELF AND ITS SUPPLIERS AND LICENSORS) HEREBY DISCLAIMS ANY AND ALL WARRANTIES, EXPRESS OR IMPLIED. NO ADVICE, RESULTS, INFORMATION OR MATERIALS, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY MADE HEREIN. NO CONTENT CAN OR SHOULD BE CONSTRUED AS PROFESSIONAL ADVICE OF ANY KIND (INCLUDING BUSINESS, INVESTMENT, ACCOUNTING, TAX, AND/OR LEGAL ADVICE).

### 7. Limitation of Liability

TO THE GREATEST EXTENT PERMITTED UNDER APPLICABLE LAW, IN NO EVENT WILL PARTICLE NETWORK, ITS AFFILIATES (INCLUDING AFFILIATED FUNDS) OR ANY OF ITS OR THEIR RESPECTIVE DIRECTORS, OFFICERS, EMPLOYEES, AGENTS, SUPPLIERS OR LICENSORS (THE "**PARTICLE NETWORK PARTIES**"), BE LIABLE FOR ANY INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL, EXEMPLARY OR PUNITIVE DAMAGES ARISING FROM OR IN CONNECTION WITH THE USE OF, OR THE INABILITY TO USE, THE SITE OR THE CONTENT, EVEN IF ANY PARTICLE NETWORK PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. SOME JURISDICTIONS DO NOT ALLOW THE LIMITATION OR EXCLUSION OF LIABILITY SO SOME OF THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU. IN NO EVENT WILL THE TOTAL LIABILITY OF ANY PARTICLE NETWORK PARTY TO YOU FOR ALL DAMAGES, LOSSES, AND CAUSES OF ACTION (WHETHER IN CONTRACT OR TORT, INCLUDING, BUT NOT LIMITED TO, NEGLIGENCE OR OTHERWISE) ARISING FROM OR RELATED TO THE TERMS, THE CONTENT, AND/OR YOUR USE OF THE SITE, EXCEED, IN THE AGGREGATE, \$100.00.

### 8. General Information

These Terms are governed by the laws of the State of California, without regard to the conflicts of laws provisions thereof. In the event of any dispute arising in connection with these Terms, you hereby consent to exclusive jurisdiction and venue in the state and federal courts of San Francisco County, California. The failure of Particle Network to exercise or enforce any right or provision of these Terms does not constitute a waiver of such right or provision. If any provision of these Terms is found by a court of competent jurisdiction to be invalid, that provision will be limited or eliminated, to the minimum extent necessary, so that these Terms shall otherwise remain in full force and effect and enforceable. You may not assign these Terms or transfer any of your rights or obligations hereunder without Particle Network’s express written consent. These Terms inure to the benefit of Particle Network’s successors, assigns, and licensees. These Terms are the entire agreement between you and Particle Network with respect to the subject matter herein.

### 9. Further Information You Give Us In Relation to the Particle Network Site and Particle Network Services.

Further information we collect from you in relation to [https://particle.network/](https://particle.network/) (the “Particle Network Site”) and Particle Network Services may include:

1. Further identity information, such as your country of birth, nationality, social security number, place of birth, employer, and occupation;
2. Passport and/or photo ID for identity verification purposes;
3. Information required to comply with anti-money laundering (AML) laws and know-your-customer (KYC) requirements (such as nationality and place of birth);
4. Source of funds for participating in token launches;
5. and Information that you give us in relation to your purchased token holdings, such as earnings received from staking, and the number of tokens in your wallet.

### 10. Company Information

Name: **MINI JOY GLOBAL PTE. LTD.**

Reg Number: **202014032M**

Address: **1 RAFFLES PLACE #50 ONE RAFFLES PLACE SINGAPORE (048616)**


# External Tutorials
Source: https://developers.particle.network/intro/tutorials-and-demos/list

Third-party tutorials on using Particle Network's SDKs.

<CardGroup>
  <Card title="Moralis Auth API with Particle Connect" href="https://docs.moralis.io/authentication-api/evm/how-to-sign-in-with-particle">
    Tutorial on integrating Moralis Auth API with Particle Connect.
  </Card>

  <Card title="ZeroDev with Particle Auth" href="https://docs.zerodev.app/sdk/signers/particle">
    Guide to using ZeroDev with Particle Auth.
  </Card>

  <Card title="Stackup with Particle Auth" href="https://docs.stackup.sh/docs/particle-demo">
    Steps to integrate Stackup with Particle Auth.
  </Card>

  <Card title="Account Kit with Particle Auth" href="https://accountkit.alchemy.com/packages/aa-signers/particle/introduction.html">
    Introduction to using Account Kit with Particle Auth.
  </Card>

  <Card title="Pimlico with Particle Auth" href="https://docs.pimlico.io/permissionless/how-to/signers/particle-network">
    How to use Pimlico with Particle Auth.
  </Card>

  <Card title="Particle on Astar zkEVM" href="https://docs.astar.network/docs/build/zkEVM/integrations/account-abstraction/particle-network/">
    Guide to integrating Particle on Astar zkEVM.
  </Card>

  <Card title="Particle on Polygon" href="https://docs.polygon.technology/tools/wallets/particle-network">
    Tutorial on using Particle with Polygon.
  </Card>

  <Card title="Particle on Gnosis" href="https://docs.gnosischain.com/concepts/account-abstraction/particle-network">
    Steps to integrate Particle on Gnosis.
  </Card>

  <Card title="Particle on Moonbeam" href="https://docs.moonbeam.network/builders/integrations/wallets/particle-network/">
    Guide to using Particle on Moonbeam.
  </Card>

  <Card title="Particle on Mantle" href="https://docs.mantle.xyz/network/for-devs/resources-and-tooling/particle-aa-sdk">
    Tutorial on integrating Particle on Mantle.
  </Card>

  <Card title="Particle on Klaytn" href="https://docs.klaytn.foundation/docs/build/tools/wallets/wallet-libraries/particle/">
    Steps to use Particle on Klaytn.
  </Card>

  <Card title="Particle on COMBO" href="https://docs.combonetwork.io/developer/tutorials/particle.html">
    Guide to integrating Particle on COMBO.
  </Card>

  <Card title="Particle on SKALE" href="https://docs.skale.network/tools/wallets/particle-network">
    Tutorial on using Particle on SKALE.
  </Card>

  <Card title="Particle on PlatON" href="https://platonnetwork.github.io/docs/en/Particle_Network_Integration_for_PlatON">
    Steps to integrate Particle on PlatON.
  </Card>

  <Card title="Particle on ZetaChain" href="https://www.zetachain.com/docs/developers/services/particle/">
    Guide to using Particle on ZetaChain.
  </Card>

  <Card title="Particle on Celo" href="https://docs.celo.org/developer/particle-network">
    Tutorial on integrating Particle on Celo.
  </Card>

  <Card title="Particle on Arbitrum" href="https://docs.arbitrum.io/for-devs/third-party-docs/Particle/">
    Steps to use Particle on Arbitrum.
  </Card>

  <Card title="Particle on Merlin Chain" href="https://docs.merlinchain.io/merlin-docs/developers/quick-start/connecting-to-merlin-via-btc-wallet">
    Guide to integrating Particle on Merlin Chain.
  </Card>

  <Card title="Particle on SatoshiVM" href="https://docs.satoshivm.io/developer-guide/btc-connect">
    Tutorial on using Particle on SatoshiVM.
  </Card>

  <Card title="Particle on B²" href="https://docs.bsquared.network/for-developers/account_abstraction_with_particle_network">
    Steps to integrate Particle on B².
  </Card>

  <Card title="Particle on Base" href="https://docs.base.org/tutorials/account-abstraction-with-particle-network">
    Guide to using Particle on Base.
  </Card>

  <Card title="Particle on Botanix" href="https://docs.botanixlabs.xyz/botanix-labs/build-dapps/tools/account-abstraction-with-btc-connect">
    Tutorial on integrating Particle on Botanix.
  </Card>

  <Card title="Particle on Bitlayer" href="https://docs.bitlayer.org/docs/Build/DeveloperResources/BTC-Connect">
    Steps to use Particle on Bitlayer.
  </Card>
</CardGroup>


# Example Repositories
Source: https://developers.particle.network/intro/tutorials-and-demos/repositories

Collection of demos and examples application using Particle Network's products.

## Particle Auth

<CardGroup>
  <Card title="particle-aa-signers-demo" href="https://github.com/TABASCOatw/particle-aa-signers-demo">
    Example application for leveraging the Particle aa-signers package within Alchemy's Account Kit.
  </Card>

  <Card title="particle-taiko-demo" href="https://github.com/TABASCOatw/particle-taiko-demo">
    Demo application for leveraging Taiko within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-pgn-demo" href="https://github.com/TABASCOatw/particle-pgn-demo">
    Demo application for using PGN within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-zksync-demo" href="https://github.com/TABASCOatw/particle-zksync-demo">
    Demo application for leveraging Particle Auth Core on zkSync.
  </Card>

  <Card title="particle-combo-demo" href="https://github.com/TABASCOatw/particle-combo-demo">
    Demo application for leveraging Particle Auth Core (Smart WaaS) on COMBO.
  </Card>

  <Card title="particle-scroll-demo" href="https://github.com/TABASCOatw/particle-scroll-demo">
    Demo application for leveraging Scroll within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-x1-demo" href="https://github.com/TABASCOatw/particle-x1-demo">
    Demo application for leveraging Particle Auth Core (Smart WaaS) on X1.
  </Card>

  <Card title="particle-base-demo" href="https://github.com/TABASCOatw/particle-base-demo">
    Demo application for leveraging Particle Auth Core (Smart WaaS) on Base.
  </Card>

  <Card title="particle-zetachain-demo" href="https://github.com/TABASCOatw/particle-zetachain-demo">
    Demo application for leveraging ZetaChain within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-auth-core-demo" href="https://github.com/TABASCOatw/particle-auth-core-demo">
    Demo application for implementing the Particle Auth Core SDK within React applications.
  </Card>

  <Card title="particle-fantom-demo" href="https://github.com/TABASCOatw/particle-fantom-demo">
    Demo application for leveraging Fantom Mainnet within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-polygon-zkevm-demo" href="https://github.com/TABASCOatw/particle-polygon-zkevm-demo">
    Demo application for leveraging Polygon zkEVM within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-readon-demo" href="https://github.com/TABASCOatw/particle-readon-demo">
    Demo application for leveraging ReadON within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-moonriver-demo" href="https://github.com/TABASCOatw/particle-moonriver-demo">
    Demo application for leveraging Moonriver within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-viction-demo" href="https://github.com/TABASCOatw/particle-viction-demo">
    Demo application for leveraging Viction within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-gnosis-demo" href="https://github.com/TABASCOatw/particle-gnosis-demo">
    Demo application for leveraging Gnosis within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-astar-demo" href="https://github.com/TABASCOatw/particle-astar-demo">
    Demo application for leveraging Astar zkEVM within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-auth-avalanche-example" href="https://github.com/TABASCOatw/particle-auth-avalanche-example">
    Example for implementing Particle Auth within Avalanche applications to enable social login.
  </Card>

  <Card title="particle-solana-google-example" href="https://github.com/TABASCOatw/particle-solana-google-example">
    Example application for Solana "Sign in with Google" integration via. Particle Auth.
  </Card>

  <Card title="particle-wallet-adapter-example" href="https://github.com/TABASCOatw/particle-wallet-adapter-example">
    Example application for native Particle Auth integration within Solana's wallet-adapter.
  </Card>

  <Card title="vue-vite-starter" href="https://github.com/Particle-Network/particle-web-demo/tree/master/packages/vue-vite-starter">
    Example application using Particle Connect and Vue3.
  </Card>

  <Card title="particle-avalanche-auth-core-demo" href="https://github.com/TABASCOatw/particle-avalanche-auth-core-demo">
    Example application for leveraging Particle Auth Core for social logins within applications built on Avalanche.
  </Card>

  <Card title="particle-mantle-demo" href="https://github.com/TABASCOatw/particle-mantle-demo">
    Demo application for using Particle Auth Core on Mantle.
  </Card>

  <Card title="particle-linea-demo" href="https://github.com/TABASCOatw/particle-linea-demo">
    Demo application for using Particle Auth Core on Linea.
  </Card>

  <Card title="particle-kava-demo" href="https://github.com/TABASCOatw/particle-Kava-demo">
    Demo application for using Particle Auth Core on Kava.
  </Card>

  <Card title="particle-berachain-demo" href="https://github.com/TABASCOatw/particle-berachain-demo">
    Example application for leveraging Particle Auth Core for social logins within applications built on Berachain.
  </Card>

  <Card title="particle-arbitrum-demo" href="https://github.com/TABASCOatw/particle-arbitrum-demo">
    Example application for leveraging Particle Auth Core for social logins within applications built on Arbitrum.
  </Card>

  <Card title="particle-blast-demo" href="https://github.com/TABASCOatw/particle-blast-demo">
    Example application for leveraging Particle Auth Core for social logins within applications built on Blast.
  </Card>

  <Card title="particle-celo-demo" href="https://github.com/TABASCOatw/particle-celo-demo">
    Example application for leveraging Particle Auth Core for social logins within applications built on Celo.
  </Card>

  <Card title="particle-web3modal-v3-demo" href="https://github.com/TABASCOatw/particle-web3modal-v3-demo">
    Example repository showcasing the implementation of Particle Auth with Web3Modal V3.
  </Card>
</CardGroup>

***

## Account Abstraction

<CardGroup>
  <Card title="particle-session-key-demo" href="https://github.com/TABASCOatw/particle-session-key-demo">
    Demo application for leveraging session keys natively within Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-zerodev-demo" href="https://github.com/TABASCOatw/particle-zerodev-demo">
    Demo application for leveraging ZeroDev with Particle's Wallet-as-a-Service.
  </Card>

  <Card title="particle-stackup-demo" href="https://github.com/TABASCOatw/particle-stackup-demo">
    Demo application for leveraging Stackup with Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-pimlico-demo" href="https://github.com/TABASCOatw/particle-pimlico-demo">
    Demo application for leveraging Pimlico with Particle's Smart Wallet-as-a-Service.
  </Card>

  <Card title="particle-account-kit-demo" href="https://github.com/TABASCOatw/particle-account-kit-demo">
    Example application for using Particle as a signer in Alchemy's Account Kit.
  </Card>

  <Card title="particle-openfort-demo" href="https://github.com/TABASCOatw/particle-openfort-demo">
    Demo application for leveraging Particle Network along with Openfort for the utilization of session keys.
  </Card>

  <Card title="particle-biconomy-sdk-demo" href="https://github.com/TABASCOatw/particle-biconomy-sdk-demo">
    Demo application for using Biconomy's Particle Auth SDK to send gasless transactions.
  </Card>
</CardGroup>

***

## Particle Connect

<CardGroup>
  <Card title="particle-connect-boilerplate" href="https://github.com/TABASCOatw/particle-connect-boilerplate">
    Boilerplate demo application for facilitating wallet connection with Particle Connect.
  </Card>

  <Card title="custom-connect-starter" href="https://github.com/Particle-Network/particle-web-demo/tree/master/packages/custom-connect-starter">
    Demo application using Particle Connect with `create-react-app`,
  </Card>

  <Card title="next-connect-starter" href="https://github.com/Particle-Network/particle-web-demo/tree/master/packages/next-connect-starter">
    Demo application using Particle Connect with Next.js,
  </Card>

  <Card title="react-connect-starter" href="https://github.com/Particle-Network/particle-web-demo/tree/master/packages/react-connect-starter">
    Demo application using Particle Connect with `create-react-app`,
  </Card>

  <Card title="vue-vite-starter" href="https://github.com/Particle-Network/particle-web-demo/tree/master/packages/vue-vite-starter">
    Example application using Particle Connect with Vue3.
  </Card>

  <Card title="particle-avalanche-connect-demo" href="https://github.com/TABASCOatw/particle-avalanche-connect-demo">
    Demo application for implementing Particle Connect within applications built on Avalanche.
  </Card>
</CardGroup>

***

## BTC Connect

<CardGroup>
  <Card title="particle-bsquared-demo" href="https://github.com/TABASCOatw/particle-bsquared-demo">
    Demo application for leveraging BTC Connect from Particle Network on B².
  </Card>

  <Card title="particle-bevm-demo" href="https://github.com/TABASCOatw/particle-bevm-demo">
    Demo application for leveraging BTC Connect from Particle Network on BEVM.
  </Card>

  <Card title="particle-btc-connect-demo" href="https://github.com/TABASCOatw/particle-btc-connect-demo">
    Generalized demo application for leveraging BTC Connect.
  </Card>

  <Card title="particle-merlin-demo" href="https://github.com/TABASCOatw/particle-merlin-demo">
    Demo application for leveraging BTC Connect from Particle Network on Merlin.
  </Card>

  <Card title="particle-satoshivm-demo" href="https://github.com/TABASCOatw/particle-satoshivm-demo">
    Demo application for leveraging BTC Connect from Particle Network on SatoshiVM.
  </Card>
</CardGroup>

***

## Other

<CardGroup>
  <Card title="particle-rainbowkit-boilerplate" href="https://github.com/TABASCOatw/particle-rainbowkit-boilerplate">
    Boilerplate application for Particle Auth integration within RainbowKit.
  </Card>

  <Card title="rainbowkit-next-starter" href="https://github.com/Particle-Network/particle-web-demo/tree/master/packages/rainbowkit-next-starter">
    Next.js started using Particle Auth with RainbowKit.
  </Card>

  <Card title="particle-inscription-demo" href="https://github.com/TABASCOatw/particle-inscription-demo">
    Example application for minting inscriptions with smart accounts through Particle Auth Core.
  </Card>
</CardGroup>


# Video Walkthroughs
Source: https://developers.particle.network/intro/tutorials-and-demos/videos

Video walkthroughs on integrating Particle's SDKs and APIs.

<div>
  <a href="https://twitter.com/TABASCOweb3/status/1717549871811469450">
    <img alt="Leveraging Pimlico's Bundler & Paymaster with Particle Smart WaaS" />
  </a>

  <a href="https://twitter.com/TABASCOweb3/status/1715034613184147721">
    <img alt="Leveraging Alchemy's Account Kit with Particle WaaS" />
  </a>

  <a href="https://twitter.com/ParticleNtwrk/status/1712423989296214252">
    <img alt="Leveraging AA with Particle WaaS + Biconomy to send gasless transactions" />
  </a>

  <a href="https://twitter.com/TABASCOweb3/status/1715667302278918578">
    <img alt="Using Particle Connect with Solana to facilitate social login or connection with Phantom" />
  </a>

  <a href="https://twitter.com/TABASCOweb3/status/1709900102494777414">
    <img alt="Adding Social Login via Solana wallet-adapter & Particle Auth" />
  </a>

  <a href="https://twitter.com/TABASCOweb3/status/1713146824511684855">
    <img alt="Utilizing Session Keys with Particle Waas and Openfort to send popup-less, gasless transactions" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1728299016759157057">
    <img alt="Leveraging  Smart Wallet-as-a-Service on Zetachain to deploy a smart account and send gasless transactions" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1735262274246365545">
    <img alt="Leveraging  Smart Wallet-as-a-Service on Taiko to onboard users through social login and send gasless transactions" />
  </a>

  <a href="https://twitter.com/TABASCOweb3/status/1717549871811469450">
    <img alt="Leveraging  Pimlico's Bundler & Paymaster with Particle Smart WaaS" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1733350758366490682">
    <img alt="Leveraging  Wallet-as-a-Service on zkSync Era to facilitate application interaction through social login" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1734422912893853799">
    <img alt="Leveraging  Smart Wallet-as-a-Service on X1 to create and use a smart account through social login" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1737793254181982304">
    <img alt="Leveraging  Smart Wallet-as-a-Service on Mantle to onboard users through social logins and execute gasless transactions" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1735945124461334900">
    <img alt="Leveraging  Smart Wallet-as-a-Service on Linea to integrate social logins and account abstraction within applications built on Linea" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1718184402969059421">
    <img alt="Using Particle WaaS with ZeroDev to create a smart account and send transactions" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1738169314044182818">
    <img alt="Leveraging  inscriptions with Smart Wallet-as-a-Service in just 13 minutes" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1727513542830526875">
    <img alt="Leveraging  Smart Wallet-as-a-Service on Fantom to deploy a smart account and send transactions" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1753491881244127496">
    <img alt="Exploring the new Particle Network documentation" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1728110634628190523">
    <img alt="The New Particle Auth Core SDK for Web for curating customized, application-embedded social logins" />
  </a>

  <a href="https://twitter.com/TABASCOweb3/status/1735594992805068942">
    <img alt="Utilizing Alchemy's Account Kit with Particle WaaS through aa-signers" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1712401528039092640">
    <img alt="Using Particle Connect with Solana to facilitate social logins or connection with Phantom" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1715034613184147721">
    <img alt="Leveraging Alchemy's Account Kit with Particle WaaS" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1710546274435621330">
    <img alt="Integrating Particle Auth within Avalanche dApps to Enable Social Logins" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1753307737675690180">
    <img alt="Implementing Smart Wallet-as-a-Service on Blast in just 15 minutes" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1747148253366272259">
    <img alt="Minting Inscriptions with Smart Accounts for batched, gasless, popup-less transactions" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1753742995805859922">
    <img alt="Leveraging  Account Abstraction on BEVM - Next-generation UX with BTC Connect" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1755761894130864396">
    <img alt="Leveraging  BTC Connect on B²" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1764895133944709523">
    <img alt="Leveraging  BTC Connect on Merlin Chain" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1750072016076464467">
    <img alt="Leveraging  BTC Connect in just 15 minutes" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1760290446155161885">
    <img alt="Implementing Modular Smart Wallet-as-a-Service on Berachain" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1778462554794135768">
    <img alt="Implementing Particle Network's Smart Wallet-as-a-Service Social Logins on Mode in just 14 minutes" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1766318618420068444">
    <img alt="Enabling AA-Powered Social Logins on Core in only 14 minutes" />
  </a>

  <a href="https://x.com/TABASCOweb3/status/1782609523812778289">
    <img alt="Integrating BTC Connect In 5 Minutes" />
  </a>
</div>


# Introduction to Universal Accounts
Source: https://developers.particle.network/intro/universal-accounts

One account, one balance, any chain.

**Universal Accounts** give users one account, balance, and interaction point to use across any chain—EVM or not.

Instead of managing different wallets and bridging tokens to interact with dApps on different chains, users interact through a Universal Account as if the entire Web3 ecosystem were one network. This is possible because Particle Network's underlying infrastructure automatically routes liquidity, bridges assets, and manages cross-chain logic using **Universal Liquidity**.

Developers can integrate Universal Accounts easily into their dApps using the [Universal SDK](/universal-accounts/cha/overview). UAs are compatible with both social logins and wallet connections and support gasless, cross-chain operations out of the box.

<Frame>
  <img alt="Universal Accounts" />

  <img alt="Universal Accounts" />
</Frame>

***

# Understanding Universal Accounts

From a technical standpoint, Universal Accounts are smart contract account deployments unified and coordinated by Particle Network's **Universal Liquidity** technology across chains. This enables seamless cross-chain transactions and interactions.

## Key Features

### Chain abstraction

* One account, one balance, any chain.
* Automatic bridging and cross-chain interactions on a per-transaction basis.
* Ability to use multiple gas tokens for different operations.
* Seamless asset transfers across chains.

### Smart Account implementation

* Built on the ERC-4337 standard.
* Leverages EIP-7702 to use existing EOA's assets without requiring users to migrate.
* Compatible with existing EOA wallets.
* Support social login integration.

<Frame>
  <img alt="Universal Accounts" />

  <img alt="Universal Accounts" />
</Frame>

## How It Works

1. **Integration**
   * Simple SDK implementation, using any EOA as signer.
   * Compatible with existing dApp infrastructure.
2. **Account Creation**
   * Created via social logins, wallet connection, or private key.
   * Automatic upgrade from EOA to Universal Account (assets instantly available without migrating in 7702 default mode).
3. **Cross-Chain Operations**
   * Transactions submitted are funded using a user's collective onchain balance, automatically bridging as needed to fulfill their intent.
   * Gas can be paid using different available tokens.

<Card title="Try the Universal SDK" icon="code" href="/universal-accounts/cha/web-quickstart">
  Start building with Universal Accounts.
</Card>

<Tip>
  **Try out Universal Accounts**

  Particle Network has built the first chain-agnostic trading app based on Universal Accounts: [UniversalX](https://universalx.app/). Try it out to experience the power of chain abstraction!
</Tip>


# What is Chain Abstraction?
Source: https://developers.particle.network/intro/what-is-cha

The practical benefits of chain abstraction for dApps and users.

<Frame>
  <img alt="Chain Abstraction" />

  <img alt="Chain Abstraction" />
</Frame>

# Chain Abstraction

**Chain abstraction** removes the friction of dealing with multiple blockchains.\
With **Universal Accounts**, users and developers interact with Web3 as if it were one unified environment.

***

## What This Means for Users

* **One account and balance** across all chains.
* **Use any token as gas** on any transaction.
* **No bridges or chain switching** required.

***

## What This Means for Developers

* Build your dApp on one chain, serve users from all of them.
* No need to manage cross-chain deployments.
* Unified liquidity, handled automatically in the background.

## Next Steps

<CardGroup>
  <Card title="Integrate Chain Abstraction" icon="code" href="/universal-accounts/cha/web-quickstart">
    Start building with Universal Accounts.
  </Card>

  <Card title="See It Live: UniversalX" icon="layer-group" href="https://universalx.app">
    Try UniversalX, a chain-agnostic trading app powered by Universal Accounts.
  </Card>
</CardGroup>


# What is Particle Network?
Source: https://developers.particle.network/intro/what-is-particle-network

Overview of Particle Network's products and mission.

# What is Particle Network?

Web3 today is fragmented across hundreds of chains, wallets, and bridges.

Particle Network’s mission is to make **Web3 retail-ready** by solving multi-chain fragmentation and building a user experience that feels as natural as Web2's.

We do this through a stack of products designed to remove friction for both users and developers, unifying Web3 into the way it should be:

* One account.
* One balance.
* Any chain.

***

## Chain Abstraction

Chain Abstraction is the foundation of Particle Network.
It allows users to interact with any dApp, on any supported chain, using a **single account and unified balance**—without worrying about bridges or network switching.

At the core of this are **Universal Accounts**, which enable:

* **One account, one balance, any chain**: Assets across all chains are automatically combined into one balance.
* **Chain-agnostic UX**: Users can spend tokens from anywhere, on any chain.
* **Universal Gas**: Users can pay fees in any supported token, regardless of the network.

<Card title="Start with Universal Accounts" icon="wand-magic-sparkles" href="/universal-accounts/cha/web-quickstart">
  Build your first chain-agnostic dApp with Universal Accounts.
</Card>

***

## Social Logins

Onboarding is still one of the biggest blockers in Web3. Particle’s **Social Logins** let users access dApps with credentials they already know — Google, Twitter, Discord, and more — while automatically creating a wallet behind the scenes.

* **One-click onboarding** for mainstream users.
* **Non-custodial** by design, with keys split and secured.
* **Developer-ready SDKs** to add login flows in minutes.

<Card title="Integrate Social Logins" icon="address-card" href="/social-logins/overview">
  Add fast, familiar onboarding to your dApp.
</Card>

***

## Account Abstraction (ERC-4337)

Particle also provides infrastructure for **ERC-4337 Account Abstraction**, enabling programmable smart accounts with powerful UX improvements:

* **Gas sponsorship**: Users can transact without holding native gas tokens.
* **Batched transactions**: Bundle multiple actions into a single click.
* **Custom logic**: Recovery flows, spending limits, and more.

<Card title="Explore Account Abstraction" icon="cogs" href="/aa/introduction">
  Implement ERC-4337 smart accounts in your dApp.
</Card>


# What is Universal Liquidity?
Source: https://developers.particle.network/intro/what-is-ul

Overview of Particle Network’s liquidity mechanism powering Universal Accounts.

**Universal Liquidity** allows **Universal Accounts** to fulfill user actions without requiring them to **bridge** or manually move assets across chains. It routes funds across **solvers** with liquidity on supported networks based on the user’s **intent**, allowing them to interact with all chains as if they were **one**.

***

## How It Works

When a user performs an action on a chain where they don’t hold funds, Universal Liquidity handles the **cross-chain** complexity behind the scenes. **Liquidity sources** and **solvers** operate across networks to execute the transaction.

**Flow:**

1. The user initiates the action (**swap**, **mint**, **deposit**, etc.) and signs once to **authorize** it. No preparation of assets or **gas** on the target chain is required.
2. The **signature** conveys what the user wants to do and confirms they can cover the **cost**.
3. **Solvers** detect the request and temporarily provide the required **liquidity** on the destination chain. They:
   * Execute the transaction on the user’s behalf
   * Cover the required **costs upfront**
   * Recoup the value afterward from the user’s **balances** on any chain
4. The transaction finalizes on the **destination network**.

The user’s funds **never move beforehand**. The solver only fronts the required liquidity, then withdraws **repayment** from the user’s existing balances according to the signed authorization.

A **solver** is simply an **on-chain entity** with liquidity (e.g., an **LP** holding **USDT** or another [**Primary Token**](/universal-accounts/cha/chains)). Particle currently operates the liquidity pools, with the goal of enabling **permissionless** participation in the future.

***

## Example

A user holds:

* **100 USDC** on Base
* **0.1 BNB** (\~\$90) on BNB Chain
* **0.3 SOL** (\~\$40) on Solana

They want to execute a transaction that requires **200 USDC on Ethereum**. A solver provides **200 USDC** on Ethereum and then receives **repayment** across the user’s existing balances, plus a small **fee**.

<Frame>
  <img alt="Universal Liquidity" />

  <img alt="Universal Liquidity" />
</Frame>

***

## Gas Abstraction

Universal Liquidity also removes the requirement to hold **native gas tokens** on every chain. **Paymasters** cover **gas fees** on the user’s behalf, then settle repayment afterward using **any supported asset** — even if that asset is on another chain.

**Flow:**

1. User signs to authorize the operation and **repayment**.
2. **Paymaster** fronts the gas immediately.
3. Transaction executes on the **target chain**.
4. Repayment is deducted afterward using available **balances**.

A **single signature** is enough to complete **cross-chain** operations while advancing both **liquidity** and **gas**.

***

## TL;DR

Universal Liquidity enables:

* Assets across chains to function as **one unified liquidity source**
* Execution of transactions using **any combination** of a user’s balances
* Removal of **bridging**, **gas concerns**, and **balance fragmentation**

***

## Get Started with Universal Accounts

Learn how to integrate **Universal Accounts** into your application.

<CardGroup>
  <Card title="Integrate Chain Abstraction" icon="code" href="/universal-accounts/cha/web-quickstart">
    Start building with Universal Accounts.
  </Card>
</CardGroup>


# Common API Errors
Source: https://developers.particle.network/social-logins/api/debug/api

Learn about a number of common errors you may run into while building your application.

## Understanding Common API Errors

When using both our SDKs and APIs/RPCs, there are a number of common errors you may run into while building your application. This page is intended to list as many of these errors as possible and highlight what may cause them, thus adding clarity to the standard return messages attached to the errors. For SDK-specific errors, look at [Common SDK Errors](/social-logins/api/debug/sdk).

***

## Error codes

| Code                           | Possible Return Message                                                         | Cause                                                                                                                                                                                                                                                                                               |
| :----------------------------- | :------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **System Errors**              |                                                                                 |                                                                                                                                                                                                                                                                                                     |
| 10001                          | System error                                                                    | System error, or 10001, gets thrown when an internal JSON-RPC error occurs, referring to an error beneath the layer you're directly interacting with.                                                                                                                                               |
| 10002                          | Invalid parameters                                                              | When the parameters of a given RPC/API request are incorrect or missing, 10002 is thrown. Refer to the [Introduction to API & SDK overview](/social-logins/api/introduction) section for more details.                                                                                              |
| **Common Errors: 401xx**       |                                                                                 |                                                                                                                                                                                                                                                                                                     |
| 40101                          | User not exists                                                                 | Accessing an invalid user (a Particle Auth wallet instance that's connected to your application and thus exposed a UUID and Token) will throw 40101, or "User not exists."                                                                                                                          |
| 40102                          | Authentication failed                                                           | Initializing Particle Auth (or associated SDKs) requires a `projectId`, `clientKey`, and `appId`, if these are invalid, the error "Authentication failed" is returned.                                                                                                                              |
| 40103                          | Address not exists                                                              | If you attempt to execute a method that takes a public address as a parameter, and this address is invalid, 40103 is thrown.                                                                                                                                                                        |
| 40104                          | Insufficient funds                                                              | 40104, or "Insufficient funds," is a common error given when a transaction (state-changing action requiring funds) is attempted while the sender has a balance lower than the minimum required to execute the transaction.                                                                          |
| 40105                          | EIP-1559: Invalid fee setting                                                   | 40105 occurs when attempting to execute a transaction with an invalid EIP-1159 fee setting (priority fee). Retrieve gas fees with [suggestedGasFees](/social-logins/api/evm/suggestedgasfees).                                                                                                      |
| 40106                          | Nonce error                                                                     | Backed up RPC endpoints or attempting to send transactions in quick succession may throw 40106, which results from an invalid nonce order (value `nonce` on your attempted transaction).                                                                                                            |
| 40107                          | Cancel the biggest nonce first                                                  | When attempting to cancel a transaction, 40107 will be returned if this cancellation targets a nonce lower than the largest known.                                                                                                                                                                  |
| 40108                          | Transaction confirmed                                                           | Confirmed transactions can no longer be canceled or sped up, thus if you attempt to do this, error 40108 will occur.                                                                                                                                                                                |
| 40109                          | gasLimit too low                                                                | Attempting to send a transaction with a low `gasLimit` (sometimes expressed as `gas`). Increase your units of gas represented within this variable or estimate the gas with `estimateGas`.                                                                                                          |
| 40110                          | JSON-RPC request body error                                                     | Parameters or values passed into the request body that may be invalid will result in error 40110 ("JSON-RPC request body error") being returned.                                                                                                                                                    |
| 40113                          | EIP-1559 transaction is not supported                                           | When sending or constructing a transaction using EIP-1559 (often determined by `type` being `2`) that is invalid or not supported in that specific context, you'll encounter error 40113.                                                                                                           |
| **Solana Errors: 402xx**       |                                                                                 |                                                                                                                                                                                                                                                                                                     |
| 40201                          | Transaction Error                                                               | Attempting to send an invalid or failing transaction on Solana via. JSON-RPC will return 40201, indicating that the transaction itself likely has an underlying issue.                                                                                                                              |
| 40202                          | You can not settle the auction because you have not participated in the auction | *Returned apart of the old Metaplex/Action House API endpoints, not listed on developers.particle.network*                                                                                                                                                                                          |
| 40203                          | You are not the creator of this metadata                                        | *Returned apart of the old Metaplex/Action House API endpoints, not listed on developers.particle.network*                                                                                                                                                                                          |
| 40204                          | Auction is not in Started state                                                 | *Returned apart of the old Metaplex/Action House API endpoints, not listed on developers.particle.network*                                                                                                                                                                                          |
| 40205                          | Metadata already exists                                                         | *Returned apart of the old Metaplex/Action House API endpoints, not listed on developers.particle.network*                                                                                                                                                                                          |
| 40206                          | No need to unwrap                                                               | *Returned apart of the old Metaplex/Action House API endpoints, not listed on developers.particle.network*                                                                                                                                                                                          |
| **EVM-Specific Errors: 403xx** |                                                                                 |                                                                                                                                                                                                                                                                                                     |
| 40301                          | Swap Error                                                                      | When using endpoints like [getSwap](/social-logins/api/swap/getswap) and [getQuote](/social-logins/api/swap/getquote), if the parameters provided to the endpoint are invalid or will result in a failed swap, 40301 may be returned.                                                               |
| **JSON RPC Errors: -32xxx**    |                                                                                 |                                                                                                                                                                                                                                                                                                     |
| -32700                         | Parse error                                                                     | If the server (the node or database) receives an invalid JSON request body, -32700 will be returned, indicating either an underlying issue or a problem with the values, parameters, or structure used within the request.                                                                          |
| -32600                         | Invalid request                                                                 | Similar to the above, -32600 will be thrown if the request object is an invalid structure or includes invalid parameters. This is a targeted error, while -32700 is generic.                                                                                                                        |
| -32601 / -32006                | Method not found                                                                | Methods are dictated through the `method` parameter within the JSON-RPC request; if this is invalid (doesn't exist), error -32601 will be returned.                                                                                                                                                 |
| -32602                         | Invalid parameters                                                              | More narrowly scoped than -32600, this error (-32602) will be thrown if the parameters themselves were determined as invalid, thus not meeting the server's expectations.                                                                                                                           |
| -32603 & -3200                 | Internal error / System error / Server error                                    | Like 10001, these errors may be thrown if an internal error occurs behind the scenes. This may or may not result from an invalid request. Contact us within the [Particle Network Discord](https://discord.com/invite/2y44qr6CR2) to help troubleshoot.                                             |
| -32001                         | Unsupported chainId                                                             | When passing a `chainId` within the standard JSON-RPC request parameters, -32001 may be returned if this value does not correspond with a currently supported blockchain.                                                                                                                           |
| -32002                         | Arrays are not currently supported                                              | If you're attempting to pass an array as a parameter value through either the [Paymaster RPC](/aa/paymaster/paymasterbalance) or [Bundler RPC](/aa/bundler/getuseroperationreceipt), -32002 will be thrown due to their lack of compatibility as a type within these requests.                      |
| -32003 / -32603                | Not supported entry point                                                       | When attempting to send UserOperations to or interact with an entrypoint that isn't `0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789`, -32003 will be thrown due to the current exclusive compatibility with said entrypoint.                                                                            |
| -32004                         | The UserOP is already processed                                                 | Once a UserOperation has been sent, processed, and thus settled on-chain, it can no longer be re-sent or modified, thus when attempting to do this, -32004 is returned.                                                                                                                             |
| -32005                         | Estimate gas failed                                                             | Gas estimations occur either automatically through something like [createUserOp](/aa/rpc/createuserop), or manually through [getFeeQuotes](/aa/rpc/getfeequotes). If the parameters passed into these requests are invalid or if the transaction may fail, -32005 will possibly be returned.        |
| -32600                         | Invalid Request                                                                 | Sending an invalid request (meaning incorrect parameters, value, or structure) to the [Bundler RPC](/aa/bundler/getuseroperationreceipt) or [Paymaster RPC](/aa/paymaster/paymasterbalance) will result in error -32600, although this is a generalized error with the scope of the entire request. |
| -32602                         | Invalid params                                                                  | Alternatively, for requests to the [Bundler RPC](/aa/bundler/getuseroperationreceipt) or [Paymaster RPC](/aa/paymaster/paymasterbalance) in which the parameters themselves are deemed to be invalid (rather than the entire request), -32602 will be thrown.                                       |
| -32604                         | Send user operation failed                                                      | When sending a UserOperation to the [Bundler RPC](/aa/bundler/getuseroperationreceipt) and it fails due to a variety of potential reasons (balance errors, paymaster issues, account deployment issues, etc.), -32604 is returned.                                                                  |
| -32605                         | Validate user operation failed                                                  | Similar to the above, UserOperations undergoing validation through the [Bundler RPC](/aa/bundler/getuseroperationreceipt) that fail will result in -32605 being returned.                                                                                                                           |
| -32606                         | Simulate user operation failed                                                  | If calling [estimateUserOperationGas](/aa/bundler/estimateuseroperationgas) on a UserOperation that may fail or contains invalid parameters, you may encounter -32606 (or, depending on the nature of the failure, -32600/-32602).                                                                  |
| -32003                         | The sign request is rejected                                                    | Requesting aymaster signature under invalid conditions may result in error -32003, which refers to the rejection of the sponsorship. Ensure you've set your conditions properly and funded the Paymaster.                                                                                           |
| -32004                         | Can not fetch the usd price                                                     | When calling [paymasterBalance](/aa/paymaster/paymasterbalance), the USD price calculation may fail, resulting in error -32004.                                                                                                                                                                     |
| -32005                         | Insufficient deposit for the project                                            | Before leveraging the Particle Network [Omnichain Paymaster](/aa/architecture/omni-paymaster) within your application, you'll need to deposit enough USDT for sponsorship. Failing to do so may result in error -32005 being thrown.                                                                |


# Common SDK Errors
Source: https://developers.particle.network/social-logins/api/debug/sdk

Learn about a number of common errors you may face while using our SDK.

## Understanding SDK Errors

Within Particle Network's SDKs, errors are almost always caught for SDK-related issues, meaning problems related to configuration, compatibility, initialization, etc.

For non-SDK related issues that may stem from external factors within your application (such as webpack/vite/etc. configurations, npm or yarn problems, etc.), you'll need to troubleshoot these manually or reach out to us through the [Particle Network Discord](https://discord.com/invite/2y44qr6CR2).

Additionally, the error you're looking for may be present within [Common API Errors](/social-logins/api/debug/api).

***

## Particle Auth/Connect

| Error message                                                                                                                                                                                                      | Description                                                                                                                                                                                                                                             | Component  |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------- |
| "You need to set project info" OR "Init AuthCore failed" OR "Param error, see doc for more info"                                                                                                                   | This error occurs when attempting to initialize Particle Auth without including your `projectId`, `clientKey`, and `appId`. Head over to the [Particle dashboard](https://dashboard.particle.network) to retrieve and set these.                        | \*         |
| "chain is required when authorization is provided"                                                                                                                                                                 | If initiating social login with `authorization` on Particle Auth Core, `chain` is required and should be a `ChainInfo` object imported from `@particle-network/chains`. Otherwise this error will be thrown.                                            | useConnect |
| "Please init first!" (or some derivative of this)                                                                                                                                                                  | A request for initialization (or init) will be thrown when attempting to access methods that require an underlying account. Ensure you've initialized Particle Auth before calling other methods within the SDK.                                        | \*         |
| "The chainId:  is not supported." (or some derivative of this)                                                                                                                                                     | This will be thrown when attempting to pass a chain ID into a specific function (commonly `sendTransaction`) that isn't supported by Particle Auth. For the full list of supported chains, head to [Network Coverage](/social-logins/network-coverage). | \*         |
| "WebSocket connection closed abnormally with code: 3000 (Authorization error: Unauthorized: invalid key)" OR "WebSocket connection closed abnormally with code: 3000 (Authorization error: Project ID is missing)" | This occurs when using Particle Connect and failing to include a valid WalletConnect project ID within `evmWallets`, or specific wallet adapters. To retrieve this value, head to the [WalletConnect dashboard](https://cloud.walletconnect.com).       | \*         |

***

## Particle AA SDK

| Error message                                                          | Description                                                                                                                                                                                                                                                                                                                                                                                 | Component                                 |
| :--------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------------------- |
| "Please configure the smart account contract first"                    | When calling specific functions that require the context of an initialized smart account, you may encounter this error. To alleviate it, you'll need to ensure you've already constructed a valid instance of `SmartAccount` with a specific smart account chosen.                                                                                                                          | setSmartAccountContract, getAccountConfig |
| "Current chain is not supported, chainId: , please configure it first" | Upon assigning a smart account within `SmartAccount` and choosing a specific `chainId` (through `chainIds`), you may encounter this issue if the chain you're attempting to use to initialize the smart account is not supported by that implementation. Remember that different account implementations (SimpleAccount, Biconomy, CyberConnect) are each compatible with different chains. | getAccountConfig                          |
| "Only BICONOMY 2.0.0 is supported"                                     | Session keys are currently supported on instances of `BICONOMY 2.0.0`. When attempting to call `createSessions` or `validateSession` on different account implementations, this error will be thrown. Ensure `SmartAccount` is configured to use `biconomy` version `2.0.0`.                                                                                                                | createSessions, validateSession           |
| "sendTxMode value error, must be in "                                  | When setting `SendTransactionMode` on `AAWrapProvider`, you'll need to use either `SendTransactionMode.Gasless`, `SendTransactionMode.UserPaidNative`, or `SendTransactionMode.UserSelect`, otherwise this error will be thrown.                                                                                                                                                            | AAWrapProvider                            |
| "AA21 didn't pay prefund"                                              | This is a generic error a Bundler issues when a given smart account does not have the funds for a user operation. In this case, it will most likely occur upon account initialization (the first UserOperation sent by the wallet). Ensure you're either sponsoring the gas fees or have funded the account.                                                                                | *Generic*                                 |
| "AA31 paymaster deposit too low"                                       | AA31 stems from insufficient funds within the Paymaster to sponsor a given transaction. Ensure you've funded the Particle Paymaster (or Biconomy Paymaster) with USDT on either Ethereum or BNB Chain. Your USDT will be automatically converted for multi-chain sponsorships.                                                                                                              | *Generic*                                 |
| "AA25 Invalid Account Nonce"                                           | While unlikely to occur within Particle's AA SDK, there may be scenarios in which nonce management is disrupted, resulting in this error. This may happen if you're sending large volumes of UserOperations from a single account in a short time or if network issues are present and thus an invalid nonce is being returned to the backend of the SDK.                                   | *Generic*                                 |
| "AA"                                                                   | Other issues of this nature (AA), stem directly from the invalid construction or execution of a UserOperation. Feel free to reach out within the [Particle Network Discord](https://discord.com/invite/2y44qr6CR2) for more assistance.                                                                                                                                                     | *Generic*                                 |
| "Account Abstraction Error"                                            | This often acts as the prefix for a generic AA error, such as `AA21 didn't pay prefund`, or other related issues.                                                                                                                                                                                                                                                                           | *Generic*                                 |

***

<Tip>
  <p>More targeted error codes may present themselves while using the SDK</p>
  <p>These aren't covered within this document (example: `personalSign error: {specific error description}`) and often stem from parameter issues or underlying RPC errors (see [Common API Errors](/social-logins/api/debug/sdk)).</p>
</Tip>


# abi_encodeFunctionCall
Source: https://developers.particle.network/social-logins/api/evm/abi_encodefunctioncall

openapi-evm POST /#particle_abi_encodeFunctionCall
Learn how to use the abi_encodeFunctionCall JSON-RPC method.

## Contextualizing `abi_encodeFunctionCall`

* `abi_encodeFunctionCall` takes a contract address, a function name, and an array of function parameters to return an ABI-encoded string that represents the specific function call you intend to make on the smart contract.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 1,
        jsonrpc: '2.0',
        id: 1,
        method: "particle_abi_encodeFunctionCall",
        params: [
            "0xB8c77482e45F1F44dE1745F52C74426C631bDD52", 
            "erc20_transfer", 
            [
                "0x329a7f8b91Ce7479035cb1B5D62AB41845830Ce8", 
                "1000000000000000000"
            ]
        ]
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# crosschain_getNFTs
Source: https://developers.particle.network/social-logins/api/evm/crosschain_getnfts

openapi-evm POST /#particle_crosschain_getNFTs
Learn how to use the crosschain_getNFTs JSON-RPC method.

# Understanding `crosschain_getNFTs`

* `crosschain_getNFTs` is an alternative to `getNFTs` in which NFTs (ERC-721 tokens) can be retrieved for a given address across multiple different EVM chains in the same query. It takes:
  * `Addresses` - an array of strings (either one or more account addresses.)
  * `Chain IDs` - an array of integers.
  * `Contracts` - (optional) an array of strings. It filters based upon specific collection contracts.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 1,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_crosschain_getNFTs',
        params: [
                ['0x6a2C3C4C7169d69A67ae2251c7D765Ac79A4967e', '0xf584F8728B874a6a5c7A8d4d387C9aae9172D621'],
                [1, 4, 137, 80001]
            ],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# deserializeTransaction
Source: https://developers.particle.network/social-logins/api/evm/deserializetransaction

openapi-evm POST /#particle_deserializeTransaction
Learn how to use the deserializeTransaction JSON-RPC method.

## Contextualizing deserializeTransaction

`deserializeTransaction` takes a serialized transaction hash (example below) and returns a human-readable deserialized transaction object, including additional details such as balance changes, method calls, token attributes, etc.

***

**Serialized transaction string example**

```
0x02f8d30182030a843b9aca00850608379d4b8301122e9499ecdf17ded4fcb6c5f0fe280d21f832af464f6780b86442842e0e00000000000000000000000003afc65278e6d37f23bc0b8bf4c9d61bd35edfc8000000000000000000000000a058fb195d274afbae4dc317be362d4e96ffa1b400000000000000000000000000000000000000000000000000000000000006c1c001a0f7e0c908e4b549d24dad47f28205d3437e00b123e9b57bec95dcd61e1fd8065ca053495aaeec3740c0520e7717060a208aac0970dbc30ef3380e3ae9f81f4f6f66
```

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 1,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_deserializeTransaction',
        params: [
            '0x03afc65278e6d37f23bc0b8bf4c9d61bd35edfc8',
            '0x02f8d30182030a843b9aca00850608379d4b8301122e9499ecdf17ded4fcb6c5f0fe280d21f832af464f6780b86442842e0e00000000000000000000000003afc65278e6d37f23bc0b8bf4c9d61bd35edfc8000000000000000000000000a058fb195d274afbae4dc317be362d4e96ffa1b400000000000000000000000000000000000000000000000000000000000006c1c001a0f7e0c908e4b549d24dad47f28205d3437e00b123e9b57bec95dcd61e1fd8065ca053495aaeec3740c0520e7717060a208aac0970dbc30ef3380e3ae9f81f4f6f66',
        ]
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# getContractAbi
Source: https://developers.particle.network/social-logins/api/evm/getcontractabi

openapi-evm POST /#particle_abi_getContractAbi
Learn how to use the getContractAbi JSON-RPC method.

## Contextualizing `getContractAbi`

* `getContractAbi` takes the address of a **verified** contract and returns the complete ABI. It **will return null** if the contract is not verified.

<Tip>
  <p>If you're unsure whether a given contract is verified, Etherscan displays verification status on the **Contract** tab of smart contracts</p>
  Check it at: [https://etherscan.io/address/YOUR\_CONTRACT\_ADDRESS#code](https://etherscan.io/address/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d#code)
</Tip>

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 56,
        jsonrpc: '2.0',
        id: 1,
        method: "particle_abi_getContractAbi",
        params: [
            "0x2170Ed0880ac9A755fd29B2688956BD959F933F8", 
            true,
        ]
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# getLatestBlock
Source: https://developers.particle.network/social-logins/api/evm/getlatestblock

openapi-evm POST /#particle_getLatestBlock
Learn how to use the getLatestBlock JSON-RPC method.

## Contextualizing `getLatestBlock`

* `getlatestBlock` returns a highly detailed response containing both standard and extraneous information about the latest block on the chain associated with `chainId`.

  This response includes full receipts of transactions contained within the latest block. This is non-toggleable.

***

**Returned receipts contain the following attributes**

```json JSON theme={null}
// Example receipt

"blockHash":"0x9468f7e44e89921b38eb4812ec5dc7900ceffc454aecb0a452d9477952062efc",
"blockNumber":"0x11868d0",
"contractAddress":null,
"cumulativeGasUsed":"0x9e0096",
"effectiveGasPrice":"0x3094e55d9",
"from":"0x3527439923a63f8c13cf72b8fe80a77f6e572092",
"gasUsed":"0xbbad2",
"logs":[
   {
      "address":"0x32400084c286cf3e17e7b677ea9583e60a000324",
      "blockHash":"0x9468f7e44e89921b38eb4812ec5dc7900ceffc454aecb0a452d9477952062efc",
      "blockNumber":"0x11868d0",
      "data":"0x",
      "logIndex":"0x1b",
      "removed":false,
      "topics":[
         "0x22c9005dd88c18b552a1cd7e8b3b937fcde9ca69213c1f658f54d572e4877a81",
         "0x0000000000000000000000000000000000000000000000000000000000042fc4",
         "0x0000000000000000000000000000000000000000000000000000000000042fc5"
      ],
      "transactionHash":"0x373c6917650568746f2cb9a99c9250ef5c5fdda380ac0e322779e9532c0d5153",
      "transactionIndex":"0x10"
   }
],
"logsBloom":"0x00000000000000000000000000000000000000000000000000000000000010020000000000000000000002020000000000000000000000000000000000000000100000400000000000000000000000000000000000000000000000000000000000000000000000010000000000000000001000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000400000000000000000000000000000000000000000000000000000000000001000000002000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
"status":"0x1",
"to":"0x3db52ce065f728011ac6732222270b3f2360d919",
"transactionHash":"0x373c6917650568746f2cb9a99c9250ef5c5fdda380ac0e322779e9532c0d5153",
"transactionIndex":"0x10",
"type":"0x2"
```


# getNFTs
Source: https://developers.particle.network/social-logins/api/evm/getnfts

openapi-evm POST /#particle_getNFTs
Learn how to use the getNFTs JSON-RPC method.

# Understanding `getNFTs`

* `getNFTs`, alike `getTokens`, retrieves a detailed list of NFTs (ERC721 tokens) belonging to a given public address. It takes:
  * `Address` - string.
  * `Token addresses` - (optional), an array of strings.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 1,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_getNFTs',
        params: ['0x329a7f8b91Ce7479035cb1B5D62AB41845830Ce8'],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# getPendingTransactionsByAddress
Source: https://developers.particle.network/social-logins/api/evm/getpendingtransactionsbyaddress

openapi-evm POST /#particle_getPendingTransactionsByAddress
Learn how to use the getPendingTransactionsByAddress JSON-RPC method.

## Contextualizing `getPendingTransactionsByAddress`

* `getPendingTransactionsByAddress` fetches pending transactions for a specified address on a chain derived from `chainId`, offering detailed metrics like gas limits, transaction types, and statuses.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 5,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_getPendingTransactionsByAddress',
        params: ['0x425249Cf0F2f91f488E24cF7B1AA3186748f7516'],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# getPrice
Source: https://developers.particle.network/social-logins/api/evm/getprice

openapi-evm POST /#particle_getPrice
Learn how to use the getPrice JSON-RPC method.

## Contextualizing `getPrice`

* `getPrice` returns an array of JSON objects containing real-time exchange rates, market cap, 24-hour changes, and volume for each specified token address in selected currencies (either `usd`, `cny`, or both at the moment).

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 42,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_getPrice',
        params: [
            [
                'native', 
                '0x7968bc6a03017eA2de509AAA816F163Db0f35148',
            ],
            [
                'usd', 
                'cny',
            ],
        ],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        },
    });

    console.log(response.data);
})();
```


# getTokens
Source: https://developers.particle.network/social-logins/api/evm/gettokens

openapi-evm POST /#particle_getTokens
Learn how to use the getTokens JSON-RPC method.

# Contextualizing `getTokens`

* `getTokens`, as an alternative to `getTokensAndNFTs`, returns an object with detailed information regarding the various ERC-20 tokens owned by a given address. It takes:
  * `Address` - string.
  * `Token addresses` - (optional), an array of strings.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 1,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_getTokens',
        params: ['0x329a7f8b91Ce7479035cb1B5D62AB41845830Ce8'],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# getTokensAndNFTs
Source: https://developers.particle.network/social-logins/api/evm/gettokensandnfts

openapi-evm POST /#particle_getTokensAndNFTs
Learn how to use the getTokensAndNFTs JSON-RPC method.

# Understanding `getTokensAndNFTs`

* `getTokensAndNFTs` retrieves the ERC-20 and ERC-721 (NFTs) owned by a given account address. It takes:
  * `Address` - string.
  * `Token addresses` - (optional), an array of strings.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 1,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_getTokensAndNFTs',
        params: ['0x329a7f8b91Ce7479035cb1B5D62AB41845830Ce8'],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# getTransactionsByAddress
Source: https://developers.particle.network/social-logins/api/evm/gettransactionsbyaddress

openapi-evm POST /#particle_getTransactionsByAddress
Learn how to use the getTransactionsByAddress JSON-RPC method.

## Contextualizing `getTransactionsByAddress`

* `getTransactionsByAddress` provides a detailed transaction history for a given address, including status and gas metrics. It returns all associated transactions, regardless of whether they're pending, successful, or failed, along with the relevant transaction details like gas spent and fees for confirmed transactions.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 42,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_getTransactionsByAddress',
        params: ['0x425249Cf0F2f91f488E24cF7B1AA3186748f7516'],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# SDK Reference (EvmService)
Source: https://developers.particle.network/social-logins/api/evm/sdk-ref

Reference for the common EvmService SDK extension.

Throughout many of Particle Network's SDKs, a common **`EvmService`** module is included. It enables direct programmatic utilization of Particle's suite of **enhanced RPC endpoints**, and more (such as transaction construction, contract interaction, etc.). These methods provide simple ways of retrieving **rich on-chain data** with minimal added complexity.

A full reference of common methods alongside their parameters **can be found below**.

| Class      | Methods                  | Parameters (\* indicates optional)                                      |
| ---------- | ------------------------ | ----------------------------------------------------------------------- |
| EvmService | rpc                      | method, params                                                          |
| EvmService | getPrice                 | addresses, currencies                                                   |
| EvmService | getTokensAndNFTs         | address                                                                 |
| EvmService | getTokens                | address                                                                 |
| EvmService | getNFTs                  | address                                                                 |
| EvmService | getTransactionsByAddress | address                                                                 |
| EvmService | suggestGasFee            |                                                                         |
| EvmService | estimateGas              | from, to, value, data                                                   |
| EvmService | erc20Transfer            | contractAddress, to, amount                                             |
| EvmService | erc20Approve             | contractAddress, spender, amount                                        |
| EvmService | erc20TransferFrom        | contractAddress, from, to, amount                                       |
| EvmService | erc721SafeTransferFrom   | contractAddress, from, to, tokenId                                      |
| EvmService | erc1155SafeTransferFrom  | contractAddress, from, to, id, amount, data\*                           |
| EvmService | abiEncodeFunctionCall    | contractAddress, methodName, params, abiJsonString                      |
| EvmService | getTokenByTokenAddress   | address, tokenAddresses                                                 |
| EvmService | readContract             | contractAddress, methodName, params, abiJsonString                      |
| EvmService | writeContract            | from, contractAddress, methodName, params, abiJsonString, gasFeeLevel\* |
| EvmService | createTransaction        | from, data, value, to, gasFeeLevel\*                                    |
| EvmService | getSmartAccount          | eoaAddresses, version                                                   |


# suggestedGasFees
Source: https://developers.particle.network/social-logins/api/evm/suggestedgasfees

openapi-evm POST /#particle_suggestedGasFees
Learn how to use the suggestedGasFees JSON-RPC method.

## Contextualizing `suggestedGasFees`

* `suggestedGasFees` returns an object containing tiered gas fee suggestions under EIP-1559 regulations for a chain derived from a given `chainId`.

It provides gas fee options for low, medium, and fast transaction speeds, complete with estimated wait times and the current base fee. It takes no parameters, although, as usual with Particle's enhanced RPC, it still requires basic authentication.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/evm-chain', {
        chainId: 42,
        jsonrpc: '2.0',
        id: 1,
        method: 'particle_suggestedGasFees',
        params: [],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# Introduction to Server APIs
Source: https://developers.particle.network/social-logins/api/introduction

Particle Network's server APIs let you look up and verify Particle Auth users from your backend.

Particle Network also provides a small set of **server APIs** for backend integrations.\
These endpoints are useful when you need to **look up user details** or **verify whether a wallet belongs to a user in your project**.

* Retrieve user information by UUID and token
* Retrieve user information by identity
* Check whether an address belongs to a user in your project

<Note>These endpoints are intended for server-side usage and require your project server key.</Note>

This section gives you a quick overview of the currently available server endpoints, along with examples and an interactive playground for testing.

***

<CardGroup>
  <Card title="getUserInfo" href="/social-logins/api/server/getuserinfo">
    Retrieve a registered user's information using their UUID and token.
  </Card>

  <Card title="getUserInfoByIdentity" href="/social-logins/api/server/getuserinfobyidentity">
    Retrieve a registered user's information using a supported identity value.
  </Card>

  <Card title="isProjectUser" href="/social-logins/api/server/isprojectuser">
    Check whether a wallet address belongs to a user associated with your project.
  </Card>
</CardGroup>


# getUserInfo
Source: https://developers.particle.network/social-logins/api/server/getuserinfo

openapi-auth POST /#getUserInfo
Learn how to use the getUserInfo JSON-RPC method.

## Understanding `getUserInfo`

* `getUserInfo` retrieves a JSON object containing various data points relating to a registered user (a user that has already undergone social login), such as their name, UUID, token, email, and so on. The population of specific data points (such as `facebookId`, `googleId`, etc.) will be dependent upon their primary associated social account.\` It takes:

  * `UUID` - string.

  * `Token` - string.

***

## Query example

```javascript JavaScript theme={null}
const axios = require("axios");

(async () => {
  const response = await axios.post(
    "https://api.particle.network/server/rpc",
    {
      jsonrpc: "2.0",
      id: 0,
      method: "getUserInfo",
      params: ["Particle Auth User Uuid", "Particle Auth User Token"],
    },
    {
      auth: {
        username: "Your Project Id",
        password: "Your Project Server Key",
      },
    }
  );

  console.log(response.data);
})();
```


# getUserInfoByIdentity
Source: https://developers.particle.network/social-logins/api/server/getuserinfobyidentity

openapi-auth POST /#getUserInfoByIdentity
Learn how to use the getUserInfoByIdentity JSON-RPC method.

## Understanding `getUserInfoByIdentity`

* `getUserInfoByIdentity` retrieves a JSON object containing various data points relating to a registered user (a user that has already undergone social login), such as their name, UUID, token, email, and so on. The population of specific data points (such as `facebookId`, `googleId`, etc.) will be dependent upon their primary associated social account.\` It takes:

  * `provider` - string, identity provider, now only support `jwt`.

  * `UID` - string, user identifier.

<Warning>Authorization use project server key</Warning>

***

## Query example

```javascript JavaScript theme={null}
const axios = require("axios");

(async () => {
  const response = await axios.post(
    "https://api.particle.network/server/rpc",
    {
      jsonrpc: "2.0",
      id: 0,
      method: "getUserInfoByIdentity",
      params: ["jwt", "User Identity ID"],
    },
    {
      auth: {
        username: "Your Project Id",
        password: "Your Project Server Key",
      },
    }
  );

  console.log(response.data);
})();
```


# isProjectUser
Source: https://developers.particle.network/social-logins/api/server/isprojectuser

openapi-auth POST /#isProjectUser
Learn how to use the isProjectUser JSON-RPC method.

# Understanding `isProjectUser`

* `isProjectUser` returns a Boolean representing whether or not a specified user (their public address assumedly derived from social login) has interacted with or belongs to your project. It takes:

  * `Chain` - either `solana` or `evm_chain`.

  * `Address` - string.

***

## Query example

```javascript JavaScript theme={null}
const axios = require("axios");

(async () => {
  const response = await axios.post(
    "https://api.particle.network/server/rpc",
    {
      jsonrpc: "2.0",
      id: 0,
      method: "isProjectUser",
      params: ["evm_chain", "0x6D5fCEd0C74F22a1B145ef48B25527Ce9BF829bF"],
    },
    {
      auth: {
        username: "Your Project Id",
        password: "Your Project Server Key",
      },
    }
  );

  console.log(response.data);
})();
```


# enhancedGetPrice
Source: https://developers.particle.network/social-logins/api/solana/enhancedgetprice

openapi-solana POST /#enhancedGetPrice
Learn how to use the enhancedGetPrice JSON-RPC method.

## Understanding `enhancedGetPrice`

* `enhancedGetPrice` retrieves the real-time price (fiat exchange rate) of a Solana token (SPL token). It takes:
  * `address` - array of strings. This represents the SPL token address; for \$SOL, you can use the string `native`.
  * `currencies` - array of strings. It can contain `usd` and `cny`.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/solana', {
        chainId: 103,
        jsonrpc: '2.0',
        id: 0,
        method: 'enhancedGetPrice',
        params: [
            [
                'native', 
                '2Dzzc14S1D7cEFGJyMZMACuoQRHVUYFhVE74C5o8Fwau',
            ],
            [
                'usd', 
                'cny',
            ],
        ],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        },
    });

    console.log(response.data);
})();
```


# enhancedGetTokensAndNFTs
Source: https://developers.particle.network/social-logins/api/solana/enhancedgettokensandnfts

openapi-solana POST /#enhancedGetTokensAndNFTs
Learn how to use the enhancedGetTokensAndNFTs JSON-RPC method.

## Contextualizing `enhancedGetTokensAndNFTs`

* `enhancedGetTokensAndNFTs`, like its EVM counterpart, `getTokensAndNFTs`, retrieves a detailed list of tokens and NFTs that belong to a specific address. It takes:
  * `address` - a base58-encoded string.
  * Object, optional:
    * `parseMetadataUri` - Boolean (`false` by default).

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/solana', {
        chainId: 103,
        jsonrpc: '2.0',
        id: 0,
        method: 'enhancedGetTokensAndNFTs',
        params: ['6XU36wCxWobLx5Rtsb58kmgAJKVYmMVqy4SHXxENAyAe', {
            parseMetadataUri: true,
        }],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# enhancedGetTransactionsByAddress
Source: https://developers.particle.network/social-logins/api/solana/enhancedgettransactionsbyaddress

openapi-solana POST /#enhancedGetTransactionsByAddress
Learn how to use the enhancedGetTransactionsByAddress JSON-RPC method.

## Understanding `enhancedGetTransactionsByAddress`

* `enhancedGetTransactionsByAddress` retrieves detailed parsed transaction history relating to a specific public address on Solana. It takes:
  * `address` - a base58-encoded string.
  * Object, optional:
    * `limit` - integer (between `1` and `1000`, default `1000`).
    * `before` - string, transaction hash.
    * `after` - string, transaction hash.
    * `until` - string, transaction hash.

***

## Query example

```javascript JavaScript theme={null}
const axios = require('axios');

(async () => {
    const response = await axios.post('https://rpc.particle.network/solana', {
        chainId: 103,
        jsonrpc: '2.0',
        id: 0,
        method: 'enhancedGetTransactionsByAddress',
        params: ['6XU36wCxWobLx5Rtsb58kmgAJKVYmMVqy4SHXxENAyAe'],
    }, {
        auth: {
            username: 'Your Project Id',
            password: 'Your Project Server Key',
        }
    });

    console.log(response.data);
})();
```


# SDK Reference (SolanaService)
Source: https://developers.particle.network/social-logins/api/solana/solanaservice

Reference for the common SolanaService SDK extension.

Alongside the common `EvmService` SDK module, `SolanaService` enables programmatic data retrieval through Particle Network's suite of enhanced RPC endpoints. Specifically, `SolanaService` provides direct access to the endpoints listed on this document and additional SDK-exclusive methods, making it simple to work with rich data on Solana.

A full reference of each common method alongside their parameters can be found **below**.

| Class         | Methods                       | Parameters (\* indicates optional) |
| ------------- | ----------------------------- | ---------------------------------- |
| SolanaService | rpc                           | method, params                     |
| SolanaService | getPrice                      | addresses, currencies              |
| SolanaService | getTokensAndNFTs              | address                            |
| SolanaService | getTransactionsByAddress      | address                            |
| SolanaService | getTokenTransactionsByAddress | address, mintAddress               |
| SolanaService | serializeSolTransaction       | from, to, amount                   |
| SolanaService | serializeSplTokenTransaction  | from, to, mint, amount             |


# checkApprove
Source: https://developers.particle.network/social-logins/api/swap/checkapprove

openapi-swap POST /#particle_swap_checkApprove
Learn how to use the checkApprove JSON-RPC method.

# Contextualizing `checkApprove`

* `checkApprove` returns a Boolean based upon whether a given address has approved spending of a specified amount for a particular ERC-20 token. It takes:
  * `address` - string.
  * Token object, containing:
    * `tokenAddress` - string.
    * `amount` - string.

***

## Query example

```json JSON theme={null}
{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "particle_swap_checkApprove",
  "params": [
    "0x369aa8a7a7BE683E1a46d9A056806B2B3FD778C8", // wallet address
    {
      "tokenAddress": "0x111111111117dc0aa78b770fa6a738034120c302", // from token address
      "amount": "1000000000"
    }
  ]
}
```


# getQuote
Source: https://developers.particle.network/social-logins/api/swap/getquote

openapi-swap POST /#particle_swap_getQuote
Learn how to use the getQuote JSON-RPC method.

# Understanding `getQuote`

* `getQuote` calculates and returns the quote price for the swap (the amount of `toTokenAddress` tokens you'll receive) alongside details about the swap. It takes:
  * `address` - string.
  * Swap information object:
    * `fromTokenAddress` - string.
    * `toTokenAddress` - string.
    * `amount` - string.

***

## Query example

```json JSON theme={null}
{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "particle_swap_getQuote",
  "params": [
    "0x369aa8a7a7BE683E1a46d9A056806B2B3FD778C8", // wallet address
    {
      "fromTokenAddress": "0x111111111117dc0aa78b770fa6a738034120c302",
      "toTokenAddress": "0x6B175474E89094C44Da98b954EedeAC495271d0F",
      "amount": "1000000000"
    }
  ]
}
```


# getSwap
Source: https://developers.particle.network/social-logins/api/swap/getswap

openapi-swap POST /#particle_swap_getSwap
Learn how to use the getSwap JSON-RPC method.

## Understanding `getSwap`

* `getSwap` returns a detailed object containing swap information, a price quote, and a complete transaction object to have the user sign for swap execution. It takes:
  * `address` - string.
  * Swap information object:
    * `fromTokenAddress` - string.
    * `toTokenAddress` - string.
    * `amount` - string.
    * `slippage` - integer.

***

## Query example

```json JSON theme={null}
{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "particle_swap_getSwap",
  "params": [
    "0x369aa8a7a7BE683E1a46d9A056806B2B3FD778C8",
    {
      "fromTokenAddress": "0x111111111117dc0aa78b770fa6a738034120c302",
      "toTokenAddress": "0x6B175474E89094C44Da98b954EedeAC495271d0F",
      "amount": "1000000000",
      "slippage": 1
    }
  ]
}
```


# Introduction to Swap API
Source: https://developers.particle.network/social-logins/api/swap/introduction

Explore how you can execute swap transactions with the Swap API.

1. If you're swapping `from` an ERC-20 token, you'll need to check token approval with `checkApprove`. If approval doesn't meet your requirements for the swap, you'll need to request approval.
2. Get a quote for the swap with `getQuote`.
3. Retrieve the swap transaction object with `getSwap`.
4. Execute the swap transaction.

<Tip>Native tokens, such as ETH, are represented as `0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee`</Tip>


# Unity (C#) Desktop - Auth
Source: https://developers.particle.network/social-logins/auth/desktop-sdks/unity

Interacting with Particle Auth within games built on Unity using C#.

## Particle Auth for Unity on Windows/macOS

The **Particle Auth** [Unity SDK](https://github.com/Particle-Network/particle-unity) is the key tool for integrating Particle's **Wallet-as-a-Service** into Unity-based games.

This SDK streamlines **configuration**, **integration**, and **interaction**, making it the only library needed for most applications.

It supports end-to-end usage of Particle Network with **email**, **phone**, or **custom JWT authentication**.

While its structure is similar to the [Web (JavaScript/TypeScript)](/social-logins/auth/desktop-sdks/web) SDK, there are several key differences, **detailed below**.

<Warning>
  <p>Due to limitations with Webview, Particle Auth for Unity on Windows & macOS does not include most built-in social logins</p>
  <p>Options include email, phone, and custom JWT authentication (indicated by 'email', 'phone', or 'jwt').</p>
</Warning>

***

## Getting Started

To start with the **Particle Auth** **Unity** SDK on **Windows** and **macOS**, ensure you meet the prerequisites: a minimum **Unity** version and a **Unity** package for handling authentication popups.

## Prerequisites

* Unity **2021.3.35f1** or later.

* Requires one of the following packages:

  * ​**Recommended**: 3D WebView for Windows and macOS (Web Browser) from Vuplex, version **4.3.3** or higher.

  * Other web browser packages will also work here if necessary.

## Quickstart

Before diving into the specifics of SDK initialization and use, the best way to get started and explore a live implementation of the Unity SDK is through the **Windows/macOS** demo included within the [GitHub repository](https://github.com/Particle-Network/particle-unity).

This demo will consist of initializing the SDK and, as previously detailed, a Webview-based authentication menu for [MPC-TSS](/social-logins/mpc-tss) login, enabling interaction with the resulting wallet.

#### Quickstart demo installation

To start testing the included demo, download the **Windows/macOS** demo from [GitHub](https://github.com/Particle-Network/particle-unity/tree/2e08f144327a25a1f28098defa182155d120f177/Assets/ParticleNetwork/Windows).

If you've already imported the **SDK** from the [linked repository](https://github.com/Particle-Network/particle-unity), follow these steps to initialize the demo:

1. Open the Windows/macOS **Auth** demo scene in the Unity editor.

2. Click the **Particle Init** button to initialize the SDK.

3. Click **Login** to create an account instance and enable the sample functions.

## Initialization

After exploring the SDK's implementation through the **demo**, let's understand and dive into the **configuration**, which includes some structural deviations from the Web SDK.

***

### Initializing the Particle Auth SDK

1. **Create a GameObject:**
   * Add a new `GameObject` to your scene.
   * Attach the `ParticleSystem` script to this GameObject.

2. **Attach Canvas WebView:**
   * Attach the `CanvasWebViewPrefab` to the `ParticleSystem` script.

3. **Add Particle Unity RPC:**
   * Put a `ParticleUnityRpc` prefab into your scene.
   * Update the prefab with your `project id`, `app id`, and `client key`.

4. **Configure the ParticleSystem:**
   * Before using the SDK, you must configure the `ParticleSystem` (similar to the `ParticleNetwork` in the Web SDK).

   * Execute this configuration by calling the `Init` method on `ParticleSystem.Instance` with the following parameters:

   * **`config`**: Includes `ParticleConfigSecurityAccount` and `ParticleConfigWallet`.

   * **`theme`**: Controls the theme settings such as dark or light mode, whether to display the wallet or show the close button.

   * **`language`**: A string indicating the UI language, options include 'en-US', 'zh-CN', 'zh-TW', 'ja-JP', or 'ko-KR'.

   * **`chainInfo`**: An object that specifies the primary blockchain to be used.

```csharp C# theme={null}
var supportChains = new List<SupportChain>
                { new SupportChain(ChainInfo.EthereumSepolia.Name, ChainInfo.EthereumSepolia.Id) };
var config = new ParticleConfig(new ParticleConfigSecurityAccount(1, 1),
                                new ParticleConfigWallet(true, supportChains, null));

var theme = new ParticleTheme
  {
  UiMode = "dark",
  DisplayWallet = true,
  DisplayCloseButton = true
  };

var language = "en-US";

var chainInfo = ChainInfo.EthereumSepolia;

ParticleSystem.Instance.Init(config.ToString(), theme.ToString(), language, chainInfo);
```

Among these parameters, the `ParticleUnityRpc` prefab containing `project id`, `app id` and `client key` are the most important. It directly connects your instance of Particle's Wallet-as-a-Service with your configurations in the [Particle dashboard](https://dashboard.particle.network/).

<Note>Find a full rundown on how to set up a project and find the required keys in the [Dashboard Guide ](/social-logins/dashboard).</Note>

### Examples of utilization

#### Login

`ParticleSystem.Instance.Login` displays the login popup, set to 'email', 'phone', or custom JWT authentication with 'jwt'.

This popup acts as the **primary mechanism** for facilitating account creation.

```csharp C# theme={null}
// PreferredAuthType: email, phone, or jwt
// Account: Required when using jwt 
var loginResult = await ParticleSystem.Instance.Login(PreferredAuthType.email, "");
Debug.Log($"Login result {loginResult}"); // Contains user information
```

#### SignMessage

`ParticleSystem.Instance.SignMessage` enables the signing of a basic string.

This can be passed directly within `SignMessage` for **EVM** chains, as shown below.

For **Solana**, you'll need to convert this string to base58 before `SignMessage` will function properly. The confirmation popup will display this string, base58 or otherwise, in UTF-8.

```csharp C# theme={null}
var signature = await ParticleSystem.Instance.SignMessage("GM, Particle!");
Debug.Log($"SignMessage signature: {signature}");
```

#### SignAndSendTransaction

The `ParticleSystem.Instance.SignAndSendTransaction` method takes a transaction object constructed by `ParticleSystem.Instance.MakeEvmTransaction` (for EVM chains). It then prompts the user for confirmation (signature).

Once the user confirms, the transaction will be sent.

```csharp C# theme={null}
var transaction = ParticleSystem.Instance.MakeEvmTransaction("0x16380a03f21e5a5e339c15ba8ebe581d194e0db3", "0xA719d8C4C94C1a877289083150f8AB96AD0C6aa1", "0x", "0x123123");
var signMessageResult = await ParticleSystem.Instance.SignAndSendTransaction(transaction);
Debug.Log($"SignAndSendTransaction signature: {signature}");
```

#### SignTypedData

`ParticleSystem.Instance.SignTypedData` facilitates the signature of structured data; by default, this uses `eth_signTypedData_v4`.

For more information on `signTypedData`, see the [Web (JavaScript/TypeScript)](/social-logins/auth/desktop-sdks/web) page.

```csharp C# theme={null}
string typedDataV4 = "";
var signMessageResult = await ParticleSystem.Instance.SignTypedData(typedDataV4, SignTypedDataVersion.Default);
Debug.Log($"SignTypedData signature: {signature}");
```

#### SignTransaction

`ParticleSystem.Instance.SignTransaction` is a **Solana-specific** method for requesting a signature for a given transaction.

This will sign (but not send) a transaction.

```csharp C# theme={null}
 string transaction = "";
var signMessageResult = await ParticleSystem.Instance.SignTransaction(transaction);
Debug.Log($"SignTransaction signature: {signature}");
```

#### SignAllTransactions

`ParticleSystem.Instance.SignAllTransactions` is the plural of those mentioned above; this is also \**Solana-specific*

```csharp C# theme={null}
List<string> transactions = new List<string> { "" }; // base58 strings
var signMessageResult = await ParticleSystem.Instance.SignAllTransactions(transactions);
Debug.Log($"SignAllTransactions signature: {string.Join(", ", signatureList)}");
```

#### OpenWebWallet

`ParticleSystem.Instance.OpenWebWallet` can open the web wallet.

```csharp C# theme={null}
ParticleSystem.Instance.OpenWebWallet();
// If you prefer to open wallet with a smart account selected, you can pass the account name, such as
ParticleSystem.Instance.OpenWebWallet(AAAccountName.BICONOMY_V2());
```

## Master reference

Below is a table containing every relevant method provided through `ParticleSystem` alongside specific parameters and a short description for a direct, raw view.

For methods listed that needed to be covered in the above examples, live implementation often mimics the standard structure covered throughout this document.

| Class          | Methods                | Parameters                                  |
| -------------- | ---------------------- | ------------------------------------------- |
| ParticleSystem | Init                   | config, theme, language, chainName, chainId |
| ParticleSystem | Login                  | preferredAuthType, account                  |
| ParticleSystem | SignMessage            | message                                     |
| ParticleSystem | SignAndSendTransaction | transaction                                 |
| ParticleSystem | SignTypedData          | message, version                            |
| ParticleSystem | SignTransaction        | transaction                                 |
| ParticleSystem | SignAllTransactions    | transactions                                |
| ParticleSystem | MakeEvmTransaction     | from, to, data, value                       |
| ParticleSystem | UpdateChainId          | chainId                                     |
| ParticleSystem | UpdateChainName        | chainName                                   |


# Web (JavaScript/TypeScript) - Auth
Source: https://developers.particle.network/social-logins/auth/desktop-sdks/web

Interacting with Particle Auth within web applications using either JavaScript or TypeScript.

# Particle Auth for Web Applications

Among all the SDKs for **Particle Auth**, the Web SDK (`@particle-network/authkit`) is the most widely used. Thus, it offers extensive **support** and **flexibility** in driving onboarding through social logins, facilitating interaction with Particle's Wallet-as-a-Service.

The Particle Auth SDK is the primary mechanism for **configuring** and **using** social logins. **Whether you're starting from scratch** or **already have an onboarding or authentication flow** set up within your application, the Particle Auth Core Web SDK is a simple yet powerful integration.

***

## Getting Started

<Tip>
  Check out the [Web Quickstart guide](/social-logins/auth/quickstart/web-quickstart) and get a new project up
  and running in just 5 minutes.
</Tip>

To get started with the Particle Auth Web SDK, you can add `@particle-network/authkit` to your project using either of the two following mechanisms:

```shell Install theme={null}
npm install @particle-network/authkit viem@2

yarn add @particle-network/authkit viem@2
```

***

## Configuration

Configuration is primarily handled by wrapping an application with **Particle Auth**'s master configuration component, essential for authenticating your project and [customizing the optional embedded wallet modal](/social-logins/configuration/appearance/wallet).

No matter which **Particle Auth** SDK you're using, you must define your `projectId`, `clientKey`, and `appId` within this configuration object to authenticate your Particle Auth instance properly. Additionally, [you can apply customizations to the wallet modal](/social-logins/configuration/appearance/wallet) for a tailored user experience.

<Note>
  Follow the quickstart tutorial to set up a project and find the required keys: [Create a new
  project](/social-logins/auth/quickstart/web-quickstart#configuring-particle-auth).
</Note>

Below is an example of an `index.tsx` file from a `create-react-app` project. In this example, the `AuthCoreContextProvider` component acts as the configuration wrapper for the entire application.

<CodeGroup>
  ```typescript @particle-network/authkit theme={null}
  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import { AuthType } from '@particle-network/auth-core';
  import { AuthCoreContextProvider, PromptSettingType } from '@particle-network/authkit';
  import { mainnet } from '@particle-network/authkit/chains';
  import App from './App'

  import('buffer').then(({ Buffer }) => {
  window.Buffer = Buffer;
  });

  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

    <React.StrictMode>
          <AuthCoreContextProvider
            options={{
              projectId: process.env.REACT_APP_PROJECT_ID!,
              clientKey: process.env.REACT_APP_CLIENT_KEY!,
              appId: process.env.REACT_APP_APP_ID!,
              chains: [mainnet],
              authTypes: [AuthType.email, AuthType.google, AuthType.twitter],
              themeType: "dark", // Login modal theme
              fiatCoin: "USD",
              language: "en",
              // optional, ERC4337
              erc4337: {
                name: "SIMPLE",
                version: "2.0.0",
              },
              // You can prompt the user to set up extra security measure upon login or other interactions
              promptSettingConfig: {
                promptPaymentPasswordSettingWhenSign: PromptSettingType.first,
                promptMasterPasswordSettingWhenLogin: PromptSettingType.first,
              },
              wallet: {
                themeType: 'dark', // Wallet modal theme
                visible: true,
                customStyle: {
                  displayTokenAddresses: ["0x4d224452801ACEd8B2F0aebE155379bb5D594381"], // Display a custom token within the wallet modal
                  priorityTokenAddresses: ["0x4d224452801ACEd8B2F0aebE155379bb5D594381"],
                 },
              },
            }}
          >
      <App />
        </AuthCoreContextProvider>
    </React.StrictMode>
  )
  ```
</CodeGroup>

<Tip>
  Learn how to customize the aesthetics of the login and embedded wallet interface in the [Customizing Login
  Modal](/social-logins/configuration/appearance/auth) and [Customizing Wallet
  Modal](/social-logins/configuration/appearance/wallet) pages.
</Tip>

<Warning>
  When using a framework that supports React Server Components, you must include the `"use client"` directive
  at the beginning of the file.
</Warning>

***

# Interaction with Web3

Now that you've configured an instance of **Particle Auth**, it's time to leverage Particle to facilitate **social logins** and interactions with **Web3**.

To begin, you'll need to choose between the following interaction mechanisms:

1. **Ethers.js**.
2. **viem**.
3. **Particle native**.

They all achieve the same end goal of facilitating interaction with Web3, although they will result in a slightly different initialization process.

If you've chosen **Particle native**, no initialization of this nature is needed past configuring `AuthCoreContextProvider` or `ParticleNetwork`.

<CodeGroup>
  ```typescript Ethers.js V5 theme={null}
  import { ethers } from "ethers";

  import { useEthereum } from '@particle-network/authkit';

  const { provider } = useEthereum();

  const ethersProvider = new ethers.providers.Web3Provider(provider, "any");

  ```

  ```typescript Ethers.js V6 theme={null}
  import { ethers, Eip1193Provider } from "ethers";

  import { useEthereum } from '@particle-network/authkit';

  const { provider } = useEthereum();

  const ethersProvider = new ethers.BrowserProvider(
    provider as Eip1193Provider,
    "any"
  );
  ```

  ```typescript viem theme={null}
  import { createWalletClient, custom } from 'viem'
  import { mainnet } from 'viem/chains

  import { useEthereum } from '@particle-network/authkit';

  const { provider } = useEthereum();

  const viemProvider = createWalletClient({
    chain: mainnet,
    transport: custom(provider)
  })
  ```
</CodeGroup>

You can now use the **provider** object to interact with **Web3**, enabling actions like fetching account balances or sending transactions.

***

## Initiating Social Login

To interact with a user's account (wallet), they must first log in using **Particle Auth** or [Particle Connect](/social-logins/connect/desktop/web), similar to how one would enter a password and unlock MetaMask.

<Note>Before interactions can occur, the application must either recognize that the user is already logged in or prompt them to complete the login process.</Note>

You can use the `connect` and `connected` functions from the `useConnect()` hook to handle the connection logic:

```typescript theme={null}
import { useConnect } from '@particle-network/authkit';

const { connect, disconnect, connected } = useConnect();

// Handle user login
const handleLogin = async () => {
    if (!connected) {
        await connect({});
    }
};

// Logout user
const handleLogout = async () => {
    await disconnect();
};
```

In this example, the `handleLogin` function initiates the login process by displaying the login modal if the `connected` status is `false`, indicating that the user is not currently logged in.

### Customize the Login Experience

You can set specific configurations within the `connect()` function to further tailor the **login** experience beyond [frontend customizations](/social-logins/configuration/appearance/auth).

The following example showcases all available configuration options:

```typescript TypeScript theme={null}
'use client';

import { useConnect } from '@particle-network/authkit';

const { connect, disconnect, connected } = useConnect();

const useInfo = await connect({
    // socialType, if set, will skip the auth modal shown above and will instead automatically redirect to a chosen social login
    // 'email' | 'phone' | 'google' | 'apple' | 'twitter' | 'facebook' | 'microsoft' | 'linkedin' | 'github' | 'twitch' | 'discord'
    socialType: 'google',
    phone: '+1xxxxxxxx', // Optional, E.164 format
    code: 'xxxxxx', // Optional
    authorization: {
        uniq: true, // Optional: Defaults to false
        message: 'base58 string', // Signature message in hex or base58 for Solana
    },
});
```

<Note>`web3.eth.getAccounts` will also initiate login automatically if a user isn't already logged in.</Note>

***

#### Log in with a Specific Social Platform

You can streamline the login process by bypassing the standard login modal and directing users to log in with a specific social platform.

The following example shows how to automatically prompt users to log in with their Google account, skipping the login modal entirely:

```tsx App.tsx theme={null}
'use client';

import { useConnect } from '@particle-network/authkit';

const { connect, disconnect, connected } = useConnect();

// Handle user login
const handleLogin = async () => {
    if (!connected) {
        await connect({
            socialType: 'google',
        });
    }
};
```

#### Customizing the Email Login Flow

By default, **Particle Auth** supports email login with an **OTP** (One Time Password) flow through the login modal. However, you can build a custom UI to request and validate OTPs directly, allowing for greater flexibility and control over the authentication experience.

<Note>`@particle-network/auth-core` is already included as a dependency in `@particle-network/authkit`, so you don’t need to install it separately.</Note>

**Step 1: Request an OTP**

Use the `getConnectCaptcha()` function from `@particle-network/auth-core` to send an **OTP** to the user’s email.

```tsx page.tsx theme={null}
import { getConnectCaptcha } from "@particle-network/auth-core";

// Send an OTP to the email
const sendOtpRequest = async (email) => {
  const success = await getConnectCaptcha({ email });
  console.log(success ? "OTP sent successfully!" : "Failed to request OTP. Try again.");
};
```

**Step 2: Verify OTP & Log In**

Once the user receives the OTP, use the `connect()` function, including OTP and email within `loginParams`, to verify it and complete the login.

```tsx page.tsx theme={null}
import { ConnectWithEmailParam } from "@particle-network/auth-core";

// Verify the OTP and log in
const verifyOtp = async (email, otp) => {
    const loginParams: ConnectWithEmailParam = { email, code: otp };
    await connect(loginParams);
    console.log("Login successful!");
};
```

<Note>Find a complete implementation in the [Particle Auth Custom Email Login repository](https://github.com/Particle-Network/particle-auth-custom-email-otp-demo).</Note>

#### Login with JWT

You can use your existing user base or authentication method with Particle Auth through JWT. This way, your users can still log in with their current accounts.

<Note>We only support RS256 now, [Example](https://dev-qr6-59ee.us.auth0.com/.well-known/jwks.json).</Note>

Before connecting, you must set your custom JWT configuration on the [Dashboard](https://dashboard.particle.network).

<img />

Then, you can refer to the code below to log in using JWT.

```typescript TypeScript theme={null}
'use client';

import { useConnect } from '@particle-network/authkit';

const { connect, disconnect, connected } = useConnect();

// connect with JWT
const userInfo = await connect({
    provider: 'jwt',
    thirdpartyCode: 'xxxxxxxxxx', // If applicable, JWT value
});
```

Learn more about [Custom Authentication](/social-logins/configuration/auth/jwt).

### Verify User Login Status

The `useConnect()` hook provides several functions to check the user's connection status:

* `connected` — Returns a boolean value indicating whether the user is logged in (`true`) or not (`false`). This is useful for managing login logic.

* `connectionStatus` — Returns a string representing the current stage of the user's flow:

  * `loading`
  * `connecting`
  * `connected`
  * `disconnected`

  You can use `connectionStatus` to manage login logic or to display relevant status information in the UI.

```tsx page.tsx theme={null}
import { useConnect } from '@particle-network/authkit';

const { connectionStatus } = useConnect();

<h2 className="status-text">
    {/* Status changes are automatically handled*/}
    Status: {connectionStatus}
</h2>;
```

### Handling User Information

Once the user is logged in, the `userInfo` object from the `useAuthCore()` hook becomes available.

<Note>The result of `connect()` will return the same object.</Note>

For example, you can use it to display the user's `name` and `avatar`, or access security details such as `has_set_master_password`.

This allows you to implement logic that prompts the user to set a master password if they haven’t already done so, thereby improving security.

<Accordion title="Available Fields in `userInfo`">
  * **uuid**: Unique identifier for the user.
  * **created\_at**: Timestamp of when the user account was created.
  * **updated\_at**: Timestamp of the last update to the user account.
  * **phone**: User's phone number (if available).
  * **email**: User's email address (if available).
  * **apple\_email**: Email associated with Apple ID (if available).
  * **apple\_id**: Apple ID (if available).
  * **avatar**: URL to the user’s avatar image.
  * **discord\_email**: Email associated with Discord (if available).
  * **discord\_id**: Discord ID (if available).
  * **facebook\_email**: Email associated with Facebook (if available).
  * **facebook\_id**: Facebook ID (if available).
  * **github\_email**: Email associated with GitHub (if available).
  * **github\_id**: GitHub ID (if available).
  * **google\_email**: Email associated with Google.
  * **google\_id**: Google ID.
  * **jwt\_id**: JSON Web Token ID (if available).
  * **linkedin\_email**: Email associated with LinkedIn (if available).
  * **linkedin\_id**: LinkedIn ID (if available).
  * **microsoft\_email**: Email associated with Microsoft (if available).
  * **microsoft\_id**: Microsoft ID (if available).
  * **name**: Full name of the user.
  * **passkeys\_id**: Passkeys ID (if available).
  * **security\_account**: Object containing security-related fields:
    * **has\_set\_master\_password**: Boolean indicating if a master password is set.
    * **has\_set\_payment\_password**: Boolean indicating if a payment password is set.
    * **payment\_password\_updated\_at**: Timestamp of the last update to the payment password.
  * **telegram\_id**: Telegram ID (if available).
  * **telegram\_phone**: Phone number associated with Telegram (if available).
  * **thirdparty\_user\_info**: Object containing third-party authentication info:
    * **provider**: Name of the third-party provider (e.g., "Google").
    * **user\_info**: Object with detailed user information:
      * **email**: Email used with the third-party provider.
      * **id**: User ID associated with the third-party provider.
      * **name**: Name associated with the third-party provider.
      * **picture**: URL to the user’s profile picture from the third-party provider.
      * **token**: Token used for authentication.
  * **twitch\_email**: Email associated with Twitch (if available).
  * **twitch\_id**: Twitch ID (if available).
  * **twitter\_email**: Email associated with Twitter (if available).
  * **twitter\_id**: Twitter ID (if available).
  * **wallets**: Array of wallet objects:
    * **uuid**: Unique identifier for the wallet.
    * **chain\_name**: Name of the blockchain associated with the wallet (e.g., "evm\_chain", "solana").
</Accordion>

The following is an example of how you can render user information taken from `userInfo`:

```tsx App.tsx theme={null}
const { userInfo } = useAuthCore();

// Or
// const userInfo = await connect();

{
    userInfo && (
        <div>
            {/* 
      In this card, we display info from Particle Auth 
    */}
            <h2>Accounts info</h2>
            <div>
                <h2>Name: {userInfo.name}</h2>
                <img src={userInfo.avatar} alt="User Avatar" />
            </div>
        </div>
    );
}
```

***

## Retrieving the Public Address

To retrieve the public address linked to a user's account, when it's not already obtained through the login via `userInfo`,  you can use the following method:

<CodeGroup>
  ```typescript Ethers.js V6 theme={null}
  import { ethers } from "ethers";

  import { useEthereum } from '@particle-network/authkit';
  const { provider } = useEthereum();

  // Assuming Ethers is not already initialized
  const ethersProvider = new ethers.BrowserProvider(
  provider as Eip1193Provider,
  "any"
  );

  const accounts = await ethersProvider.listAccounts();
  const address = accounts[0].address;

  // Or

  const signer = await ethersProvider.getSigner();
  const address = await signer.getAddress();

  ```

  ```typescript Ethers.js V5 theme={null}
  import { ethers } from "ethers";

  import { useEthereum } from '@particle-network/authkit';
  const { provider } = useEthereum();

  const ethersProvider = new ethers.providers.Web3Provider(provider, "any");
  // Assuming Ethers is not already initialized

  const accounts = await ethersProvider.listAccounts();
  const address = accounts[0].address;
  ```

  ```typescript Particle (EVM) theme={null}
  import { useEthereum } from '@particle-network/authkit';

  // After configuring AuthCoreContextProvider and logging in
  const { address, provider } = useEthereum();

  // Or, alternatively, send a JSON-RPC request to the provider

  const accounts = await provider.request({ method: 'eth_accounts' });
  ```

  ```typescript Particle (Solana) theme={null}
  import { useSolana } from '@particle-network/authkit';

  // After configuring AuthCoreContextProvider and logging in
  const { address } = useSolana();
  ```
</CodeGroup>

***

## Sending Transactions

Sending transactions using **Particle** as the Signer/underlying wallet is also quite simple.

If you're using **Ethers.js**, you're already set —as long as a user has logged in with Particle, transactions can be sent as you would with any other wallet.

When a given transaction is sent, and a signature is needed for authentication, a standard confirmation popup (also customizable through the Particle dashboard) will appear directly within the application. Transactions can be sent through the following:

<CodeGroup>
  ```typescript Ethers.js theme={null}
  const signer = ethersProvider.getSigner();

  const executeTx = async () => {
  const signer = await ethersProvider.getSigner();

  const tx = {
  to: recipientAddress,
  value: ethers.parseEther("0.01"),
  data: "0x",
  };

  const txResponse = await signer.sendTransaction(tx);
  const txReceipt = await txResponse.wait();

  // You can log or handle the receipt here
  console.log(txReceipt);
  };

  ```

  ```typescript Particle (EVM) theme={null}
  // After configuring AuthCoreContextProvider and logging in
  import { useEthereum } from '@particle-network/authkit';
  const { sendTransaction } = useEthereum();

  const txnHash = await sendTransaction(txnParams);
  ```

  ```typescript Particle (Solana) theme={null}
  import { useSolana } from '@particle-network/authkit';

  // After configuring AuthCoreContextProvider and logging in
  const { signAndSendTransaction } = useSolana();

  const result = await signAndSendTransaction(transaction);
  ```
</CodeGroup>

<Note>
  <p>
    To the end-user, sending transactions, regardless of the chosen method, looks like this (depending on
    customization outlined in the [Particle dashboard](https://dashboard.particle.network/)).
  </p>

  <Frame>
    <img alt="Particle Network example." />

    <img alt="Particle Network example." />
  </Frame>
</Note>

***

## Data Signing

In cases where you'd like to sign either a raw string (personal) or typed data (`eth_signTypedData`), the process is quite straightforward.

You can accomplish this using standard libraries like **Ethers** or leveraging **Particle’s** native functionality. The examples below illustrate both approaches.

For instance, when sending transactions, the signatures are automatically formatted and presented to the user in a popup request. This ensures a user-friendly experience by displaying the relevant data in UTF-8 format.

### Personal Signatures

<CodeGroup>
  ```typescript Particle (EVM) theme={null}
  const msg = 'GM, Particle!';

  // After configuring AuthCoreContextProvider and logging in
  const { signMessage } = useEthereum();

  const result = await signMessage(msg);
  ```

  ```typescript Particle (Solana) theme={null}
  import { useSolana } from '@particle-network/authkit';

  // After configuring AuthCoreContextProvider and logging in
  const { signMessage } = useSolana();

  const result = await signMessage('base58 string');
  ```

  ```typescript Ethers.js theme={null}
  const msg = 'GM, Particle!';
  const signer = ethersProvider.getSigner();
  const accounts = await signer.getAddress();

  signer
      .signMessage(msg)
      .then((result) => {
          console.log('personal_sign', result);
      })
      .catch((error) => {
          console.error('personal_sign', error);
      });
  ```
</CodeGroup>

### Sign Typed Data

<CodeGroup>
  ```typescript Particle (EVM) theme={null}
  // Placeholder data
  const msg = { ... };

  // After configuring AuthCoreContextProvider and logging in
  const { signTypedData } = useEthereum();

  const result = await signTypedData({ data: msg, version: 'V4' });
  ```
</CodeGroup>

***

## Enabling Blind Signatures

To enable blind signatures (signing without a confirmation popup) in Particle Auth, certain conditions must be met when configuring the `AuthCoreContextProvider` component and setting up the authentication flow.

1. **Master Password Requirement**
   * Users must either:
     * Have entered the master password, or
     * Not have set a master password in the first place.

2. **No Payment Password**
   * Users should not have set a payment password (as this interrupts the signing process).

3. **Disable Payment Password Prompt Setting**

   * Set the `promptPaymentPasswordSettingWhenSign` parameter to `false` within [`AuthCoreContextProvider`](/social-logins/auth/desktop-sdks/web#configuration).

   ```typescript theme={null}
   // Configuration for disabling payment password prompt
   promptSettingConfig = {
       promptPaymentPasswordSettingWhenSign: false,
   };
   ```

When these conditions are satisfied, blind signing is enabled.

***

## Particle Native Hooks

Below is a collection of examples describing the different hooks available with **Particle Auth**.

These hooks facilitate social login and native application-level interaction (such as message signing, sending transactions, etc.) directly through **Particle Auth**.

### useConnect

`useConnect` acts as the primary hook for facilitating login (connection) with **Particle Auth**.

```typescript TypeScript theme={null}
import { useConnect } from '@particle-network/authkit';

const { connect, disconnect, connected, connectionStatus, requestConnectCaptcha, setSocialConnectCallback } =
    useConnect();

const userInfo = await connect();

const isLoggedIn = connected;

await disconnect();
```

### useEthereum

`useEthereum` provides direct interaction with a given **EVM** chain as an alternative to a traditional library such as **ethers**.

```typescript TypeScript theme={null}
const {
    provider, // EIP1193 provider
    address, // EVM public address
    chainId, // Current chain
    chainInfo,
    switchChain,
    signMessage,
    signTypedData,
    sendTransaction,
    enable,
} = useEthereum();

const txHash = await sendTransaction({
    to: '0xe8fc0baE43aA264064199dd494d0f6630E692e73',
    value: '1000000',
});

const signature = await signMessage(message);

const signature = await signTypedData(typedData);

await switchChain('0x1'); // Also takes a standard number
```

### useSolana

`useSolana` is one of the primary ways to use **Solana** with **Particle Auth** if you aren't using an external connection modal such as `wallet-adapter`.

```typescript TypeScript theme={null}
import { useSolana } from '@particle-network/authkit';

const {
    address, // Solana public address
    chainId, // Current chain (Mainnet, Testnet, Devnet)
    chainInfo,
    switchChain,
    signMessage,
    signTransaction,
    signAllTransactions,
    signAndSendTransaction,
    enable,
} = useSolana();

const txHash = await signAndSendTransaction(txData);

const signature = await signMessage(message);
```

### useAuthCore

`useAuthCore` provides additional functionality, such as retrieving `userInfo` after login, forcing different account menus to open, accessing the on-ramp page, and more.

```typescript TypeScript theme={null}
import { useAuthCore } from '@particle-network/authkit';

const {
    userInfo, // Standard user info, null is returned if not connected
    needRestoreWallet, // Whether or not a master password is needed from the current user
    openAccountAndSecurity, // Opens account and security modal
    openSetMasterPassword, // Opens set master password modal
    openChangeMasterPassword, // Opens change master password modal
    openRestoreByMasterPassword, // Opens input master password modal
    openSetPaymentPassword, // Opens set payment password modal
    openChangePaymentPassword, // Opens change payment password modal
    openSetSecurityAccount, // Opens set security account modal
    openLinkLoginAccount, // Opens link login account modal
    openWallet, // Opens wallet in iframe
    getWalletIFrame, // Manages the embedded wallet modal, used for opening the wallet modal in a custom iframe
    openBuy, // Opens the onramp aggregation page
} = useAuthCore();
```

### useCustomize

`useCustomize` provides several methods for customizing the wallet modal, such as changing the theme type (light or dark), creating a custom style, changing the language, and more.

```typescript TypeScript theme={null}
import { useCustomize } from '@particle-network/authkit';

const {
    setThemeType, // Sets theme type, 'light' or 'dark'
    setCustomStyle, // Sets custom modal styles
    setWalletOptions, // Sets wallet modal options
    setLanguage, // Sets language being used
    setFiatCoin, // Sets fiat coin being used
    setERC4337, // Sets whether the modal has ERC-4337 enabled
} = useCustomize();
```


# Particle Auth FAQ
Source: https://developers.particle.network/social-logins/auth/faq

Find Frequently Asked Questions about Particle Auth.

<AccordionGroup>
  <Accordion title="How can I ensure the signature result is consistent each time?" icon="signature">
    **Answer:** Due to the unique characteristics of Multi-Party Computation (MPC), the signature result for the same message can vary each time, unlike traditional private key wallets such as MetaMask.

    To address scenarios requiring a consistent signature result, we provide the `uniq` parameter. This parameter ensures that the signature remains consistent every time you sign the same message.

    ```tsx App.tsx theme={null}
    // Sign a message with the uniq flag
    const result = await signMessage(message, true);
    ```
  </Accordion>

  <Accordion title="How can I silently log in and sign messages/transactions?" icon="key">
    **Answer:** Currently, silent login and signing are not directly supported. However, this functionality can be achieved using the following approaches:

    1. **[Session Keys](https://your-link-to-guides/integrations/aa/keys#implementing-session-keys)** with Biconomy V2:
       Session keys enable silent signing by creating temporary keys with limited permissions and expiration, allowing you to bypass frequent authentication popups.

    2. **Enabling Blind Signatures with Particle Auth:**
       Blind signing (signing without a confirmation popup) is possible in Particle Auth if specific conditions are met:

       * **Authentication Method:** The user must be authenticated via JWT or Telegram.
       * **Master Password Requirement:**
         * The user has entered their master password, or
         * The user has not set a master password.
       * **No Payment Password:** The user has not set a payment password.
       * **Disable Payment Password Prompt:** Configure `AuthCoreContextProvider` with the parameter `promptPaymentPasswordSettingWhenSign` set to `false`.

       ```javascript theme={null}
       // Configuration for disabling payment password prompt
       const promptSettingConfig = {
           promptPaymentPasswordSettingWhenSign: false,
       };
       ```

       When these conditions are satisfied, blind signing is enabled.
  </Accordion>

  <Accordion title="How do I determine if an account is new?" icon="user-plus">
    **Answer:** When you retrieve `UserInfo`, either through the `connect` method or via the `userInfo` object from `useAuthCore`, a field provide the relevant information:

    * **Account Creation:** The `created_at` field indicates the timestamp when the account was created.

    <Note>Find more about Handling User Information in the [Particle Auth SDK](/social-logins/auth/desktop-sdks/web#handling-user-information) page.</Note>
  </Accordion>

  <Accordion title="How can I check the status of the main password and payment password settings?" icon="lock">
    **Answer:** The `userInfo` object contains a `security_account` property, which includes two fields:

    * `has_set_master_password`: Indicates if the master password is set.
    * `has_set_payment_password`: Indicates if the payment password is set.

    <Note>Find more about Handling User Information in the [Particle Auth SDK](/social-logins/auth/desktop-sdks/web#handling-user-information) page.</Note>
  </Accordion>

  <Accordion title="Why does Google login prompt me that I do not comply with the policy?" icon="shield">
    **Answer:** This issue typically occurs when using Google login within a WebView environment.

    * [Google Support](https://support.google.com/accounts/answer/12917337?hl=en#zippy=%2Cdisallowed-useragent).
  </Accordion>

  <Accordion title="How to add support for a new EVM chain?" icon="ethereum">
    **Answer:** Our team needs to implement support for integrating a new EVM chain on our platform. Once we have added support for the chain, developers can use it within their applications.

    <Note>Please [contact us](https://t.me/particle_developer_bot) to discuss potential integration.</Note>
  </Accordion>

  <Accordion title="What are the options for chain_name returned by the backend API?" icon="link">
    **Answer:** The `chain_name` values returned by the backend API include `evm_chain` and `solana`. Additionally, for Tron, the `chain_name` is also represented as `evm_chain`.

    These values indicate the blockchain network associated with the account.
  </Accordion>

  <Accordion title="How do I fix webpack 5 polyfills error when creating a new React application?" icon="browser">
    **Answer:** When using `create-react-app` version 5 or above, you might encounter issues due to the lack of NodeJS polyfills, which are no longer included by default. To fix this, you can use `react-app-rewired` and install the necessary polyfill modules.

    * **Step 1:** After creating a new application with `CRA`, install `react-app-rewired` and the required polyfill packages.

      If you're using Yarn:

      ```sh theme={null}
      yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib
      ```

      If you're using NPM:

      ```sh theme={null}
      npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib
      ```

    * **Step 2:** Create a `config-overrides.js` file in the root of your project and add the necessary configuration to include the missing polyfills. This file will override the default Webpack configuration provided by `create-react-app`.

      ```js config-overrides.js theme={null}
      const webpack = require('webpack');

      module.exports = function override(config) {
        const fallback = config.resolve.fallback || {};
        Object.assign(fallback, {
          crypto: require.resolve('crypto-browserify'),
          stream: require.resolve('stream-browserify'),
          assert: require.resolve('assert'),
          http: require.resolve('stream-http'),
          https: require.resolve('https-browserify'),
          os: require.resolve('os-browserify'),
          url: require.resolve('url'),
          zlib: require.resolve('browserify-zlib'),
          process: require.resolve('process/browser'),
        });
        config.resolve.fallback = fallback;
        config.plugins = (config.plugins || []).concat([
          new webpack.ProvidePlugin({
            process: 'process/browser.js',
            Buffer: ['buffer', 'Buffer'],
          }),
        ]);

        config.module.rules = config.module.rules.map((rule) => {
          if (rule.oneOf instanceof Array) {
            rule.oneOf[rule.oneOf.length - 1].exclude = [
              /\.(js|mjs|jsx|cjs|ts|tsx)$/,
              /\.html$/,
              /\.json$/,
            ];
          }
          return rule;
        });

        return config;
      };
      ```

    * **Step 3:** Modify the `scripts` section in your `package.json` to use `react-app-rewired` instead of the default `react-scripts`:

      ```json theme={null}
      "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
      },
      ```

    After making these changes, your React application should build successfully without encountering NodeJS polyfill errors.
  </Accordion>

  <Accordion title="How do I fix the '__wbindgen_add_to_stack_pointer' error in a React app using Vite?" icon="desktop">
    **Answer:** If you're encountering the error `"Cannot read properties of undefined (reading '__wbindgen_add_to_stack_pointer')"` in your React app using Vite, it likely relates to issues with loading a WebAssembly (Wasm) module.

    To resolve this, you can use the Particle Network WASM plugin with a customized Vite configuration. Here's how to set it up:

    1. **Install the Vite Plugin:** Ensure you have the necessary WASM files and the plugin configured.

    ```sh Terminal theme={null}
    npm i @vitejs/plugin-react
    ```

    2. **Update your `vite.config.ts`:** Add the following configuration to correctly handle the WebAssembly module in development mode:

    ```ts vite.config.ts theme={null}
        import { defineConfig, Plugin, ConfigEnv } from 'vite';
      import react from '@vitejs/plugin-react';
      import fs from 'fs';
      import path from 'path';

      const particleWasmPlugin: Plugin | undefined = {
          name: 'particle-wasm',
          apply: (_, env: ConfigEnv) => {
              return env.mode === 'development';
          },
          buildStart: () => {
              const copiedPath = path.join(
                  __dirname,
                  'node_modules/@particle-network/thresh-sig/wasm/thresh_sig_wasm_bg.wasm'
              );
              const dir = path.join(__dirname, 'node_modules/.vite/wasm');
              const resultPath = path.join(dir, 'thresh_sig_wasm_bg.wasm');
              if (!fs.existsSync(dir)) {
                  fs.mkdirSync(dir, { recursive: true });
              }
              fs.copyFileSync(copiedPath, resultPath);
          },
      };

      export default defineConfig({
        plugins: [react(), particleWasmPlugin],
        server: {
          host: '0.0.0.0',
        },
        define: {
          'process.env': process.env
        },
        build: {
          target: 'esnext', // you can also use 'es2020' here
        },
        optimizeDeps: {
          esbuildOptions: {
            target: 'esnext', // you can also use 'es2020' here
          },
        },
      });
    ```

    This configuration helps ensure that the WebAssembly module is correctly copied and accessible during development, preventing the `__wbindgen_add_to_stack_pointer` error from occurring.
  </Accordion>
</AccordionGroup>

<Note>
  **Still need help?**

  [Open a ticket](https://t.me/particle_developer_bot) with Particle's Developer Relations team through the dedicated Telegram support bot.
</Note>


# Introduction to Particle Auth
Source: https://developers.particle.network/social-logins/auth/introduction

Particle Auth acts as the core authentication and interaction component within Particle WaaS, powering wallet creation and management via social logins.

<img alt="Particle Network Auth APIs." />

<img alt="Particle Network Auth APIs." />

***

## Particle Auth the core component of Particle WaaS

**Particle Auth** is the core SDK for **wallet creation** and **account interaction**, powered by Particle’s Wallet-as-a-Service.

It supports **social logins** out of the box and gives you **full control over the UI and user flow** for a branded onboarding experience.

<Note>Do you want to include Account Abstraction features? Check out the <Link href="/aa/introduction">Account Abstraction</Link> section.</Note>

### Get Started

The SDK is available on **web, desktop, and mobile**, with support across major platforms.

***

<CardGroup>
  <Card title="Web SDK" icon="code" href="/social-logins/auth/desktop-sdks/web">
    Interacting with Particle Auth within web applications using either JavaScript or TypeScript.
  </Card>

  <Card title="Unity (Desktop) SDK" icon="code" href="/social-logins/auth/desktop-sdks/unity">
    Interacting with Particle Auth within Desktop games made on Unity using C#.
  </Card>

  <Card title="Unity (Mobile) SDK" icon="code" href="/social-logins/auth/mobile-sdks/unity">
    Interacting with Particle Auth within Mobile games made on Unity using C#.
  </Card>

  <Card title="Android SDK" icon="code" href="/social-logins/auth/mobile-sdks/android">
    Interacting with Particle Auth on Android using Kotlin.
  </Card>

  <Card title="iOS SDK" icon="code" href="/social-logins/auth/mobile-sdks/ios">
    Interacting with Particle Auth on iOS using Swift or Objective-C.
  </Card>

  <Card title="Flutter SDK" icon="code" href="/social-logins/auth/mobile-sdks/flutter">
    Interacting with Particle Auth within applications made using Flutter.
  </Card>

  <Card title="React Native SDK" icon="code" href="/social-logins/auth/mobile-sdks/react">
    Interacting with Particle Auth within applications made using React Native.
  </Card>

  <Card title="Unreal Engine SDK" icon="code" href="/social-logins/auth/multi/unreal">
    Interacting with Particle Auth within applications made using Unreal Engine.
  </Card>

  <Card title="Cocos SDK" icon="code" href="/social-logins/auth/mobile-sdks/cocos">
    Interacting with Particle Auth within applications made using Cocos.
  </Card>
</CardGroup>


# Android (Kotlin) SDK - Auth
Source: https://developers.particle.network/social-logins/auth/mobile-sdks/android

Interacting with Particle Auth on Android using Kotlin.

# Particle Auth for Android

The **Particle Auth Android SDK** is the flagship mechanism for integrating Particle's Wallet-as-a-Service within Android applications. This SDK is the sole facilitator of Android integration for most applications and is built for simplicity.

As with the other **Particle Auth** SDKs, it requires only a few lines of code.

Unlike the Unity SDK and Web SDK, the Android SDK differs in installation and configuration; these specific intricacies and setup processes are detailed below.

***

## Getting Started

Using the **Particle Auth Android SDK** is straightforward but requires meeting a few minimum version prerequisites to ensure compatibility.

### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version: **8.5.1** or higher.
* Gradle Version: **8.9** or higher.

### Configuration

Before you begin using the **Particle Auth Android SDK**, you'll need a few required universal values across all **Particle Auth** SDKs.

These values are `projectId`, `clientKey`, and `appId`. All three can be retrieved by heading to the [Particle dashboard](https://dashboard.particle.network).

<Note>
  Find a full rundown in the [Dashboard Guide](/social-logins/dashboard).
</Note>

### Installation

Once you've created a project and application on the **Particle Dashboard**, you can install and initialize `ParticleNetwork`.

Start by declaring the Particle Auth SDK in your Gradle file.

```kotlin Kotlin theme={null}
repositories {
  google()
  mavenCentral()
  maven { setUrl("https://jitpack.io") }
  //...
}

dependencies {
   modules {
        module("org.bouncycastle:bcprov-jdk15to18") {
            replacedBy("org.bouncycastle:bcprov-jdk15on")
        }
        module("org.bouncycastle:bcprov-jdk18on") {
            replacedBy("org.bouncycastle:bcprov-jdk15on")
        }
    }
  implementation("network.particle:auth-core:${latest_version}")

  // Find the latest version of the SDK:
  // https://search.maven.org/search?q=g:network.particle
}
```

<Tip>
  For release updates, subscribe to the [GitHub
  repository](https://github.com/Particle-Network/particle-android).
</Tip>

Additionally, you'll need to declare specific configurations, such as inserting values above `projectId`, `clientKey`, and `appId` within the relevant `AndroidManifest.xml` file.

An example of such a configuration is attached below. Placeholders such as `pn_project_id` will need to be filled in.

```xml XML theme={null}
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="network.particle.wallet_plugin.example">
    <!-- AuthCore need add android:fullBackupContent  -->
    <application
        tools:replace="android:fullBackupContent"
        android:fullBackupContent="@xml/pn_backup_rules"
        >

    <!-- Particle AuthCore Start -->
    <activity
        android:name="com.particle.auth.controller.AuthCoreWebActivity"
        android:configChanges="orientation|keyboardHidden|screenSize"
        android:exported="true"
        android:launchMode="singleTask"
        android:theme="@style/ThemeAuthWeb">
        <intent-filter>
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />

        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="ac${PN_APP_ID}" />
        </intent-filter>
    </activity>
    <!-- Particle AuthCore End -->

    <meta-data
        android:name="particle.network.project_id"
        android:value="${pn_project_id}" />

    <meta-data
        android:name="particle.network.project_client_key"
        android:value="${pn_project_client_key}" />

    <meta-data
        android:name="particle.network.app_id"
        android:value="${pn_app_id}" />

    </application>
</manifest>
```

***

## Examples of utilization

### Initialize the SDK

Upon application startup, `ParticleNetwork` must be initialized to function correctly.

This can be done by calling the `init` method on `ParticleNetwork` and passing in the primary chain you intend to use within your application.

```kotlin Kotlin theme={null}
class App : Application() {

  override fun onCreate() {
    super.onCreate()

    // Initialize Particle Auth SDK for Ethereum
    ParticleNetwork.init(this, Env.PRODUCTION, Ethereum)

    // If you're using Solana, initialization looks like this
    ParticleNetwork.init(this, Env.PRODUCTION, Solana)
  }
}
```

### Switch Chain

To switch the chain after the initial configuration, use `AuthCore.switchChain`. This allows for asynchronous switching, just like the initial setup.

```kotlin Kotlin theme={null}
val chainInfo = ChainInfo.Polygon
AuthCore.switchChain(chainInfo, callback)

// For switching chains synchronously, without checking login status
ParticleNetwork.setChainInfo(chainInfo,callback)
```

### Login

`AuthCore.connect` triggers the standard login popup, which changes based on configurations like `loginType` (similar to the Web SDK's `preferredAuthType`) and `supportAuthTypeValues`.

This popup serves as the primary method for account creation and login for existing users.

The `AuthCore.login` function accepts the following parameters:

| **Field**         | **Type**                            | **Description**                                                                                                                                                                                                                                                    |
| ----------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| loginType         | LoginType                           | Specifies the preferred social login method. Options include `EMAIL`, `PHONE`, `TWITTER`, `GOOGLE`, `FACEBOOK`, `APPLE`, `DISCORD`, `GITHUB`, `TWITCH`, `MICROSOFT`, `LINKEDIN`, and `JWT`.                                                                        |
| account           | String                              | The account parameter allows you to pass an expected email, phone number, or JWT. This field is optional for email and phone logins but required for `JWT`. The phone number must be in E.164 format.                                                              |
| supportLoginTypes | List`<SupportLoginType>`            | Defines the supported social login methods. By default, all options are supported: `EMAIL`, `PHONE`, `FACEBOOK`, `GOOGLE`, `APPLE`, `TWITTER`, `DISCORD`, `GITHUB`, `TWITCH`, `MICROSOFT`, and `LINKEDIN`. You can also specify a subset of these types if needed. |
| prompt            | LoginPrompt?                        | Controls the prompt displayed after social login. Options are `None`, `Consent`, or `SelectAccount`. This is only supported by Google, Discord, and Microsoft.                                                                                                     |
| loginPageConfig   | LoginPageConfig?                    | Customizes the UI of the login page, including the project name, icon, and description.                                                                                                                                                                            |
| loginCallback     | AuthCoreServiceCallback`<UserInfo>` | Callback triggered after the login attempt.<br /><br />**Success**: Returns `UserInfo`.<br />**Failure**: Returns `ErrorInfo`.                                                                                                                                     |
|                   |                                     |                                                                                                                                                                                                                                                                    |

<Tip>You can use your existing user base or authentication method with Particle Auth through JWT. This way, your users can still log in with their current accounts. Check [Custom Authentication (JWT)](/social-logins/configuration/auth/jwt) to learn how to configure it.</Tip>

```kotlin Kotlin theme={null}
// Connect with Email or Phone
AuthCore.connect(LoginType.EMAIL, loginCallback = connectCallback)
AuthCore.connect(LoginType.PHONE, loginCallback = connectCallback)
// Connect with Google
AuthCore.connect(SocialLoginType.GOOGLE, prompt = LoginPrompt.SelectAccount,connectCallback)
// Connect with JWT
AuthCore.connect("JWT",connectCallback =connectCallback)

// Send verification code to email or phone number, the phone number must be in E.164 format.
AuthCore.sendCode(CodeReq(email = "xxx@xx.com"), callback)
AuthCore.sendCode(CodeReq(phone = "+11234567890"), callback)
// After sending the verification code, you can use the user-entered code to log in. With this approach, you can customize the UI and simply call our API for the login process.
AuthCore.connect(LoginReq(email = "xxx@xx.com", code = "Verification code received by the user"),connectCallback)
AuthCore.connect(LoginReq(phone = "+11234567890", code = "Verification code received by the user"),connectCallback)

val connectCallback = object :AuthCoreServiceCallback<UserInfo>{
    override fun success(output: UserInfo) {}
    override fun failure(errMsg: ErrorInfo) {}
}
```

### UserInfo and Address Retrieval (post-login)

After a successful login, you can retrieve detailed user information by calling the following methods.

```kotlin Kotlin theme={null}
AuthCore.getUserInfo()
AuthCore.evm.getAddress()
AuthCore.solana.getAddress()
```

### Logout

`AuthCore.disconnect` logs the user out of their current session and returns them to their pre-login state.

```kotlin Kotlin theme={null}
AuthCore.disconnect(object : ResultCallback {
  override fun success() {
    // Handle success
  }

  override fun failure() {
    // Handle error
  }
})
```

### Is User Logged In

`AuthCore.isLogin` returns a Boolean indicating whether the user is currently logged in with Particle.

```kotlin Kotlin theme={null}
AuthCore.isConnected()
```

If the user logs in on another device, causing their token to become invalid, you can use `syncUserInfo` to synchronize the information.

```
try{
	val syncUserInfoStatus = AuthCore.syncUserInfo()
}catch(e:ServerException){
	//token is invalid
}
```

### Signatures

Once `ParticleNetwork` has been initialized and a user has successfully logged in, signatures can be proposed for confirmation through a pop-up.

### EVM

### Signing Messages (EIP191)

To request an **EIP191** signature from a user's embedded wallet, you can use either the `AuthCore.evm.personalSign` or `AuthCore.evm.personalSignUnique` method.

If you need the same message to return a unique signature each time, use the `AuthCore.evm.personalSignUnique` method. Otherwise, the `AuthCore.evm.personalSign`method is generally recommended.

| Field                | Type                               | Description                                                                                                                    |
| :------------------- | :--------------------------------- | :----------------------------------------------------------------------------------------------------------------------------- |
| `hexUnSignedMessage` | `PrefixedHexString`                | A required field that accepts either a hexadecimal string starting with '0x' or a human-readable string.                       |
| `callback`           | `AuthCoreSignCallback<SignOutput>` | Handles the response of the signing operation.<br />**Success**: Returns the signature.<br />**Failure**: Returns `ErrorInfo`. |

```kotlin signAndSendTransaction (Kotlin) theme={null}
AuthCore.evm.personalSign(hexUnSignedMessage: PrefixedHexString, callback)
AuthCore.evm.personalSignUnique(hexUnSignedMessage: PrefixedHexString, callback)
```

### Signing Typed Data V4 (EIP712)

To request an EIP712 signature from a user's embedded wallet, you can use either the `AuthCore.evm.signTypedData` or `AuthCore.evm.signTypedDataUnique` method.

If you need the same message to return a unique signature each time, use the `AuthCore.evm.signTypedDataUnique` method. Otherwise, the `AuthCore.evm.signTypedData` method is generally recommended.

| Field      | Type                               | Description                                                                                                                    |
| :--------- | :--------------------------------- | :----------------------------------------------------------------------------------------------------------------------------- |
| `data `    | `PrefixedHexString`                | A hexadecimal string that must start with "0x".                                                                                |
| `callback` | AuthCoreSignCallback`<SignOutput>` | Handles the response of the signing operation.<br />**Success**: Returns the signature.<br />**Failure**: Returns `ErrorInfo`. |

```kotlin signAndSendTransaction (Kotlin) theme={null}
AuthCore.evm.signTypedData(data: PrefixedHexString, callback)
AuthCore.evm.signTypedDataUnique(data: PrefixedHexString, callback)
```

### Transaction

To send a transaction from a user's embedded wallet, you can use `AuthCore.evm.sendTransaction`.

| Field         | Type                               | Description                                                                                                                    |
| :------------ | :--------------------------------- | :----------------------------------------------------------------------------------------------------------------------------- |
| `transaction` | `PrefixedHexString`                | A hexadecimal string that must start with "0x".                                                                                |
| `callback`    | `AuthCoreSignCallback<SignOutput>` | Handles the response of the signing operation.<br />**Success**: Returns the signature.<br />**Failure**: Returns `ErrorInfo`. |
| `feeMode`     | `FeeMode`                          | The mode for handling transaction fees. The default is `FeeModeNative()`. Use this field only when AA mode is enabled.         |

```
AuthCore.evm.sendTransaction(transaction: PrefixedHexString, callback: AuthCoreSignCallback<SignOutput>, feeMode: FeeMode = FeeModeNative())
```

You can create an **EVM** transaction using the `ParticleNetwork.evm.createTransaction()` method.

```
val tx = ParticleNetwork.evm.createTransaction()
val hexTx = tx.serialize()
```

### Solana

### Signing Messages

To request a signature from a user's embedded wallet, use `AuthCore.solana.signMessage`.

| Field      | Type                               | Description                                                                                                                    |
| :--------- | :--------------------------------- | :----------------------------------------------------------------------------------------------------------------------------- |
| `message`  | `String`                           | A base58-formatted string that is required for the signature request.                                                          |
| `callback` | `AuthCoreSignCallback<SignOutput>` | Handles the response of the signing operation.<br />**Success**: Returns the signature.<br />**Failure**: Returns `ErrorInfo`. |

```swift theme={null}
val message = Base58Utils.encodeFromString("This is the message that is being signed")
AuthCore.solana.signMessage(message, chainInfo: nil)
```

***

### Transaction

To send a transaction from a user's embedded wallet, use `AuthCore.solana.signAndSendTransaction`.

| Field         | Type                               | Description                                                                                                              |
| :------------ | :--------------------------------- | :----------------------------------------------------------------------------------------------------------------------- |
| `transaction` | `String`                           | A base58-formatted string that is required for the transaction.                                                          |
| `callback`    | `AuthCoreSignCallback<SignOutput>` | Handles the response of the transaction.<br />**Success**: Returns the signature.<br />**Failure**: Returns `ErrorInfo`. |

```kotlin theme={null}
AuthCore.solana..signAndSendTransaction(transaction: Base58String, callback: AuthCoreSignCallback<SignOutput>)
```

To sign a transaction from a user's embedded wallet, use \`\`AuthCore.solana.signTransaction\`.

| Field         | Type                               | Description                                                                |
| :------------ | :--------------------------------- | :------------------------------------------------------------------------- |
| `transaction` | `String`                           | A base58-formatted string is required.                                     |
| `callback`    | `AuthCoreSignCallback<SignOutput>` | **Success**: Returns the signature.<br />**Failure**: Returns `ErrorInfo`. |

```kotlin theme={null}
AuthCore.solana..signTransaction(transaction: Base58String, callback: AuthCoreSignCallback<SignOutput>)
```

To sign multiple transactions from a user's embedded wallet, use `AuthCore. Solana.signAllTransactions`.

| Field                    | Type                                  | Description                                                                 |
| :----------------------- | :------------------------------------ | :-------------------------------------------------------------------------- |
| `serializedTransactions` | `List<Base58String>`                  | A list of base58-formatted strings is required.                             |
| `callback`               | `AuthCoreSignCallback<SignAllOutput>` | **Success**: Returns the signatures.<br />**Failure**: Returns `ErrorInfo`. |

```swift theme={null}
AuthCore.solana.signAllTransactions(transaction: Base58String, callback: AuthCoreSignCallback<SignAllOutput>)
```

### Open Account and Security

If you want to force the "Account and Security" options to open on-screen—where you can manage master passwords, payment passwords, additional accounts, and more—call `AuthCore.openAccountAndSecurity`.

```kotlin Kotlin theme={null}
AuthCore.openAccountAndSecurity()
```

### Set Security Account Config

Within the security settings, specific popups can be configured to display during confirmation or when entering the wallet UI.

These include `promptSettingWhenSign` for payment (signature) passwords and `promptMasterPasswordSettingWhenLogin` for a login-based master password.

By default, `promptSettingWhenSign` is set to 1, prompting the user on the first signature for a given account. If set to 0, the prompt is never shown; if set to 2, it is shown for every signature confirmation.

The same logic applies to `promptMasterPasswordSettingWhenLogin`, though it defaults to 0.

```kotlin Kotlin theme={null}
ParticleNetwork.setSecurityAccountConfig(
  SecurityAccountConfig(
      promptSettingWhenSign = 1,
      promptMasterPasswordSettingWhenLogin = 2
  )
)
```

### Master Password and Payment Password

Users can set a master password and payment password to protect their assets. To set or change the master password, call `auth.changeMasterPassword`.

To set or change the payment password, call `AuthCore.openAccountAndSecurity()`.

```kotlin theme={null}
// Check if user has a master password set
val result = AuthCore.hasMasterPassword()
// Set or change master password
AuthCore.changeMasterPassword()

// Check if user has payment password set
val result = AuthCore.hasPaymentPassword()
```

### Language Setting

You can force a specific language within the UI using `ParticleNetwork.setLanguage` and retrieve the currently active language with `ParticleNetwork.getAppliedLanguage`. The default language is English.

| Field          | Type           | Description                                                                                                                                                                |
| -------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `languageEnum` | `LanguageEnum` | The specific language to be used. Options include `ZH_CN`, `ZH_TW`, `EN`, `JA`, `KO`.                                                                                      |
| `isRelaunch`   | `Boolean`      | If true, the app will relaunch upon a language switch; if false, the activity will be recreated.                                                                           |
| `isInit`       | `Boolean`      | If `isRelaunch` is set to true, `isInit` defaults to true. The activity will not be recreated and should be called before methods like `signMessage` or `sendTransaction`. |

```kotlin theme={null}
ParticleNetwork.setLanguage(LanguageEnum.EN)
ParticleNetwork.getLanguage()
```

***

### Enable Blind Signing

Silently sign messages/transactions if the following conditions are met:

1. Your account is connected via **JWT**.
2. Your account does not have a payment password set.
3. `SecurityAccountConfig.promptSettingWhenSign` is set to 0. You can update this value by calling `ParticleNetwork.setSecurityAccountConfig`.

```kotlin theme={null}
AuthCore.setBlindEnable(true)
val result = AuthCore.getBlindEnable()
```


# Cocos (JavaScript) - Auth
Source: https://developers.particle.network/social-logins/auth/mobile-sdks/cocos

Interacting with Particle Auth within applications made using Cocos.

## Particle Auth for Cocos

**Particle Auth** supports Cocos through the Particle Auth Cocos SDK, enabling full integration of Particle's Wallet-as-a-Service within Cocos-based game applications.

The usage of Particle Auth with Cocos is nearly identical to [React Native (JavaScript)](/social-logins/auth/mobile-sdks/react), with the main differences being in prerequisites and initial setup.

This document will guide you through the setup process. For usage examples, refer to the [React Native (JavaScript)](/social-logins/auth/mobile-sdks/react) documentation.

## Getting Started

To start the setup process for the Particle Auth Cocos SDK, make sure your project meets the following prerequisites to ensure compatibility:

* **Cocos 3.7.2** or higher.
* For iOS:
  * **Xcode 15.0** or higher.
  * **CocoaPods 1.14.3** or higher.
  * **iOS 14** or higher.
* For Android:
  * Minimum **API Level 23** or higher.
  * Targets **API Level 31** or higher.
  * Java SDK **version 11**.

Next, you’ll need to retrieve three essential values from the [Particle dashboard](https://dashboard.particle.network), which are required across all of Particle’s SDKs: `projectId`, `clientKey`, and `appId`.

<Note>
  Find a full rundown in the [Dashboard Guide](/social-logins/dashboard)
</Note>

### Installation and configuration

To install and start using the Particle Auth Cocos SDK in your project, follow these steps:

#### Step 1: Copy the Core Assets

1. **Locate the Core Assets directory**:
   * Navigate to the [assets/Mobile/Core directory in the `particle-cocos` repository](https://github.com/Particle-Network/particle-cocos/tree/mobile/assets/Mobile/Core).

2. **Copy the Core Assets directory**:
   * Copy the entire `Core` folder to your project’s `assets` directory.

#### Step 2: Copy the Native Engine Files

1. **Locate the Native Engine directory**:
   * Navigate to the [native/engine directory in the `particle-cocos` repository](https://github.com/Particle-Network/particle-cocos/tree/mobile/native/engine).

2. **Copy the Native Engine directory**:
   * Copy the entire `engine` directory to your project’s `native` directory.

#### Android

If you're using Cocos on Android, the configuration is quite simple and purely requires the placement of the previously retrieved values (`projectId`, `clientKey`, and `appId`) within `$exportDir/proj/gradle.properties,` such as within the example below.

```kotlin gradle.properties theme={null}
android.enableJetifier=true

PN_PROJECT_ID = YOUR_PROJECT_ID

PN_PROJECT_CLIENT_KEY = YOUR_CLIENT_KEY

PN_APP_ID = YOUR_APP_ID
```

#### iOS

If you use iOS, the initial configuration will be more complicated. To begin, ensure you have a Podfile.

If you don't have one already, head over to the root of your Xcode project directory and run:

```shell Terminal theme={null}
pod init
```

Head into this newly generated (or existing) **Podfile** and remove all existing contents, then paste the configuration included below.

Alternatively, if you're already using other SDKs through **CocoaPods**, you can include the Particle Auth SDK declaration:

```ruby Ruby theme={null}
ENV['SWIFT_VERSION'] = '5'
platform :ios, '14.0'
source 'https://github.com/CocoaPods/Specs.git'

target 'boost_container' do
  use_frameworks!
end

target 'cocos_engine' do
  use_frameworks!
end

target 'ParticleCocosDemo-mobile' do
  use_frameworks!
  pod 'ParticleAuthService'
  pod 'ParticleNetworkBase'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
    config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
      end
    end
end
```

Additionally, you can run `pod install --repo-update`, then `open {your project}.xcworkspace` to update and see your project within Xcode.

Now that you've configured your [Particle dashboard](https://dashboard.particle.network), installed the SDK, and configured a Podfile, it's time to initialize the SDK with the aforementioned `projectId`, `clientKey`, and `appId` retrieved from the [Particle dashboard](https://dashboard.particle.network).

1. Create a `ParticleNetwork-Info.plist` file from the root of your corresponding Xcode project.

2. Paste the following text into this file:

   ```xml ParticleNetwork-Info.plist theme={null}
   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
   <dict>
   	<key>PROJECT_UUID</key>
   	<string>YOUR_PROJECT_UUID</string>
   	<key>PROJECT_CLIENT_KEY</key>
   	<string>YOUR_PROJECT_CLIENT_KEY</string>
   	<key>PROJECT_APP_UUID</key>
   	<string>YOUR_PROJECT_APP_UUID</string>
   </dict>
   </plist>
   ```

3. Replace the placeholders with the values retrieved from your project and application within the [Particle dashboard](https://dashboard.particle.network).

4. Drop the following files into your project and set the target at the main app. Make sure `Base58.swift`, `Model.swift`, and `ParticleAuthPlugin.swift` are marked within `TargetMembership`.

   <Note>If Xcode asks to make a Swift bridging file, select **Yes**.</Note>

<img alt="Particle Network Cocos." />

<img alt="Particle Network Cocos." />

5. Open your `AppDelegate` file and include a custom return within the `(BOOL)application:openURL:options:` method, as shown in the example below:

```Text AppDelegate theme={null}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    return [ParticleAuthSchemeManager handleUrl:url];
}
```

6. Within `AppDelegate`, ensure a project-specific import is included at the top of the file. This should be `#import "{project name}-Swift.h"`.

<Warning>
  <p>
    `JsbBridgeTest.m` and `JsbBridgeTest.h` are crucial components, serving as the core bridge between JS and native code.
  </p>

  <p>
    To prevent any issues arising from improper setup, ensure that the code within these files matches the code from the demo or includes the exact code from it.
  </p>
</Warning>

7. Finally, to configure your app scheme URL, select your app from "TARGETS" within the "Info" section, click the plus icon to add the URL types, and paste your scheme in "URL Schemes."

<Note>
  <p>Defining a scheme URL</p>
  <p>Your scheme URL should be "pn" concatenated with your `projectId`.</p>

  <p>
    For example, if your project app id is
    `63bfa427-cf5f-4742-9ff1-e8f5a1b9828f`, your scheme URL is
    `pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f`.
  </p>
</Note>

***

## Usage

Using the Particle Auth Cocos SDK is identical to the examples provided in the [React Native (JavaScript)](/social-logins/auth/mobile-sdks/react) documentation.

The only difference is the import statement, which should include the internal path `../../Core/particleAuth`, as shown below:

```js JavaScript theme={null}
import * as particleAuth from "../../Core/particleAuth";
```


# Flutter (Dart) - Auth
Source: https://developers.particle.network/social-logins/auth/mobile-sdks/flutter

Interacting with Particle Auth within applications made using Flutter.

## Particle Auth for Flutter

The **Particle Auth Flutter SDK** enables full-stack integration of Particle Auth into applications built on Flutter. This includes everything from the initial configuration of Particle's Wallet-as-a-Service to specific interactions.

In this case, Flutter can be leveraged in either Android or iOS environments, both to the same degree. This is done primarily through Dart.

<Note>Platform-specific configuration instructions, alongside examples of utilization, can be found below.</Note>

## Getting Started

Interaction with the Particle Auth Flutter SDK follows a standard approach consistent with other Particle Auth SDKs, though notable differences exist within the configuration process.

<Tip>
  The configuration process for this SDK varies significantly depending on whether you're using Flutter for Android or iOS.
</Tip>

To begin, you'll need to head over to the [Particle dashboard](https://dashboard.particle.network) and retrieve your `projectId`, `clientKey`, and `appId`.

<Note>
  Find a full rundown in the [Dashboard Guide](/social-logins/dashboard)
</Note>

### Adding the Particle Auth Flutter SDK to your application

Additionally, regardless of platform, you'll need to begin by adding `particle_auth_core` to your **Flutter** application; this is a requirement before moving onto platform-specific configuration.

```shell Terminal theme={null}
flutter pub add particle_auth_core
```

### Android configuration

#### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version : 8.5.1 or higher.
* Gradle Version : 8.9 or higher.

If you're building an Android application with Flutter, follow the steps below to configure Particle Auth. To begin, you'll need to go ahead and open 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 Auth runs appropriately:

1. `minSdkVersion`, which in most cases will be set to `23`.
2. `manifestPlaceholders["PN_PROJECT_ID"]`, the `projectId` previously retrieved from the Particle dashboard.
3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the `clientKey` previously retrieved from the Particle dashboard.
4. `manifestPlaceholders["PN_APP_ID"]`, the `appId` previously retrieved from the Particle dashboard.

```groovy build.gradle theme={null}
// Example
defaultConfig {
  applicationId "com.example.particle_auth_test"

  minSdkVersion 23 // Required by Particle Auth
  targetSdkVersion flutter.targetSdkVersion
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName

  manifestPlaceholders["PN_PROJECT_ID"] = "EXAMPLE"
  manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "EXAMPLE"
  manifestPlaceholders["PN_APP_ID"] = "EXAMPLE"
}
```

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`.

```groovy build.gradle theme={null}
// Example
compileOptions {
  sourceCompatibility JavaVersion.VERSION_17
  targetCompatibility JavaVersion.VERSION_17
}

kotlinOptions {
  jvmTarget = JavaVersion.VERSION_17.toString()
}

dataBinding {
  enabled = true
}
```

Finally, for dependency management, within `build.gradle` you'll need to ensure that the `repositories` object in both `buildscript` and `allprojects` has `maven { setUrl("https://jitpack.io") }` present, such as is shown below.

```groovy build.gradle theme={null}
// Example
buildscript {
  ...
  repositories {
      google()
      mavenCentral()
      maven { setUrl("https://jitpack.io") }  // Add this
  }

  dependencies {
      ...
  }
}


allprojects {
  repositories {
      google()
      mavenCentral()
      maven { setUrl("https://jitpack.io") }  // Add this
  }
}

...

```

***

### iOS configuration

If you're building an iOS application with Flutter, this also entails a unique and iOS-specific configuration process. 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 `apps/{project name}.xcworkspace`.

At the root of your Xcode project, create a new file, `ParticleNetwork-Info.plist`. Ensure this is marked under `Target Membership`.

Now, with a fresh `ParticleNetwork-Info.plist` file, go ahead and fill it in with the following:

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

Similar to the Android configuration, you'll need to fill in `PROJECT_UUID` (`projectId`), `PROJECT_CLIENT_KEY`, and `PROJECT_APP_UUID` (`appId`) with the corresponding values retrieved from the [Particle dashboard](https://dashboard.particle.network).

To enable Face ID for your app, add a usage description to your `Info.plist` file by including the following code:

```xml Info.plist theme={null}
<key>NSFaceIDUsageDescription</key>
  <string>We use Face ID for secure access to the app.</string>
```

Finally, you'll need to edit your Podfile to ensure `particle_auth_core` is properly imported. Head over to the [linked guide](https://github.com/Particle-Network/particle-flutter/blob/master/particle-auth-core/example/ios/Podfile) to complete this, if you haven't already.

<Note>
  <p>Another important note before continuing.</p>
  <p>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:</p>

  <p>
    ```ruby theme={null}
    post_install do |installer|
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
        end
      end
    end
    ```
  </p>
</Note>

***

## Examples of utilization

### Initialization

Before using the full extent of the SDK, you'll need to initialize it with `init`, passing in the specific chain to which you intend to primarily onboard within Particle's Wallet-as-a-Service. This is represented as an object containing chain info (often derived from `ChainInfo.{Chain}`).

```dart theme={null}
// Set relevant project info, retrieved from https://dashboard.particle.network
ParticleInfo.set(projectId, clientKey);
// Initialize ParticleAuth and ParticleAuthCore.
ParticleBase.init(ChainInfo.Ethereum, env);
ParticleAuthCore.init()
```

### Connect

After installing, configuring, and initializing Particle Auth, initiate the login process by using `ParticleAuthCore.connect`. This triggers a social login prompt, and upon successful authentication, a user account is created, unlocking the full SDK functionality.

`ParticleAuthCore.connect` takes the following parameters:

| Field              | Type                     | Description                                                                                                                                                                                                                                                                         |
| ------------------ | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `loginType`        | `LoginType`              | The specific social login to be used. This can be either `.email`, `.phone`, `.google`, `.apple`, `.jwt`, `.facebook`, `.twitter`, `.discord`, `.github`, `.twitch`, `.microsoft` or `linkedin`.                                                                                    |
| `account`          | `String?`                | (Optional) When `type` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. If passing a phone number, it must be in E.164 format. |
| `prompt`           | `SocialLoginPrompt?`     | (Optional) Changes what the OAuth provider prompts a user to do; either `.none`, `.consent`, or `.select_account`. Only Google, Discord and Microsoft support it.                                                                                                                   |
| `loginPageConfig`  | `LoginPageConfig?`       | (Optional) Controls login UI customization: contains project name, icon and description.                                                                                                                                                                                            |
| `supportAuthTypes` | `List<SupportAuthType>?` | The methods of authentication visible on the authentication popup UI. By default, this will be exclusive to the chosen social login method, although by passing in additional types, you can expand the UI to include the ability to login with those as an alternative to type.    |

<Tip>You can use your existing user base (account system) or a custom authentication method with Particle Connect through JWT. Click [here](/social-logins/configuration/auth/jwt) to learn how to configure JWT.</Tip>

```dart theme={null}
// Google or other social login
final userInfo = await ParticleAuthCore.connect(LoginType.google, prompt: SocialLoginPrompt.select_account);

// Email or phone login, facilitated through Particle's UI
final userInfo = await ParticleAuthCore.connect(LoginType.email, supportAuthTypes: SupportAuthType.values, prompt: SocialLoginPrompt.select_account);

// Custom authentication via JWT
final userInfo = await ParticleAuthCore.connect(LoginType.jwt, account: jwt);

// Configuration of a custom email or phone login page, programmatically driving verification codes
final result = await ParticleAuthCore.sendEmailCode("user@example.com");
final result = await ParticleAuthCore.sendPhoneCode("+11234567890"); // Must be in E.164 format

// After a code is sent, the user should enter it within your UI, upon which you can use it for connection
final userInfo = await ParticleAuthCore.connectWithCode(email: "user@example.com", code: code);
final userInfo = await ParticleAuthCore.connectWithCode(phone: "+11234567890", code: code);
```

### Is Connected

There may be scenarios where it is important to know whether a current session (a user) is logged in with Particle Auth. This is achieved through `ParticleAuthCore.isConnected` (server-side check).

```dart theme={null}
final isConnected = await ParticleAuthCore.isConnected();
```

### Disconnect

To exit an existing session (logging a user out), call `ParticleAuthCore.disconnect`.

```dart theme={null}
final result = await ParticleAuthCore.disconnect();
```

### Get User Info

To retrieve an object containing detailed user information, call `ParticleAuthCore.getUserInfo`.

```dart theme={null}
final userInfo = await ParticleAuthCore.getUserInfo();
```

### Get Address

To retrieve the address, call `Evm.getAddress` or `Solana.getAddress`.

```dart theme={null}
final address = await Evm.getAddress();
final address = await Solana.getAddress();
```

### Sign Message (EIP191)

To request an EIP191 signature from a user's embedded wallet, you can use either the `Evm.personalSign` or `Evm.personalSignUnique` method.

If you need the same message to return a unique signature each time, use the `Evm.personalSignUnique` method. Otherwise, the `Evm.personalSign` method is generally recommended. On Solana, you can call `Solana.signMessage`, you can pass in a UTF-8/readable string.

| Field     | Type     | Description                                                                       |
| --------- | -------- | --------------------------------------------------------------------------------- |
| `message` | `String` | On Evm requires a hexadecimal string, on Solana, requires a UTF-8/readable string |

```dart theme={null}
final messageHex = "0x${StringUtils.toHexString("Hello Particle")}";
String signature = await Evm.personalSign(messageHex);
String signature = await Evm.personalSignUnique(messageHex);

const message = "Hello Particle";
final signature = await Solana.signMessage(message);
```

### Sign Transaction

This is a **Solana-specific** method for signing a transaction without sending it. Similar to message signing, this will prompt a signature in-UI with details about the transaction.

Programmatically, the proposed transaction should be formatted as a (converted to a) base58 string. Passing in an object directly will not work in this case.

| Field         | Type     | Description              |
| ------------- | -------- | ------------------------ |
| `transaction` | `String` | Requires a base58 string |

```dart theme={null}
final signature = await Solana.signTransaction(transaction);
```

### Sign All Transactions

Following the method above, you can use `Solana.signAllTransactions` to propose a collection of **Solana** transactions for signature, rather than just a single transaction.

| Field          | Type           | Description                           |
| -------------- | -------------- | ------------------------------------- |
| `transactions` | `List<String>` | Each element requires a base58 string |

```dart theme={null}
List<String> signatures = await Solana.signAllTransactions(transactions);
```

### Sign and Send Transaction

For more generalized transaction execution, `Evm.sendTransaction` and sendTransaction`and`Solana.signAndSendTransaction\` will be the primary methods used in virtually every scenario.

This will propose a signature (on both EVM and Solana) and then immediately push it to the network once confirmed.

| Field         | Type     | Description                                                               |
| ------------- | -------- | ------------------------------------------------------------------------- |
| `transaction` | `String` | On Evm requires a hexadecimal string, on Solana, requires a base58 string |

```dart theme={null}
final signature = await Evm.sendTransaction(transaction);
final signature = await Solana.signAndSendTransaction(transaction);
```

### Sign Typed Data V4 (EIP712)

To request an EIP712 signature from a user's embedded wallet, you can use the `Evm.signTypedData` or `Evm.signTypedDataUnique` method.

If you need the same message to return a unique signature each time, use the `Evm.signTypedDataUnique` method. Otherwise, the `Evm.signTypedData` method is generally recommended.

| Field     | Type     | Description                   |
| --------- | -------- | ----------------------------- |
| `message` | `String` | Requires a hexadecimal string |

```dart theme={null}
// your typed data is a json string
String typedDataHex = "0x${StringUtils.toHexString(typedData)}";

String signature = await Evm.signTypedData(typedDataHex);
String signature = await Evm.signTypedDataUnique(typedDataHex);
```

### Set Chain Info

To change the chain after it’s initially defined in `init`, you can use `ParticleBase.setChainInfo` for a synchronous update or `ParticleAuthCore.switchChain` for an asynchronous update, both typically using `ChainInfo.{Chain}`.

```dart theme={null}
await ParticleBase.setChainInfo(ChainInfo.Ethereum);

await ParticleAuthCore.switchChain(ChainInfo.Ethereum);
```

### Get Chain Info

To retrieve the currently selected (primary) chain in an active session, use `ParticleBase.getChainInfo`. This returns a `ChainInfo` object containing:

* `name`: The chain's name (e.g., Ethereum).
* `id`: The ID of the chain (e.g., 11155111).
* `network`: The specific network associated with the chain ID (e.g., Sepolia).

```dart theme={null}
final chainInfo = await ParticleBase.getChainInfo();
int id = chainInfo.id;
String name = chainInfo.name;
String network = chainInfo.network;
```

### Set Security Account Config

Another important component of integrating the Particle Auth SDK (Wallet-as-a-Service) is the (optional) security account requirements enforced upon application users.

For all Particle accounts, various security options are available, including:

* **Master Password**: A non-recoverable password required upon login.
* **Payment Password**: A PIN required for transaction signatures.

With the SDK, you can determine how often a user is prompted to configure their security settings. This control is facilitated by `ParticleBase.setSecurityAccountConfig`, where you pass in a `SecurityAccountConfig` object with two parameters:

| Field                                  | Type  | Description                                         |
| -------------------------------------- | ----- | --------------------------------------------------- |
| `promptSettingWhenSign`                | `int` | The security account config prompts (default is 1). |
| `promptMasterPasswordSettingWhenLogin` | `int` | The master password prompts (default is 0).         |

* `0` means a prompt is never shown requesting this setting.
* `1` means a prompt is shown only upon the first startup.
* `2` means a prompt is shown every time.
* `3` means force set payment password before sign.

```dart theme={null}
final config = SecurityAccountConfig(1, 2);
ParticleBase.setSecurityAccountConfig(config);
```

### Open Account and Security Page

Following the above, if you'd like to force the opening of account/security settings (in-UI), you can do so with `ParticleAuthCore.openAccountAndSecurity`.

```dart theme={null}
await ParticleAuthCore.openAccountAndSecurity();
```

### Has Master Password, Payment Password, Security Account

Similarly to the `isConnected` function covered prior, there are various scenarios in which knowing whether or not a user has specific security settings enabled may be useful.

In the case of the Particle Auth Flutter SDK, this can happen in one of two ways:

With the built-in `ParticleAuthCore.hasMasterPassword`, `ParticleAuthCore.hasPaymentPassword`, and `ParticleAuthCore.changeMasterPassword` methods.

```dart theme={null}
await ParticleAuthCore.hasMasterPassword();
await ParticleAuthCore.hasPaymentPassword();
await ParticleAuthCore.changeMasterPassword();
```

### Set Appearance

You can forcibly set a specific appearance within the UI using `ParticleBase.setAppearance`. By default, it will follow the current system setting.

| Field        | Type         | Description                                                                          |
| ------------ | ------------ | ------------------------------------------------------------------------------------ |
| `appearance` | `Appearance` | The specific appearance to be used. This can be either `.system`, `.dark`, `.light`. |

```dart theme={null}
// This is the default setting
ParticleBase.setAppearance(Appearance.system);
// Dark mode
ParticleBase.setAppearance(Appearance.dark);
// Light mode
ParticleBase.setAppearance(Appearance.light);
```

### Set and Get Language

You can forcibly set a specific language to be used within the UI using `ParticleBase.setLanguage`, with the retrieval of the currently active language facilitated by `ParticleBase.getLanguage`. By default, this is set to English.

| Field      | Type       | Description                                                                                       |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------- |
| `language` | `Language` | The specific language to be used. This can be either `.en`, `.ja`, `.zh_hans`, `.zh_hant`, `.ko`. |

```dart theme={null}
ParticleBase.setLanguage(Language.en)

ParticleBase.getLanguage()
```

***

### Blind Sign Enable

Silently sign messages/transactions, this switch will work if the following conditions are met:

1. your account is connected with JWT
2. your account does not set payment password
3. SecurityAccountConfig.promptSettingWhenSign is 0, you can call `ParticleBase.setSecurityAccountConfig` to update its value.

```dart theme={null}
// Enable blind signing
ParticleAuthCore.setBlindEnable(enable);
// Retrieve a Boolean representing whether or not blind signing is enabled
final result = ParticleAuthCore.getBlindEnable();
```

***

### Filter Unsupported Countries (Phone Authentication)

If necessary, you can restrict specific countries from authenticating via phone number; upon entering a phone number originating from a country specified here, the login modal will block the user.

| Field         | Type           | Description                                                                                                    |
| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------- |
| `isoCodeList` | `List<String>` | [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code list, such as the US, the UK, etc. |

```dart theme={null}
List<String> isoCodeList = ['US', 'CA', 'GB'];
ParticleBase.setUnsupportCountries(isoCodeList);
```

***

## `EvmService` utilization examples

In addition to `ParticleAuthCore` for authentication and interaction with Particle's Wallet-as-a-Service, the Flutter SDK also includes a class, `EvmService`, for general interaction with EVM chains.

### Write Contract

`EvmService.writeContract` allows you to execute a write contract call defined by a specific method and set of parameters. This requires a corresponding ABI, contract address, and requester public address.

| Field             | Type           | Description                                                                 |
| ----------------- | -------------- | --------------------------------------------------------------------------- |
| `address`         | `String`       | The user's public address.                                                  |
| `contractAddress` | `String`       | The contract address.                                                       |
| `methodName`      | `String`       | The method name that defined in the contract, such as `mint`, `balanceOf`.  |
| `parameters`      | `List<Object>` | The parameters of this method.                                              |
| `abiJsonString`   | `String`       | The abi json string of this method.                                         |
| `gasFeeLevel`     | `GasFeeLevel`  | (Optional) The gas fee level, `high`, `medium` or `low`, default is `high`. |

```dart theme={null}
String contractAddress = "Your contract address";
String methodName = "Your method name"; // This is your contract method name, like balanceOf, mint.
List<Object> params = <Object>["0x1"]; // This is the method params, each parameter requires a hexadecimal string.

// ABI json string for the contract in question.
// For example,
// [{\"inputs\":[{\"internalType\":\"uint256\",\"name\":\"quantity\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"amount\",\"type\":\"uint256\"}],\"name\":\"mint\",\"outputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"function\"}]
const abiJsonString = null;
final result = EvmService.writeContract(publicAddress, contractAddress, methodName, params, abiJsonString, gasFeeLevel: GasFeeLevel.high);
```

### Read Contract

`EvmService.readContract` allows you to execute a read-only contract call defined by a specific method and set of parameters. This requires a corresponding ABI, contract address, and requester public address.

| Field             | Type           | Description                                                                |
| ----------------- | -------------- | -------------------------------------------------------------------------- |
| `address`         | `String`       | The user's public address.                                                 |
| `contractAddress` | `String`       | The contract address.                                                      |
| `methodName`      | `String`       | The method name that defined in the contract, such as `mint`, `balanceOf`. |
| `parameters`      | `List<Object>` | The parameters of this method.                                             |
| `abiJsonString`   | `String`       | The abi json string of this method.                                        |

```dart theme={null}
String publicAddress = "your public address";
String contractAddress = "your contract address";
String methodName ="your method name"; // ex: balanceOf, mint
List<Object> parameters = <Object>["0x1"];  // This is the method params, each parameter requires a hexadecimal string.

// ex: [{"inputs":[{"internalType":"uint256","name":"quantity","type":"uint256"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"mint","outputs":[],"stateMutability":"nonpayable","type":"function"}]
const abiJsonString = null;

final result = await EvmService.readContract(publicAddress, contractAddress, methodName, parameters, abiJsonString);
```

### Create Transaction

`EvmService.createTransaction` facilitates the construction of a transaction object derived from the standard `from`, `to` (`receiver` in this example), `amount` (`value`), and `data` fields. This transaction, once constructed with `EvmService.createTransaction`, can be passed for in-UI proposal with `ParticleAuthCore.sendTransaction`.

| Field         | Type          | Description                                                                                                                                   |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `from`        | `String`      | The user's public address.                                                                                                                    |
| `data`        | `String`      | The transaction's data.                                                                                                                       |
| `value`       | `BigInt`      | The native amount.                                                                                                                            |
| `to`          | `String`      | If you send a erc20, erc721, erc1155 or interact with a contract, this is the contract address, if you send native, this is receiver address. |
| `gasFeeLevel` | `GasFeeLevel` | (Optional) the gas fee level, `high`, `medium` or `low`, default is `high`.                                                                   |

```dart theme={null}
String from = "Your public address";
String receiver = "Receiver address"
String contractAddress = "Contract address"
BigInt amount = BigInt.from(1000000000000000);
String to = contractAddress;
final data =  await EvmService.erc20Transfer(contractAddress, receiver, amount);

final transaction = await EvmService.createTransaction(from, data, amount, to, gasFeeLevel: GasFeeLevel.high);
```

### Estimate Gas

Given a standard transaction structure (a detached set of values as shown below), you can estimate the gas consumption for a specified transaction using the `EvmService.ethEstimateGas` method.

This acts as a wrapper for `eth_estimateGas` to simulate and retrieve the estimated gas required.

```dart theme={null}
final gasLimit = await EvmService.ethEstimateGas(from, to, value, data);
```

### Get Suggested Gas Fees

To retrieve categorized gas price suggestions (3 categories scaling from low to high) based upon current network conditions, you can call `EvmService.suggestedGasFees`.

```dart theme={null}
final gasFees = await EvmService.suggestedGasFees();
```

### Get Tokens and NFTs

`EvmService` also extends to Data API methods such as `getTokensAndNFTs`, which returns a highly detailed JSON list of ERC20 tokens and ERC721 NFTs belonging to a specified address.

This is accessible through `EvmService.getTokensAndNFTs`, passing in the public address to retrieve the tokens and NFTs. Also, you can retrieve tokens from `getTokens` or NFTs from `getNFTs`

| Field            | Type           | Description                    |
| ---------------- | -------------- | ------------------------------ |
| `address`        | `String`       | The user's public address.     |
| `tokenAddresses` | `List<String>` | The specific tokens' addresses |

```dart theme={null}
final result = await EvmService.getTokensAndNFTs(publicAddress, []);
final result = await EvmService.getTokens(publicAddress, []);
final result = await EvmService.getNFTs(publicAddress, []);
```

### Get Transactions by Address

Similar to the former method, `EvmService.getTransactionsByAddress` enables the retrieval of a detailed JSON response containing a complete list of transactions involving a specified address.

```dart theme={null}
final result = await EvmService.getTransactionsByAddress(publicAddress);
```

### Get Price

To retrieve the price of specific tokens, call `EvmService.getPrice`.

| Field            | Type           | Description                                                       |
| ---------------- | -------------- | ----------------------------------------------------------------- |
| `tokenAddresses` | `List<String>` | The tokens's addresses, for native token, you can pass `"native"` |
| `currencies`     | `List<String>` | The price unity, such as `"usd"`                                  |

```dart theme={null}
final result = await EvmService.getPrice(tokenAddresses, currencies);
```

### Basic RPC Method

You can call any basic EVM RPC method through `EvmService.rpc`

```dart theme={null}
final result = await EvmService.rpc(method, params);
```

## `SolanaService` utilization examples

In addition to `ParticleAuth` for authentication and interaction with Particle's Wallet-as-a-Service, the Flutter SDK also includes a class, `SolanaService`, for general interaction with Solana chains.

### Get Tokens and NFTs

`SolanaService` also extends to Data API methods such as `getTokensAndNFTs`, which returns a highly detailed JSON list of SPL tokens and NFTs belonging to a specified address. This is accessible through `SolanaService.getTokensAndNFTs`, passing in the public address to retrieve the tokens and NFTs of.

| Field              | Type     | Description                 |
| ------------------ | -------- | --------------------------- |
| `address`          | `String` | The user's public address.  |
| `parseMetadataUri` | `bool`   | if parse the nft meta data. |

```dart theme={null}
final result = await SolanaService.getTokensAndNFTs(publicAddress, true);
```

### Serialize Transactions

`SolanaService.serializeSolTransaction` facilitates the construction of a SOL transaction object,

`SolanaService.serializeSplTokenTransaction` facilitates the construction of a Spl-token transaction object,

`SolanaService.serializeWSolTokenTransaction` facilitates the construction of a unwrap WSOL transaction object.

These transactions, once constructed, can be passed for in-UI proposal with `Solana.signAndSendTransaction`.

<CodeGroup>
  ```dart Send sol theme={null}
  final transaction = SerializeSOLTransaction();
  transaction.lamports = TestAccount.solana.amount.toInt();
  transaction.receiver = TestAccount.solana.publicAddress;
  transaction.sender = publicAddress;

  final result = await SolanaService.serializeSolTransaction(transaction);
  final serializedTransaction = result["transaction"]["serialized"];
  ```

  ```dart Send spl token theme={null}
  final transaction = SerializeSplTokenTransaction();
  transaction.amount = TestAccount.solana.amount.toInt();
  transaction.receiver = TestAccount.solana.publicAddress;
  transaction.mint = TestAccount.solana.tokenContractAddress;
  transaction.sender = publicAddress;

  final result = await SolanaService.serializeSplTokenTransaction(transaction);
  final serializedTransaction = result["transaction"]["serialized"];
  ```

  ```dart Unwrap WSOL theme={null}
  final transaction = SerializeWSOLTransaction();
  transaction.address = publicAddress;

  final result = await SolanaService.serializeWSolTokenTransaction(transaction);
  final serializedTransaction = result["transaction"]["serialized"];
  ```
</CodeGroup>

### Get Price

To retrieve the price of specific tokens, call `SolanaService.getPrice`.

| Field            | Type           | Description                                                       |
| ---------------- | -------------- | ----------------------------------------------------------------- |
| `tokenAddresses` | `List<String>` | The tokens's addresses, for native token, you can pass `"native"` |
| `currencies`     | `List<String>` | The price unity, such as `"usd"`                                  |

```dart theme={null}
final result = await SolanaService.getPrice(tokenAddresses, currencies);
```

### Get Transactions by address

To retrieve transactions executed by a specific a address, call `SolanaService.getTransactionsByAddress`.

```dart theme={null}
final result = await SolanaService.getTransactionsByAddress(address);
```

### Get Token by Token Address

To obtain the balance of a specific token at a given address, call `SolanaService.getTokenByTokenAddresses`

| Field            | Type           | Description                |
| ---------------- | -------------- | -------------------------- |
| `address`        | `String`       | The user's public address. |
| `tokenAddresses` | `List<String>` | The tokens' addresses      |

```dart theme={null}
await SolanaService.getTokenByTokenAddresses(address, tokenAddresses);
```

### Basic RPC Method

Any basic Solana RPC method can be called through `SolanaService.rpc`.

```dart theme={null}
await SolanaService.rpc(method, params);
```


# iOS (Swift/Obj-C) - Auth
Source: https://developers.particle.network/social-logins/auth/mobile-sdks/ios

Interacting with Particle Auth on iOS using Swift or Objective-C.

## Particle Auth for iOS

The Particle Auth iOS SDK is the primary means of integrating Particle's Wallet-as-a-Service within applications on iOS. From initialization and configuration to onboarding and account utilization, this SDK acts as the master library for interacting with Particle on iOS.

The Particle Auth iOS SDK follows configuration and implementation mechanisms similar to the Particle Auth Android SDK. The specifics of integration, along with several examples, will be covered below.

## Getting Started

Implementation of the Particle Auth iOS SDK only takes a few lines of code, although before getting to that point, you'll need to meet a few key prerequisites in mind to ensure compatibility.

### Prerequisites

* Xcode **15.0** or later.
* CocoaPods **1.14.3** or higher.
* Your project must target these platform versions or later:
  * iOS **14**.

### Configuration

To begin the initialization process, you must head over to the [Particle dashboard](https://dashboard.particle.network) and create a project alongside a corresponding application.

These will control specific customizations, statistics, and more for your instance of Particle's Wallet-as-a-Service. After creating an application, you'll need to retrieve three key values: `projectId`, `clientKey`, and `appId`. We'll be using these down the road.

<Note>
  Find a guide on how to set up a project and find the required keys: [Dashboard Guide](/social-logins/dashboard).
</Note>

### Installation

Now that you've created a project and an application within the [Particle dashboard](https://dashboard.particle.network), you'll need to go ahead and install the Particle Auth SDK using CocoaPads (assuming you meet the previously mentioned minimum version requirements).

1. If you don't already have a Podfile, create one from the root of your project directory with:

   ```shell Terminal theme={null}
   pod init
   ```

2. Within the newly created Podfile, add the `ParticleAuthCore`, `ParticleMPCCore`, and `Thresh` pod.

   ```ruby Podfile theme={null}
   pod 'ParticleAuthCore'
   pod 'ParticleMPCCore'
   pod 'Thresh'
   ```

3. Install the pods, then open your .xcworkspace file to see the project in Xcode.

   ```shell Terminal theme={null}
   pod install --repo-update
   open your-project.xcworkspace
   ```

<Tip>
  For release updates, subscribe to the [GitHub
  repository](https://github.com/Particle-Network/particle-ios).
</Tip>

#### Podfile Configuration

Additionally, you'll need to ensure that your resulting Podfile is properly configured and contains a snippet similar to the example below.

```ruby Podfile theme={null}
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end
```

#### Initialization

Now that you've configured your [Particle dashboard](https://dashboard.particle.network), installed the SDK, and configured a Podfile, it's time to initialize the SDK with the aforementioned `projectId`, `clientKey`, and `appId` retrieved from the [Particle dashboard](https://dashboard.particle.network).

1. Create a `ParticleNetwork-Info.plist` file from the root of your corresponding Xcode project.

2. Paste the following text into this file:

   ```xml ParticleNetwork-Info.plist theme={null}
   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
   <dict>
   	<key>PROJECT_UUID</key>
   	<string>YOUR_PROJECT_UUID</string>
   	<key>PROJECT_CLIENT_KEY</key>
   	<string>YOUR_PROJECT_CLIENT_KEY</string>
   	<key>PROJECT_APP_UUID</key>
   	<string>YOUR_PROJECT_APP_UUID</string>
   </dict>
   </plist>
   ```

3. Replace the placeholders with the values retrieved from your project and application within the [Particle dashboard](https://dashboard.particle.network).

4. Import the `ParticleNetworkBase` module in your `AppDelegate.swift` file.

   ```swift AppDelegate.swift theme={null}
   import ParticleNetworkBase
   ```

5. Initialize the ParticleNetwork service, which is typically located within your app's `application:didFinishLaunchingWithOptions` method:

   ```swift AppDelegate.swift theme={null}
   // Set a primary network, derived from ChainInfo
   // For release, this can be set to DevEnvironment.production
   ParticleNetwork.initialize(config: .init(chainInfo: .ethereum, devEnv: .debug))
   ```

6. Add Privacy - Face ID Usage Description to your info.plist file, head over to your `Info.plist` file and include the following snippet:

   ```xml Info.plist theme={null}
   <key>NSFaceIDUsageDescription</key>
     <string>We use Face ID for secure access to the app.</string>
   ```

### Switch Chain

To switch the used chain after initial configuration, `auth.switchChain` is used. This enables asynchronous switching. Similar to the initial configuration, chain information derived from `ParticleNetwork.ChainInfo` can be passed as the primary parameter, determining the destination chain.

| Field       | Type        | Description                                                          |
| ----------- | ----------- | -------------------------------------------------------------------- |
| `chainInfo` | `ChainInfo` | A chainInfo object, can be derived from `ParticleNetwork.ChainInfo`. |

```swift theme={null}
let auth = Auth()
let result = try await auth.switchChain(chainInfo: .ethereum)

// For switching chains synchronously, without checking login status
ParticleNetwork.setChainInfo(.ethereum)
```

## Examples of utilization

### Connect

`auth.connect` is the main mechanism for facilitating login (account creation or sign in) with Particle's Wallet-as-a-Service. Specifically, five key parameters are available within `auth.connect`:

| Field               | Type                 | Description                                                                                                                                                                                                                                                                           |
| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type`              | `LoginType`          | The specific social login to be used. This can be either `.email`, `.phone`, `.google`, `.apple`, `.jwt`, `.facebook`, `.twitter`, `.discord`, `.github`, `.twitch`, `.microsoft` or `linkedin`.                                                                                      |
| `account`           | `String?`            | (Optional) When `type` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. When passing a phone number, it must be in E.164 format. |
| `code`              | `String?`            | (Optional) When `type` is set to either `.email` pr `.phone`, you can use the `code` parameter to pass the verification code.                                                                                                                                                         |
| `socialLoginPrompt` | `SocialLoginPrompt?` | (Optional) Changes what the OAuth provider prompts a user to do; either `.none`, `.consent`, or `.select_account`. Only Google, Discord and Microsoft support it.                                                                                                                     |

<Tip>You can use your existing user base or authentication method with Particle Auth through JWT. This way, your users can still log in with their current accounts. Click [here](/social-logins/configuration/auth/jwt) to learn how to configure jwt. </Tip>

```swift theme={null}
// Connect with Google
let userInfo = try await auth.connect(type: .google, socialLoginPrompt: .selectAccount)

// Send verification code to email or phone number, the phone number must be in E.164 format.
var result = try await auth.sendEmailCode(email: "user@example.com")
var result = try await auth.sendPhoneCode(email: "+11234567890")

// Connect with email or phone, the phone number must be in E.164 format.
let userInfo = try await auth.connect(type: .email, account: "user@example.com", code: "xxxxxx")
let userInfo = try await auth.connect(type: .phone, account: "+11234567890", code: "xxxxxx")

// Connect with JWT
let jwt = "json web token"
let userInfo = try await auth.connect(type: .jwt, account: jwt)
```

`auth.presentLoginPage` is another mechanism for facilitating login (account creation or sign in) with Particle's Wallet-as-a-Service. Upon calling this method, an authentication UI will be thrown, and the user will be asked to sign in with a specified login method. Specifically, five key parameters are available within `auth.presentLoginPage`:

| Field                | Type                 | Description                                                                                                                                                                                                                                                                           |
| -------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type`               | `LoginType`          | The specific social login to be used. This can be either `.email`, `.phone`, `.google`, `.apple`, `.jwt`, `.facebook`, `.twitter`, `.discord`, `.github`, `.twitch`, `.microsoft` or `linkedin`.                                                                                      |
| `account`            | `String?`            | (Optional) When `type` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. When passing a phone number, it must be in E.164 format. |
| `supportAuthTypeode` | `[SupportAuthType]`  | The methods of authentication visible on the authentication popup UI. By default, this will be exclusive to the chosen social login method, although by passing in additional types, you can expand the UI to include the ability to login with those as an alternative to type.      |
| `socialLoginPrompt`  | `SocialLoginPrompt?` | (Optional) Changes what the OAuth provider prompts a user to do; either `.none`, `.consent`, or `.select_account`. Only Google, Discord and Microsoft support it.                                                                                                                     |
| `config`             | `LoginPageConfig?`   | (Optional) To customize the UI page, contains project name, icon and description.                                                                                                                                                                                                     |

```swift theme={null}
var userInfo = try await auth.presentLoginPage(type: type, account: text, socialLoginPrompt: .selectAccount, config: config)
```

After connect is successful, detailed user information can be retrieved by calling `auth.getUserInfo`.

### Is Connected

To check the user's login status, `auth.getUserInfo() != nil` returns a Boolean based upon the current state of a session (whether or not a user is currently logged into an account). Additionally, an asynchronous method, `auth.isConnected` can be called and subscribed to, returning `userInfo` upon a status of `true`.

```swift theme={null}
// Local
let result = auth.getUserInfo() != nil
// Server side
let result = try await auth.isConnected()
```

### Disconnect

`auth.disconnect` will simply log a user out of their existing session, assuming they're logged in.

```swift theme={null}
let result = try await auth.disconnect()
```

### UserInfo and Address Retrieval (post-login)

Once a user has logged in, you'll have access to various methods such as `auth.getUserInfo` and `auth.evm.getAddress`to retrieve specific user details. The `getUserInfo` response will, by default, include both an associated EVM and Solana address, while `auth.evm.getAddress` will return an EVM address, `auth.solana.getAddress` will return a Solana address.

```swift theme={null}
auth.getUserInfo()
auth.evm.getAddress()
auth.solana.getAddress()
```

***

### Signatures

Once `ParticleNetwork` has been initialized and a user has successfully logged in, signatures can be proposed for confirmation through a popup

### EVM

### Sign Message (EIP191)

To request an EIP191 signature from a user's embedded wallet, you can use either the `auth.evm.personalSign` or `auth.evm.personalSignUnique` method. If you need the same message to return a unique signature each time, use the `auth.evm.personalSignUnique` method. Otherwise, the `auth.evm.personalSign` method is generally recommended.

| Field       | Type         | Description                                                                            |
| ----------- | ------------ | -------------------------------------------------------------------------------------- |
| `message`   | `String`     | Either a hexadecimal string starting with '0x' or a human-readable string is required. |
| `chainInfo` | `ChainInfo?` | (Optional) Default is current chainInfo, the specific chain selected                   |

```swift theme={null}
let result = try await auth.evm.personalSign("This is the message that is being signed", chainInfo: nil)
let result = try await auth.evm.personalSignUnique("This is the message that is being signed", chainInfo: nil)
```

### Sign Typed Data V4 (EIP712)

To request an EIP712 signature from a user's embedded wallet, you can use either the `auth.evm.signTypedData` or `auth.evm.signTypedDataUnique` method. If you need the same message to return a unique signature each time, use the `auth.evm.signTypedDataUnique` method. Otherwise, the `auth.evm.signTypedData` method is generally recommended.

| Field       | Type         | Description                                                                   |
| ----------- | ------------ | ----------------------------------------------------------------------------- |
| `message`   | `String`     | Either a hexadecimal string starting with "0x" or a JSON string is required.  |
| `chainInfo` | `ChainInfo?` | (Optional) default is current chainInfo, the specific use which chain to sign |

```swift theme={null}
let result = try await auth.evm.signTypedData(message, chainInfo: nil)
let result = try await auth.evm.signTypedDataUnique(message, chainInfo: nil)
```

***

### Transaction

To send a transaction from a user's embedded wallet, you can use `auth.evm.sendTransaction`.

| Field         | Type         | Description                                                                            |
| ------------- | ------------ | -------------------------------------------------------------------------------------- |
| `transaction` | `String`     | A hexadecimal string starting with "0x" is required.                                   |
| `chainInfo`   | `ChainInfo?` | (Optional) default is current chainInfo, the specific use which chain to sign and send |

```swift theme={null}
let result = try await auth.evm.sendTransaction(transaction, chainInfo: nil)
```

***

### Solana

### Signing Messages

To request a signature from a user's embedded wallet, you can use `auth.solana.signMessage`.

| Field       | Type         | Description                                                                   |
| ----------- | ------------ | ----------------------------------------------------------------------------- |
| `message`   | `String`     | A base58 formatted string is required.                                        |
| `chainInfo` | `ChainInfo?` | (Optional) default is current chainInfo, the specific use which chain to sign |

```swift theme={null}
let message = Base58.encode("This is the message that is being signed".data(using: .utf8)!)
let result = try await auth.solana.signMessage(message, chainInfo: nil)
```

***

### Transaction

To send a transaction from a user's embedded wallet, you can use `auth.solana.signAndSendTransaction`.

| Field         | Type         | Description                                                                            |
| ------------- | ------------ | -------------------------------------------------------------------------------------- |
| `transaction` | `String`     | A base58 formatted string is required.                                                 |
| `chainInfo`   | `ChainInfo?` | (Optional) default is current chainInfo, the specific use which chain to sign and send |

```swift theme={null}
let result = try await auth.solana.signAndSendTransaction(transaction, chainInfo: nil)
```

To sign a transaction from a user's embedded wallet, you can use `auth.solana.signTransaction`.

| Field         | Type         | Description                                                                   |
| ------------- | ------------ | ----------------------------------------------------------------------------- |
| `transaction` | `String`     | A base58 formatted string is required.                                        |
| `chainInfo`   | `ChainInfo?` | (Optional) default is current chainInfo, the specific use which chain to sign |

```swift theme={null}
let result = try await auth.solana.signTransaction(transaction, chainInfo: nil)
```

To sign multi transactions from a user's embedded wallet, you can use `auth.solana.signAllTransactions`.

| Field          | Type         | Description                                                                   |
| -------------- | ------------ | ----------------------------------------------------------------------------- |
| `transactions` | `String`     | Base58 formatted strings are required.                                        |
| `chainInfo`    | `ChainInfo?` | (Optional) default is current chainInfo, the specific use which chain to sign |

```swift theme={null}
let result = try await auth.solana.signAllTransactions(transactions, chainInfo: nil)
```

You can create en EVM transaction with class `TxData` or `FeeMarketEIP1559TxData`, also you can use another SDK `ParticleWalletAPI` to create transaction, you can reference the examples from [Wallet SDK reference](/wallet/mobile/ios), all the rpc methods are defined in `ParticleWalletAPI`.

***

### Open Account and Security

If you'd like to force the "Account and Security" options to be opened on-screen (from which you can control payment passwords, additional accounts, and so on), then you can call `auth.openAccountAndSecurity`. Upon calling this method, a popup allowing the user to control security settings will appear.

```swift theme={null}
try auth.openAccountAndSecurity()
```

***

### Set Security Account Config

Within the security settings, specific popups can be set to display upon confirmation or wallet UI entrance. These popups include `promptSettingWhenSign`, which refers to payment (signature) passwords, and `promptMasterPasswordSettingWhenLogin`, which refers to a login-based master password.

By default, `promptSettingWhenSign` is set to 1, which will show the prompt upon the first signature a given account conducts. If it's set to 0, it will never be shown; if it's set to 2, it will be shown upon every signature confirmation, if it's set to 3, it will be forced to set payment password.

This same logic applies to `promptMasterPasswordSettingWhenLogin`, which by default is set to 0.

```swift theme={null}
ParticleNetwork.setSecurityAccountConfig(config:
  .init(promptSettingWhenSign: 1, promptMasterPasswordSettingWhenLogin: 2))

let securityAccountConfig = ParticleNetwork.getSecurityAccountConfig()
```

***

### Master Password and Payment Password

User can set master password and payment password to protect assets, call `auth.changeMasterPassword` to set or change master password, call `auth.openAccountAndSecurity()` to set or change payment password.

```swift theme={null}
// Check if user has a master password set
let result = try auth.hasMasterPassword()
// Set or change master password
let result = try await auth.changeMasterPassword()

// Check if user has a payment password set
let result = try auth.hasPaymentPassword()
// Open a general account security page
let result = try auth.openAccountAndSecurity()
```

***

### Set Appearance

You can forcibly set a specific appearance to be used within the UI using `ParticleNetwork.setAppearance`. By default, it will follow current system setting.

| Field        | Type                   | Description                                                                               |
| ------------ | ---------------------- | ----------------------------------------------------------------------------------------- |
| `appearance` | `UIUserInterfaceStyle` | The specific appearance to be used. This can be either `.unspecified`, `.dark`, `.light`. |

```swift theme={null}
// This is the default setting, auto
ParticleNetwork.setAppearance(.unspecified)
// Dark mode
ParticleNetwork.setAppearance(.dark)
// Light mode
ParticleNetwork.setAppearance(.light)
```

***

### Set and Get Language

You can forcibly set a specific language to be used within the UI using `ParticleNetwork.setLanguage`, with retrieval of the current active language facilitated by `ParticleNetwork.getLanguage`. By default, this is set to English.

| Field      | Type       | Description                                                                                       |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------- |
| `language` | `Language` | The specific language to be used. This can be either `.en`, `.ja`, `.zh_hans`, `.zh_hant`, `.ko`. |

```swift theme={null}
ParticleNetwork.setLanguage(Language.en)

ParticleNetwork.getLanguage()
```

### Set Custom UI JSON string

```swift theme={null}
// Configure a custom UI through passing a JSON string
let jsonString = "Your custom UI json string, keys should be the same with customUIConfig.json in demo"
Auth.loadCustomUIJsonString(jsonString)
```

### Set FiatCoin

You can set a specific fiat currency to be used within the UI using `ParticleNetwork.setFiatCoin`, with retrieval of the current active language facilitated by `ParticleNetwork.getFiatCoin`. By default, this is set to USD.

| Field      | Type       | Description                                                                                                                  |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `fiatCoin` | `FiatCoin` | The specific fiat currency in which value is denominated. This can be either `.usd`, `.cny`, `.jpy`, `.hkd`, `.inr`, `.krw`. |

```swift theme={null}
ParticleNetwork.setFiatCoin(FiatCoin.usd)

ParticleNetwork.getFiatCoin()
```

### Enable Blind Signing

Silently sign messages/transactions, this switch will work if the following conditions are met:

1. Your account is connected with JWT
2. Your account hasn't set a payment password
3. SecurityAccountConfig.promptSettingWhenSign is 0, you can call `ParticleNetwork.setSecurityAccountConfig` to update its value.

```swift theme={null}
// Enable (or disable) blind signing
Auth.setBlindEnable(true)
// Retrieve whether or not blind signing is enabled
let result = Auth.getBlindEnable()
```


# React Native (JavaScript) - Auth
Source: https://developers.particle.network/social-logins/auth/mobile-sdks/react

Interacting with Particle Auth within applications made using React Native.

## Particle Auth for React Native

For mobile applications, both iOS and Android, leveraging React Native for end-to-end interaction with Particle's Wallet-as-a-Service is possible through the utilization of the Particle Auth React Native SDK. The Particle Auth React Native SDK is largely adjacent to the [Flutter (Dart)](/social-logins/auth/mobile-sdks/flutter) SDK. It enables the integration of Particle's Wallet-as-a-Service within mobile applications using JavaScript, providing a potentially more accessible alternative to mobile interaction with Particle Network.

Initial configuration guides, along with various examples of utilization, are detailed below.

## Getting Started

The setup process for the Particle Auth React Native SDK is relatively straightforward but deviates depending on the platform in question. However, if you've used the other Particle Auth SDKs for mobile, the general flow will feel familiar, specifically if you've used the Particle Auth Flutter SDK.

Before diving into platform-specific configuration, all Particle Auth SDKs require three standard values for initialization: `projectId`, `clientKey`, and `appId`, all of which can be retrieved from the [Particle dashboard](https://dashboard.particle.network).

<Note>
  Find a guide on how to set up a project and find the required keys: [Dashboard Guide](/social-logins/dashboard).
</Note>

### Adding the Particle Auth React Native SDK to your application

Another constant in the setup process is the installation of `@particle-network/rn-auth-core`, either through npm or Yarn, depending on your preference.

```shell Terminal theme={null}
npm install @particle-network/rn-auth-core
npm install @particle-network/rn-base

// Or

yarn add @particle-network/rn-auth-core
yarn add @particle-network/rn-base
```

### Android configuration

If you're planning on using Android for your React Native application, ensure you meet the following prerequisites (otherwise, expect issues or non-functionality):

#### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version : 8.5.1 or higher.
* Gradle Version : 8.9 or higher.(before react-native:0.75.2, use 8.8)

Once you've made sure your project meets these requirements, you'll need to move on and define the aforementioned configuration values (`projectId`, `clientKey`, and `appId`) within your `build.grade` file (generally found at `${project name}/android/app/build.gradle`). These directly link your application's instance of Particle Auth with the [dashboard](https://dashboard.particle.network).

Specifically, within `build.gradle`, you'll need to set four different values:

1. `dataBinding`, this should be enabled with `enabled = true`.
2. `manifestPlaceholders["PN_PROJECT_ID"]`, the `projectId` previously retrieved from the Particle dashboard.
3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the `clientKey` previously retrieved from the Particle dashboard.
4. `manifestPlaceholders["PN_APP_ID"]`, the `appId` previously retrieved from the Particle dashboard.

```groovy build.gradle theme={null}
android {
  ...
  defaultConfig {
      ......
      manifestPlaceholders["PN_PROJECT_ID"] = "Your project ID"
      manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "Your client key"
      manifestPlaceholders["PN_APP_ID"] = "Your app ID"
  }

  dataBinding {
      enabled = true
  }

}
```

***

### iOS configuration

Alternatively, if you plan to use iOS for your React Native application, the underlying setup process differs slightly. Before diving in, you'll need to ensure that your project meets the following requirements:

* **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`.

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 following:

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

Similar to the Android configuration, you'll need to fill in `PROJECT_UUID` (`projectId`), `PROJECT_CLIENT_KEY` (`clientKey`), and `PROJECT_APP_UUID` (`appId`) with the corresponding values retrieved from the [Particle dashboard](https://dashboard.particle.network).

Add Privacy - Face ID Usage Description to your info.plist file, head over to your `Info.plist` file and include the following snippet:

```xml Info.plist theme={null}
<key>NSFaceIDUsageDescription</key>
  <string>We use Face ID for secure access to the app.</string>
```

Finally, you'll need to edit your Podfile to align with the snippet below; this is required for all iOS projects that leverage Particle Auth Core.

```ruby theme={null}
pod "Thresh", '1.4.11'
pod "ParticleMPCCore", '1.4.11'
pod "ParticleAuthCore", '1.4.11'
pod "AuthCoreAdapter", '1.4.11'

pod 'ParticleNetworkBase', '1.4.10'
pod 'ConnectCommon',  '0.2.24'

pod 'SwiftyUserDefaults', :git ='https://github.com/SunZhiC/SwiftyUserDefaults.git', :branch ='master'
pod 'SkeletonView', :git ='https://github.com/SunZhiC/SkeletonView.git', :branch ='main'


post_install do |installer|
installer.pods_project.targets.each do |target|
  target.build_configurations.each do |config|
  config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
 end
```

<Note>
  <p>Specific note for using Expo.</p>
  <p>If you're working with Expo, your Podfile needs additional editing to ensure compatibility with Particle Auth Core, as below:</p>

  <p />

  <p>You can reference this [Podfile](https://github.com/Particle-Network/particle-react-native/blob/master/Expo-Examples/new-expo-app/ios/Podfile).</p>

  <p>
    ```ruby theme={null}
    post_install do |installer|
      installer.pods_project.targets.each do |target|
          if target.name == 'ParticleNetworkBase' or
             target.name == 'ParticleNetworkChains' or
             target.name == 'ParticleWalletAPI' or
             target.name == 'ParticleWalletGUI' or
             target.name == 'ParticleWalletConnect' or
             target.name == 'ParticleAA' or
             target.name == 'ParticleConnect' or
             target.name == 'ParticleConnectKit' or
             target.name == 'ConnectWalletConnectAdapter' or
             target.name == 'ConnectSolanaAdapter' or
             target.name == 'ConnectEVMAdapter' or
             target.name == 'ConnectPhantomAdapter' or
             target.name == 'ConnectCommon' or
             target.name == 'WalletConnectSwiftV2' or
             target.name == 'CryptoSwift' or
             target.name == 'SwiftyUserDefaults' or
             target.name == 'RxSwift' or
             target.name == 'RxCocoa' or
             target.name == 'RxRelay' or
             target.name == 'SwiftyJSON' or
             target.name == 'Base58.swift' or
             target.name == 'JXPagingView' or
             target.name == 'JXSegmentedView' or
             target.name == 'Starscream' or
             target.name == 'SwiftMessages' or
             target.name == 'SkeletonView' or
             target.name == 'GRDB.swift' or
             target.name == 'SnapKit' or
             target.name == 'BigInt' or
             target.name == 'Alamofire' or
             target.name == 'RxAlamofire' or
             target.name == 'Then' or
             target.name == 'Thresh' or
             target.name == 'ParticleMPCCore' or
             target.name == 'ParticleAuthCore' or
             target.name == 'AuthCoreAdapter'

             target.build_configurations.each do |config|
                  config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
          end
        end
    end
    ```
  </p>
</Note>

***

## Examples of utilization

### Initialization

Now that you've configured the Particle Auth React Native SDK according to the platform you're using, you're ready to go ahead and initialize the SDK itself, unlocking the full extent of the SDK's functionality within your application. Initialization, in this case, is a two-step process, the first of which involves importing `@particle-network/rn-auth-core`, in this case as `particleAuthCore`.

```typeScript theme={null}
import * as particleAuthCore from "@particle-network/rn-auth-core";
import * as particleBase from "@particle-network/rn-base";
```

With `@particle-network/rn-base` imported, you'll need to call the `init` function on your representation of `@particle-network/rn-base`, which in this case is `particleBase`. `init` takes the following parameters:

* `chainInfo`, this refers to an object containing relevant information about the primary chain to be used. **`ChainInfo` objects can be imported from `@particle-network/chains`**.
* `env`, imported from `@particle-network/rn-auth`, and can be either:
  * `Env.Production`
  * `Env.Staging`
  * `Env.Dev`

you'll also need tall the `particleAuthCore.init`.

```typeScript theme={null}
import * as particleBase from '@particle-network/rn-base';
import * as particleAuthCore from '@particle-network/rn-auth-core';

const chainInfo = Ethereum;
const env = Env.Production;
particleBase.init(chainInfo, env);
particleAuthCore.init();
```

***

### Connect

Onboarding a user with Particle's Wallet-as-a-Service (Particle Auth) happens through social login. This mechanism is controlled by `particleAuthCore.connect`. Upon calling this method, depending on specific parameters, a popup will be displayed, prompting a user to sign in with a social account, thus leading to the generation and assignment of a wallet. `particleAuthCore.connect` takes the following parameters:

| Field             | Type                 | Description                                                                                                                                                                                                                                                                         |
| ----------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type`            | `LoginType`          | The specific social login to be used. This can be either `.email`, `.phone`, `.google`, `.apple`, `.jwt`, `.facebook`, `.twitter`, `.discord`, `.github`, `.twitch`, `.microsoft` or `linkedin`.                                                                                    |
| `account`         | `string?`            | (Optional) When `type` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. If passing a phone number, it must be in E.164 format. |
| `supportAuthType` | `SupportAuthType[]`  | The methods of authentication visible on the authentication popup UI. By default, this will be exclusive to the chosen social login method, although by passing in additional types, you can expand the UI to include the ability to login with those as an alternative to type.    |
| `prompt`          | `SocialLoginPrompt?` | (Optional) Changes what the OAuth provider prompts a user to do; either `.none`, `.consent`, or `.select_account`. Only Google, Discord and Microsoft support it.                                                                                                                   |
| `loginPageConfig` | `LoginPageConfig?`   | (Optional) to customize the UI page, contains project name, icon and description.                                                                                                                                                                                                   |

```typeScript theme={null}
import type { LoginType, SupportAuthType } from '@particle-network/rn-base'
import * as particleAuthCore from '@particle-network/rn-auth-core';

// Google or other social login
const userInfo = await particleAuthCore.connect(LoginType.Google, null, [], SocialLoginPrompt.SelectAccount);

// Email or phone login, facilitated through Particle's UI
const userInfo = await particleAuthCore.connect(LoginType.Email, null, supportAuthTypes, SocialLoginPrompt.SelectAccount, {
        projectName: "React Native Example",
        description: "Welcome to login",
        imagePath: base64Img
      });

// Custom authentication via JWT
const userInfo = await particleAuthCore.connect(LoginType.JWT, jwt);

// Configuration of a custom email or phone login page, programmatically driving verification codes
const isSuccess = await particleAuthCore.sendEmailCode("user@example.com");
const isSuccess = await particleAuthCore.sendPhoneCode("11234567890");

// After a code is sent, the user should enter it within your UI, upon which you can use it for connection
const userInfo = await ParticleAuthCore.connectWithCode(null, "user@example.com", code);
const userInfo = await ParticleAuthCore.connectWithCode("+11234567890", null, this.state.code);
```

***

### Disconnect

An active session (logged-in user) can be disconnected by simply calling the `particleAuthCore.disconnect` method.

```typeScript theme={null}
const status = await particleAuthCore.disconnect();
```

***

### Is Connected

Another important method is `particleAuthCore.isConnected`. This method returns a Boolean indicating whether a user is logged in.

```typeScript theme={null}
const result = await particleAuthCore.isConnected()
```

***

### Get Address

To retrieve the address of a currently logged-in user (EVM address if connected to an EVM chain, otherwise their Solana address), `evm.getAddress` or `solana.getAddress`can be called.

For first-time users, only the address of the current chain will be generated. For example, if the current chain is an EVM chain, the user will only get the EVM address upon first login. If the user also needs a Solana address, they will need to call await particleAuthCore.switchChain(Solana) to obtain it. After switching successfully, the current chain will be changed to Solana, and the user can use `solana.getAddress` to get the address.

```typeScript theme={null}
import {evm, solana} from '@particle-network/rn-auth-core';

const evmAddress = await evm.getAddress();
const solanaAddress = await solana.getAddress();
```

***

### Get UserInfo

If a user has logged in, their user info (email, name, wallet addresses, and other key pieces of information) can be retrieved through `particleAuthCore.getUserInfo`. This same response will be automatically saved to a successful call of `particleAuthCore.connect`.

```typeScript theme={null}
const userInfo = await particleAuthCore.getUserInfo();
```

***

### Sign Message (EIP191)

To request an EIP191 signature from a user's account, you can use either the `evm.personalSign` or `evm.personalSignUnique` method. If you need the same message to return a unique signature each time, use the `evm.personalSignUnique` method. Otherwise, the `evm.personalSign` method is generally recommended. On Solana, you can call `solana.signMessage`, you can pass in a UTF-8/readable string.

| Field     | Type     | Description                                                                                                  |
| --------- | -------- | ------------------------------------------------------------------------------------------------------------ |
| `message` | `string` | On Evm requires a hexadecimal string or a UTF-8/readable string, on Solana, requires a UTF-8/readable string |

```typeScript theme={null}
const message = "GM, Particle!"
const result = await evm.personalSign(message);

const result = await solana.signMessage(message);
```

***

### Sign Transaction

This is a **Solana-specific** method for signing a transaction without sending it. Similar to message signing, this will prompt a signature in-UI with details about the transaction. Programmatically, the proposed transaction should be formatted as a (converted to a) base58 string. Passing in an object directly will not work in this case.

| Field         | Type     | Description              |
| ------------- | -------- | ------------------------ |
| `transaction` | `string` | Requires a base58 string |

```typeScript theme={null}
const signature = await solana.signTransaction(transaction);
```

***

### Sign All Transactions

Following the aforementioned method, you can use `solana.signAllTransactions` to propose a collection of **Solana** transactions for signature, rather than just a single transaction.

| Field          | Type       | Description                           |
| -------------- | ---------- | ------------------------------------- |
| `transactions` | `string[]` | Each element requires a base58 string |

```typeScript theme={null}
const signatures = await solana.signAllTransactions(transactions);
```

***

### Sign and Send Transaction

For more generalized transaction sending, `evm.sendTransaction`and `solana.signAndSendTransaction` will be the primary method used in virtually every scenario. This will propose a signature (on both EVM and Solana), and then immediately push it to the network once confirmed.

| Field         | Type     | Description                                                               |
| ------------- | -------- | ------------------------------------------------------------------------- |
| `transaction` | `string` | On Evm requires a hexadecimal string, on Solana, requires a base58 string |

```typeScript theme={null}
const txHash = await evm.sendTransaction(transaction);

const txHash = await solana.signAndSendTransaction(transaction);
```

***

### Sign Typed Data V4 (EIP712)

To request an EIP712 signature from a user's embedded wallet, you can use either the `Evm.signTypedData` or `evm.signTypedDataUnique` method. If you need the same message to return a unique signature each time, use the `evm.signTypedDataUnique` method. Otherwise, the `evm.signTypedData` method is generally recommended.

| Field     | Type     | Description                                    |
| --------- | -------- | ---------------------------------------------- |
| `message` | `string` | Requires a hexadecimal string or a json string |

```typeScript theme={null}
 const signature = await evm.signTypedData(typedData);
```

***

### Set Chain Info

If you'd like to set the chain being utilized (after initially defining this in `init`), you can call either `particleBase.setChainInfo` (synchronous) or ` particleAuthCore.switchChain` (asynchronous), **`ChainInfo` objects can be imported from `@particle-network/chains`**.

```typeScript theme={null}
await particleBase.setChainInfo(Ethereum);

await particleAuthCore.switchChain(Ethereum);
```

***

### Get Chain Info

For the retrieval of the currently selected (primary) chain within an active session, you'll need to call `ParticleBase.getChainInfo`. This returns a ChainInfo object containing:

* `name`, the name of the chain in question (ex: Ethereum).
* `id`, the ID of the chain in question (ex: 11155111).
* `network`, the specific network corresponding to the chain ID (ex: Sepolia)

```typeScript theme={null}
const chainInfo = await particleBase.getChainInfo();

```

***

### Set Security Account Config

Another important component of integrating the Particle Auth SDK (Wallet-as-a-Service) is the (optional) security account requirements enforced upon application users. For all accounts on Particle, several security options are associated (such as a master password for a login-based non-recoverable password, payment password for a pin required upon transaction signatures, etc.)

Within the SDK, you can configure the frequency (or requirement) a user is asked to configure security settings. This is controlled with `particleBase.setSecurityAccountConfig` and passing in a `SecurityAccountConfig` object with two parameters:

| Field                                  | Type  | Description                                                     |
| -------------------------------------- | ----- | --------------------------------------------------------------- |
| `promptSettingWhenSign`                | `int` | The payment (signature) password config prompts (default is 1). |
| `promptMasterPasswordSettingWhenLogin` | `int` | The master password prompts (default is 0).                     |

* `0` means a prompt is never shown requesting this setting.
* `1` means a prompt is shown only upon the first startup.
* `2` means a prompt is shown every time.
* `3` means will force a user to set a password.

```typeScript theme={null}
particleBase.setSecurityAccountConfig(new SecurityAccountConfig(0, 0));
```

***

### Open Account and Security Page

Following the above, if you'd like to force the opening of account/security settings (in-UI), you can do so with `particleBase.openAccountAndSecurity`.

```typeScript theme={null}
const status = await particleAuthCore.openAccountAndSecurity();
```

***

### Has Master Password, Payment Password, Security Account

Similarly to the `isConnected` function covered prior, there are various scenarios in which knowing whether or not a user has specific security settings enabled may be useful.

This can be controlled with the built-in `particleAuthCore.hasMasterPassword`, `particleAuthCore.hasPaymentPassword`, and `particleAuthCore.changeMasterPassword` methods.

```typeScript theme={null}
const hasMasterPassword = await particleAuthCore.hasMasterPassword();
const hasPaymentPassword = await particleAuthCore.hasPaymentPassword();
const isChangedMasterPassword = await particleAuthCore.changeMasterPassword();
```

***

### Set Appearance

You can forcibly set a specific appearance to be used within the UI using `particleBase.setAppearance`. By default, it will follow current system setting.

| Field        | Type         | Description                                                                          |
| ------------ | ------------ | ------------------------------------------------------------------------------------ |
| `appearance` | `Appearance` | The specific appearance to be used. This can be either `.system`, `.dark`, `.light`. |

```typeScript theme={null}
// This is the default setting
particleBase.setAppearance(Appearance.System);
// Dark mode
particleBase.setAppearance(Appearance.Dark);
// Light mode
particleBase.setAppearance(Appearance.Dark);
```

***

### Set and Get Language

You can set a specific language to be used within the UI using `particleBase.setLanguage`, with retrieval of the current active language facilitated by `particleBase.getLanguage`. By default, this is set to English.

| Field      | Type       | Description                                                                                       |
| ---------- | ---------- | ------------------------------------------------------------------------------------------------- |
| `language` | `Language` | The specific language to be used. This can be either `.EN`, `.JA`, `.ZH_HANS`, `.ZH_HANT`, `.KO`. |

```typeScript theme={null}
particleBase.setLanguage(Language.en);

const language = particleBase.getLanguage();
```

***

### Enable Blind Signing

Silently sign messages/transactions, this switch will work if the following conditions are met:

1. Your account is connected with JWT
2. Your account does not set payment password
3. SecurityAccountConfig.promptSettingWhenSign is 0, you can call `particleBase.setSecurityAccountConfig` to update its value.

```typeScript theme={null}
// Enable blind signing
particleAuthCore.setBlindEnable(true);
// Retrieve state of the blind signing feature; whether or not it's enabled
const result = await particleAuthCore.getBlindEnable();
```

***

### Filter Unsupported Countries (Phone Authentication)

If necessary, you can restrict specific countries from authenticating via. phone number; upon entering a phone number originating from a country specified here, the user will be blocked by the login modal.

| Field         | Type       | Description                                                                                                    |
| ------------- | ---------- | -------------------------------------------------------------------------------------------------------------- |
| `isoCodeList` | `string[]` | [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code list, such as the US, the UK, etc. |

```typeScript theme={null}
const isoCodeList = ['US', 'CA', 'GB'];
particleBase.setUnsupportCountries(isoCodeList);
```

***

## `EvmService` utilization examples

Also present within `@particle-network/rn-base` is `EvmService`, an object for facilitating additional on-chain interaction, leveraging standard and enhanced RPC endpoints. `EvmService` can either be accessed through a complete (`*`) import (such as is shown above) by using `particleBase.EvmService.{method}` or individually importing it from `@particle-network/rn-base`.

### Write Contract

`EvmService.writeContract` allows you to execute a write contract call defined by a specific method and set of parameters. This requires a corresponding ABI, contract address, and requester public address.

| Field             | Type          | Description                                                                 |
| ----------------- | ------------- | --------------------------------------------------------------------------- |
| `from`            | `string`      | The user's public address.                                                  |
| `value`           | `BigNumber`   | The value sent with this transaction                                        |
| `contractAddress` | `string`      | The contract address.                                                       |
| `methodName`      | `string`      | The method name that defined in the contract, such as `mint`, `balanceOf`.  |
| `parameters`      | `string[]`    | The parameters of this method.                                              |
| `abiJsonString`   | `string`      | The abi json string of this method.                                         |
| `gasFeeLevel`     | `GasFeeLevel` | (Optional) The gas fee level, `high`, `medium` or `low`, default is `high`. |

```typeScript theme={null}
const from = "Sender address";
const contractAddress = "The contract address";
const methodName =  "Your method name"; // This is your contract method name, like balanceOf, mint.
const params: string[] = ["0x1"]; // This is the method params, each parameter requires a hexadecimal string.


// Contract ABI (JSON string)
// For example,
// [{\"inputs\":[{\"internalType\":\"uint256\",\"name\":\"quantity\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"amount\",\"type\":\"uint256\"}],\"name\":\"mint\",\"outputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"function\"}]
const abiJsonString = "";
const transaction = await EvmService.writeContract(from, BigNumber(0), contractAddress, methodName, params, abiJsonString, GasFeeLevel.high);
```

***

### Read Contract

`EvmService.readContract` allows you to execute a read-only contract call defined by a specific method and set of parameters. This requires a corresponding ABI, contract address, and requester public address.

| Field             | Type        | Description                                                                |
| ----------------- | ----------- | -------------------------------------------------------------------------- |
| `address`         | `string`    | The user's public address.                                                 |
| `value`           | `BigNumber` | The value sent with this transaction                                       |
| `contractAddress` | `string`    | The contract address.                                                      |
| `methodName`      | `string`    | The method name that defined in the contract, such as `mint`, `balanceOf`. |
| `parameters`      | `string[]`  | The parameters of this method.                                             |
| `abiJsonString`   | `string`    | The abi json string of this method.                                        |

```typeScript theme={null}
const from = "Sender address";
const contractAddress = "The contract address";
const methodName = "Your method name";
const params: string[] = [];

// Contract ABI (JSON string)
// For example,
// [{\"inputs\":[{\"internalType\":\"uint256\",\"name\":\"quantity\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"amount\",\"type\":\"uint256\"}],\"name\":\"mint\",\"outputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"function\"}]
const abiJsonString = "";

const result = await EvmService.readContract(from, BigNumber(0), contractAddress, methodName, params, abiJsonString);
```

***

### Create Transaction

`EvmService.createTransaction` facilitates the construction of a transaction object derived from the standard `from`, `to` (`receiver` in this example), `amount` (`value`), and `data` fields. This transaction, once constructed with `EvmService.createTransaction`, can be passed for in-UI proposal with `ParticleAuthCore.sendTransaction`.

| Field         | Type          | Description                                                                                                                                   |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `from`        | `string`      | The user's public address.                                                                                                                    |
| `data`        | `string`      | The transaction's data.                                                                                                                       |
| `value`       | `BigNumber`   | The native amount.                                                                                                                            |
| `to`          | `string`      | If you send a erc20, erc721, erc1155 or interact with a contract, this is the contract address, if you send native, this is receiver address. |
| `gasFeeLevel` | `GasFeeLevel` | (Optional) the gas fee level, `high`, `medium` or `low`, default is `high`.                                                                   |

```typeScript theme={null}
const from = "Sender address";
const data = "Contract data"
const value = BigNumber(10000);
const to = "The receiver address or contract address";
const transaction = await EvmService.createTransaction(from, data, value, to, GasFeeLevel.high);
```

***

### Estimate Gas

Given a standard transaction structure, gas estimations can be ran to simulate and retrieve the approximate gas to be consumed by a specified transaction (wrapper for `eth_estimateGas`). This is done through `EvmService.estimateGas`.

```typeScript theme={null}
const from = "Sender address";
const data = "Contract data"
const value = BigNumber(10000);
const to = "The receiver address or contract address";

const valueHex = '0x' + value.toString(16);
const gasLimit = await EvmService.estimateGas(from, to, valueHex, data);
```

***

### Get Suggested Gas Fees

To retrieve categorized gas price suggestions (3 categories scaling from low to high) based upon current network conditions, you can call `EvmService.suggestedGasFees`.

```typeScript theme={null}
const gasFeesResult = await EvmService.suggestedGasFees();
```

***

### Get Tokens and NFTs

`EvmService` also extends to Data API methods such as `getTokensAndNFTs`, which returns a highly detailed JSON list of ERC20 tokens and ERC721 NFTs belonging to a specified address. This is accessible through `EvmService.getTokensAndNFTs`, passing in the public address to retrieve the tokens and NFTs of, also you can retrieve tokens from `getTokens` or NFTs from `getNFTs`

| Field            | Type       | Description                    |
| ---------------- | ---------- | ------------------------------ |
| `address`        | `string`   | The user's public address.     |
| `tokenAddresses` | `string[]` | The specific tokens' addresses |

```typeScript theme={null}
const result = await EvmService.getTokensAndNFTs(publicAddress, []);
const result = await EvmService.getTokens(publicAddress, []);
const result = await EvmService.getNFTs(publicAddress, []);
```

***

### Get Transactions by Address

Similar to the former method, `EvmService.getTransactionsByAddress` enables the retrieval of a detailed JSON response containing a complete list of transactions involving a specified address.

```typeScript theme={null}
const result = await EvmService.getTransactionsByAddress(publicAddress);
```

***

### Get Price

To retrieve the price of specified tokens, you can call `EvmService.getPrice`.

| Field            | Type       | Description                                                       |
| ---------------- | ---------- | ----------------------------------------------------------------- |
| `tokenAddresses` | `string[]` | The tokens's addresses, for native token, you can pass `"native"` |
| `currencies`     | `string[]` | The currency in which the price is denominated, such as `"usd"`   |

```typeScript theme={null}
const result = await EvmService.getPrice(tokenAddresses, currencies);
```

***

### Basic RPC Method

Basic, raw RPC methods can be called through `EvmService.rpc`, as shown below.

| Field    | Type     | Description                                     |
| -------- | -------- | ----------------------------------------------- |
| `method` | `string` | The evm basic rpc method                        |
| `params` | `any`    | The parameters required by evm basic rpc method |

```typeScript theme={null}
const result = await EvmService.rpc(method, params);
```

***

## `SolanaService` utilization examples

In addition to `particleAuthCore` for authentication and interaction with Particle's Wallet-as-a-Service, the React Native SDK also includes a class, `SolanaService`, for general interaction with Solana chains.

### Get Tokens and NFTs

`SolanaService` also extends to Data API methods such as `getTokensAndNFTs`, which returns a highly detailed JSON list of SPL tokens and NFTs belonging to a specified address. This is accessible through `SolanaService.getTokensAndNFTs`, passing in the public address to retrieve the tokens and NFTs of.

| Field              | Type     | Description                                |
| ------------------ | -------- | ------------------------------------------ |
| `address`          | `String` | The user's public address.                 |
| `parseMetadataUri` | `bool`   | If you'd like to parse the NFT's metadata. |

```typeScript theme={null}
final result = await SolanaService.getTokensAndNFTs(publicAddress, true);
```

***

### Serialize Transactions

`SolanaService.serializeSolTransaction` facilitates the construction of a SOL transaction object,

`SolanaService.serializeSplTokenTransaction` facilitates the construction of a Spl-token transaction object,

`SolanaService.serializeWSolTokenTransaction` facilitates the construction of a unwrap WSOL transaction object.

These transactions, once constructed, can be passed for in-UI proposal with `Solana.signAndSendTransaction`.

<CodeGroup>
  ```typeScript Send sol theme={null}
  const from = "Sender address";
  const to = "Receiver address";
  const amount = 1; // SOL amount in minimal unit.
  const result = await serializeSolTransaction(from, to, amount);
  const transaction = result.transaction.serialized;
  ```

  ```typeScript Send spl token theme={null}
  const from = "Sender address";
  const to = "Receiver address";
  const mint = "SPL token mint address";
  const amount = 1; // spl token amount in minimal unit.

  const result = await serializeSplTokenTransaction(from, to, amount);
  const transaction = result.transaction.serialized;
  ```

  ```typeScript Unwrap WSOL theme={null}
  const address = "Sender address";

  const result = await SolanaService.serializeUnwrapWSolTransaction(address);
  const transaction = result.transaction.serialized;
  ```
</CodeGroup>

### Get Price

To retrieve the price of specified tokens, you can call `SolanaService.getPrice`.

| Field            | Type       | Description                                                       |
| ---------------- | ---------- | ----------------------------------------------------------------- |
| `tokenAddresses` | `string[]` | The tokens's addresses, for native token, you can pass `"native"` |
| `currencies`     | `string[]` | The currency in which the price is denominated, such as `"usd"`   |

```typeScript theme={null}
const result = await SolanaService.getPrice(tokenAddresses, currencies);
```

***

### Get Transactions By Address

To retrieve transactions executed by a given address, you can call `SolanaService.getTransactionsByAddress`.

```typeScript theme={null}
const result = await SolanaService.getTransactionsByAddress(address);
```

***

### Get Token by Token Address

To obtain the balance of a specified token at a specified address, you can call `SolanaService.getTokenByTokenAddresses`

| Field            | Type       | Description                |
| ---------------- | ---------- | -------------------------- |
| `address`        | `string`   | The user's public address. |
| `tokenAddresses` | `string[]` | The tokens' addresses      |

```typeScript theme={null}
const result = await SolanaService.getTokenByTokenAddresses(address, tokenAddresses);
```

***

### Basic RPC Method

Similar to `EvmService`, any basic Solana RPC method can be called through `SolanaService.rpc`.

| Field    | Type     | Description                                        |
| -------- | -------- | -------------------------------------------------- |
| `method` | `string` | The solana basic rpc method                        |
| `params` | `any`    | The parameters required by solana basic rpc method |

```typeScript theme={null}
const result = await SolanaService.rpc(method, params);
```

***


# Unity (C#) Mobile - Auth
Source: https://developers.particle.network/social-logins/auth/mobile-sdks/unity

Interacting with Particle Auth on Unity (Mobile) Using C#.

## Particle Auth for Unity (Mobile)

In addition to the Windows/macOS Unity SDK, Particle Auth also extends to standard Unity for Mobile platforms (through C#). This SDK includes all the standard functions required for initializing and interacting with Particle Auth to craft a Web2-adjacent onboarding flow within your Unity games.

Instructions setting up, and a rundown of some common functions and examples are covered below.

***

## Getting Started

### Prerequisites

Your Unity project needs to meet several requirements to avoid any compatibility issues. These requirements will be, in some capacity, dependent on the platform that you've decided to use. They are:

* **Unity 2022.3.43f1** or higher.
* If you're using iOS:
  * **Xcode 15.0** or higher.
  * **CocoaPods 1.14.3** or higher.
  * **iOS 14** or higher.
* If you're using Android:
  * minSdkVersion **23** or higher.
  * compileSdkVersion, targetSdkVersion **34** or higher.
  * JavaVersion **17**.
  * [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
  * Android Gradle Plugin Version : 8.5.1 or higher.
  * Gradle Version : 8.9 or higher.

### Setting up the Particle dashboard

Once you've ensured that your project meets the above prerequisites, you'll also need three key values from the [Particle dashboard](https://dashboard.particle.network): your `projectId`, `clientKey`, and `appId`.

These connect your Unity project with the Particle dashboard, enabling customization, analytics, tracking, etc.

<Note>
  Find a guide on how to set up a project and find the required keys: [Dashboard Guide](/social-logins/dashboard).
</Note>

### Configuration

With these values retrieved, you can move on to initial configuration and dependency management. This will vary in complexity depending on the platform in question. To begin, you'll need to download and install the Particle Unity package, which includes the necessary files for both Particle Connect and Particle Auth.

Head over to the [`particle-unity` GitHub repository](https://github.com/Particle-Network/particle-unity/releases), and download the latest release (`.unitypackage`), then import it into your project.

#### iOS configuration

If you're building a Unity game on iOS, you must follow a specific configuration process to ensure that Particle Connect functions. The first step within this process is to set up a scheme URL within the Unity editor.

1. Head into the [iOS Player Settings](https://docs.unity3d.com/Manual/class-PlayerSettingsiOS.html) menu (`Edit` -> `Project Settings` -> `Player Settings` -> `iOS`).
2. From here, select `Other`, then scroll down to `Configuration`.
3. Open the `Supported URL schemes` section, and within the `Element 0` field, paste in your `projectId` with a prefix of `pn`.
   1. For example, if your `projectId` (from the [Particle dashboard](https://dashboard.particle.network)) is something like `63bfa427-cf5f-4742-9ff1-e8f5a1b9828f`, then the scheme URL would be `pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f`.

<Note>
  <p>Remove other services, if needed</p>

  <p />

  <p>
    Within `ParticleNetworkIOSBridge.cs`, you'll have a number of services
    included in the SDK:
  </p>

  <p />

  <p>- `ParticleNetworkBase` - required universally.</p>
  <p>- `ParticleAuthCore` - required for Particle Auth Core.</p>
  <p>- `ParticleConnect`- required for Particle Connect.</p>

  <p>
    * `ParticleWalletGUI` - usage of the Particle Wallet UI, contains all
      services.
  </p>

  <p>- `ParticleAA` - usage of the Particle AA, contains all services.</p>
</Note>

You'll also need to configure your Podfile if you haven't already. If you don't have a Podfile, go to the root of your project directory and run `pod init`, which will generate a Podfile.

<Note>
  <p>Copy our example Podfile</p>

  <p />

  <p>
    You can copy our example
    [Podfile](https://github.com/Particle-Network/particle-unity/blob/main/ios-build/Podfile),
    it will always use the latest version.
  </p>
</Note>

Open this Podfile, and insert the specific pods (services) you'd like to use within your project. In this case, `ParticleConnect` and `CommonConnect` will generally suffice, but additional services can be added if needed.

Additionally, you'll need to paste the code snippet below for installation handling:

```groovy Podfile theme={null}
  # Particle Network Base
  pod 'ParticleNetworkBase', '1.4.10'

  # Particle Connect Service
  pod 'ConnectCommon', '0.2.26'
  pod 'ConnectEVMAdapter', '0.2.26'
  pod 'ConnectSolanaAdapter', '0.2.26'
  pod 'ConnectWalletConnectAdapter', '0.2.26'
  pod 'ConnectPhantomAdapter', '0.2.26'
  pod 'ParticleConnect', '0.2.26'

  # Particle Wallet Service
  pod 'ParticleWalletConnect', '1.4.10'
  pod 'ParticleWalletAPI', '1.4.10'
  pod 'ParticleWalletGUI', '1.4.10'

  # Particle AA
  pod 'ParticleAA', '1.4.10'

  # Particle Auth Core
  pod 'AuthCoreAdapter', '1.4.10'
  pod 'ParticleAuthCore', '1.4.10'
  pod 'ParticleMPCCore', '1.4.10'
  pod 'Thresh', '1.4.10'

  pod 'SkeletonView', :git => 'https://github.com/SunZhiC/SkeletonView.git', :branch => 'main'
  pod 'SwiftyUserDefaults', :git => 'https://github.com/SunZhiC/SwiftyUserDefaults.git', :branch => 'master'
  pod 'WalletConnectSwiftV2', :git => 'https://github.com/SunZhiC/WalletConnectSwiftV2.git', :branch => 'particle'

// Paste this
post_install do |installer|
installer.pods_project.targets.each do |target|
  target.build_configurations.each do |config|
  config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
 end
```

Also you can copy the example [Podfile](https://github.com/Particle-Network/particle-unity/blob/main/ios-build/Podfile) .

With your Podfile set, you'll need to run `pod install` and open your `.xcworkspace` file, such as is shown below:

```shell Terminal theme={null}
pod install --repo-update

open {your project}.xcworkspace
```

Finally, for iOS, you'll need to formally use the `projectId`, `clientKey`, and `appId` previously retrieved. To do this, head into the root of your Xcode project and create a file, `ParticleNetwork-Info.plist`. Within this file, paste the following text (then replace the placeholders):

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

Follow the steps to configure your Xcode workspace.

1. Download `UnityManger.swift`, `Unity-iPhone-Bridging-Header.h` and `AppDelegate.swift` from under github [/Assets/Plugins/iOS/.Swift](https://github.com/Particle-Network/particle-unity/tree/main/Assets/Plugins/iOS/.Swift) , Copy files into the root of your Xcode project. Xcode will ask you if auto create Bridging file, click yes.

   <img alt="Particle Network Unity config." />

   <img alt="Particle Network Unity config." />

2. Make sure Build Settings, Swift Compiler - General, has Objective-C Bridging Header, its connect is Unity-iPhone-Bridging-Header.h 's local path.

   <img alt="Particle Network Unity config." />

   <img alt="Particle Network Unity config." />

3. Remove main.mm under MainApp folder.

4. Under [/Assets/Plugins/iOS](https://github.com/Particle-Network/particle-unity/tree/main/Assets/Plugins/iOS) are NativeCallProxy files and Swift files , they are required by Unity to interact with iOS code. Remove code under Particle Wallet GUI if you don't need wallet service.

5. In `UnityManger.swift`, it has implemented methods defined in `NativeCallProxy.h`.

6. Select `NativeCallProxy.h`, in the file inspector, check public in Target Membership.

7. If you want to use `ParticleConnect`, you should add `LSApplicationQueriesSchemes` to info.plist.

```xml Info.plist theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>phantom</string>
<string>bitkeep</string>
<string>imtokenv2</string>
<string>rainbow</string>
<string>trust</string>
<string>zerion</string>
<string>mathwallet</string>
<string>oneinch</string>
<string>awallet</string>
<string>okex</string>
<string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>
```

#### Android configuration

Alternatively, if you're building your Unity game for Android, you'll just need to configure two files before you're ready to go. The first of these two files can be found at `Assets/Plugins/Android/launcherTemplate.gradle` within your project. Here, you'll need to ensure that you have the necessary dependencies.

Specifically, you'll need the following dependencies at a minimum:

* `network.particle:auth-service`if you're planning on using Particle Auth Directly
* `network.particle:unity-bridge`, required universally
* The full list of `network.particle` packages can be found [here](https://central.sonatype.com/search?q=g:network.particle\&smo=true).

```groovy launcherTemplate.gradle theme={null}
dependencies {
    implementation project(':unityLibrary')
    implementation "network.particle:auth-service:${sdkVersion}"
    implementation "network.particle:unity-bridge:${sdkVersion}"
  	implementation "network.particle:connect:${sdkVersion}"
  	// Other dependencies
}
```

Finally, for Android, you'll need to place your `projectId`, `clientKey`, and `appId` within `gradleTemplate.properties`, found at `Assets/Plugins/Android/gradleTemplate.properties`.

```groovy gradleTemplate.properties theme={null}
particle.network.project_client_key=Your Client Key
particle.network.project_id=Your Project ID
particle.network.app_id=Your App ID
```

***

### Initialization

Before you can call core functions within the SDK, you'll need to initialize `ParticleNetwork`. For the Unity SDK, this is handled by calling `init` on `ParticleNetwork`, which is derived from `Network.Particle.Scripts.Core` and passing in information about the primary chain being used. This is generally pulled from a child of `ChainInfo`.

<Tip>
  The Particle Auth Unity SDK does not require authentication from the [Particle
  dashboard](https://dashboard.particle.network).
</Tip>

```csharp theme={null}
ParticleNetwork.Init(ChainInfo.Ethereum);
ParticleAuthCoreInteraction.Init();
```

#### Add the prefab to your scene

Additionally, you'll need to ensure `ParticleAuthCore.prefab` is added to your main scene. This is required as Particle Auth Core will not function otherwise.

***

## Examples of Utilization

### Connect

With Particle Auth Core configured and included within your first scene, you can leverage Particle Auth Core to initiate the social login onboarding process and thus unlock the remaining functions within the SDK (post-login).

This is achieved and configured via `ParticleAuthCore.Instance.Connect`. Once this method is called, a corresponding login popup will be displayed requesting user authentication before returning to the application in a signed-in state.

`ParticleAuthCore.Instance.Connect` takes the following parameters:

| Field                | Type                 | Description                                                                                                                                                                                                                                                                      |
| -------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `loginType`          | `LoginType`          | The specific social login to be used. This can be either `.EMAIL`, `.PHONE`, `.GOOGLE`, `.FACEBOOK`, `.APPLE`, `.TWITTER`, `.DISCORD`, `.GITHUB`, `.TWITCH`, `.MICROSOFT`, `.LINKEDIN` or `JWT`.                                                                                 |
| `account`            | `String?`            | (Optional) When `type` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. The phone number must be in E.164 format.           |
| `supportAuthTypeode` | `[SupportAuthType]`  | The methods of authentication visible on the authentication popup UI. By default, this will be exclusive to the chosen social login method, although by passing in additional types, you can expand the UI to include the ability to login with those as an alternative to type. |
| `socialLoginPrompt`  | `SocialLoginPrompt?` | (Optional) Changes what the OAuth provider prompts a user to do; either `.none`, `.consent`, or `.select_account`. Only Google, Discord and Microsoft support it.                                                                                                                |
| `loginPageConfig`    | `LoginPageConfig?`   | (Optional) to customize the UI page, contains project name, icon and description.                                                                                                                                                                                                |

```csharp theme={null}
var loginConfig = new LoginPageConfig("Particle Unity Example", "Welcome to login",
                            "https://connect.particle.network/icons/512.png");
List<SupportLoginType> allSupportLoginTypes =
                    new List<SupportLoginType>(Enum.GetValues(typeof(SupportLoginType)) as SupportLoginType[]);
await ParticleAuthCore.Instance.Connect(LoginType.EMAIL, null, SupportAuthType.ALL, SocialLoginPrompt.SelectAccount, loginConfig);
```

You can also customize login page for email/phone, send code with method `ParticleAuthCore.Instance.SendPhoneCode` or `ParticleAuthCore.Instance.SendEmailCode`, connect with method `ParticleAuthCore.Instance.ConnectWithCode`

<CodeGroup>
  ```csharp Email theme={null}
  await ParticleAuthCore.Instance.SendEmailCode(email);
  await ParticleAuthCore.Instance.ConnectWithCode(null, email, code);
  ```

  ```csharp Phone theme={null}
  await ParticleAuthCore.Instance.SendPhoneCode(phone);
  await ParticleAuthCore.Instance.ConnectWithCode(phone, null, code);
  ```
</CodeGroup>

### Disconnect

Once a user has been logged in, you can programmatically initiate logout through `ParticleAuthCore.Instance.Disconnect`.

```csharp theme={null}
await ParticleAuthCore.Instance.Disconnect();
```

### Is Connected

Whether or not a user is logged in may need to be retrieved, specifically in cases where a user stays logged in after refreshing an application due to the continuation of a given session. To check the currently active login status, you can call `ParticleAuthCore.Instance.IsConnected`.

```csharp theme={null}
await ParticleAuthCore.Instance.IsConnected();
```

### Get User Info

After connected, you can call `ParticleAuthCoreInteraction.GetUserInfo` to retrieve the userInfo.

```csharp theme={null}
var userInfo = ParticleAuthCoreInteraction.GetUserInfo()
```

### Get Address

To retrieve the address of the currently active account (either EVM or Solana, depending on the previously selected chain), `ParticleAuthCoreInteraction.EvmGetAddress` or `ParticleAuthCoreInteraction.SolanaGetAddress` can be called.

```csharp theme={null}
var evmAddress = ParticleAuthCoreInteraction.EvmGetAddress()
var solanaAddress = ParticleAuthCoreInteraction.SolanaGetAddress()
```

### Sign Message

Simple message signing can be achieved by calling `ParticleAuthCore.Instance.EvmPersonalSign` or `ParticleAuthCore.Instance.SolanaPersonalSign` and passing in a standard string (no need for encoding on this method) with the message you'd like to be prompted for signature.

```csharp theme={null}
var message = "Hello Particle!";

await ParticleAuthCore.Instance.EvmPersonalSign(message);
await ParticleAuthCore.Instance.EvmPersonalSignUnique(message);

await ParticleAuthCore.Instance.SolanaPersonalSign(message);
```

### Sign Transaction

Similarly, for signing a transaction, you'll need to call `ParticleAuthCore.Instance.SolanaSignTransaction` and pass in a serialized (string) standard transaction object to be prompted for signature. This is a **Solana-specific** method.

```csharp theme={null}
var transaction = "Your transaction";
await ParticleAuthCore.Instance.SolanaSignTransaction(transaction);
```

### Sign All Transactions

`ParticleAuthCore.Instance.SolanaSignAllTransactions` is another **Solana-specific** method that functions adjacent to the former but instead signs multiple (a list of) transactions represented as strings.

```csharp theme={null}
var transaction1 = "Transaction1";
var transaction2 = "Transaction2";

string[] transactions = new[] { transaction1, transaction2 };

await ParticleAuthCore.Instance.SolanaSignAllTransactions(transactions);
```

### Sign And Send Transaction

`ParticleAuthCore.Instance.EvmSendTransaction` and `ParticleAuthCore.Instance.SolanaSignAndSendTransaction`are the primary methods within the SDK for sending transactions as it immediately sends a given transaction after requesting signature (confirmation). This will also take a serialized (string) representation of a transaction,

```csharp theme={null}
var transaction = "Transaction";

var nativeResultData = await ParticleAuthCore.Instance.EvmSendTransaction(transaction);

var nativeResultData = await ParticleAuthCore.Instance.SolanaSendTransaction(transaction);
```

### Sign Type Data

`ParticleAuthCore.Instance.EvmSignTypedData` is an **EVM-specific** method for signing structured (typed) data. For more information on `signTypedData`, see the [Web (JavaScript/TypeScript)](/social-logins/auth/desktop-sdks/web) page.

```csharp theme={null}
string typedData = "Your typedata";

await ParticleAuthCore.Instance.EvmSignTypedData(typedData);
```

### Set ChainInfo

If you'd like to set the primary chain after initial configuration, you'll need to use `ParticleNetwork.SetChainInfo`, which simply takes a `chainInfo` object parallel to the type of object passed into the original `ParticleNetwork.Init` call.

```csharp theme={null}
ParticleNetwork.SetChainInfo(ChainInfo.Ethereum);

// Asynchronous, used for switch from evm to solana, or switch from solana to evm.
await ParticleAuthCore.Instance.SwitchChain(ChainInfo.Ethereum);
```

### Open Account and Security Page

Following the above, if you'd like to force the opening of account/security settings (in-UI), you can do so with `ParticleAuthCore.Instance.OpenAccountAndSecurity`.

```csharp theme={null}
await ParticleAuthCore.Instance.OpenAccountAndSecurity();
```

### Has Master Password, Payment Password, Security Account

Similarly to the `isConnected` function covered prior, there are various scenarios in which knowing whether or not a user has specific security settings enabled may be useful. In the case of the Particle Auth Flutter SDK, this can happen in one of two ways:

With the built-in `ParticleAuthCoreInteraction.HasMasterPassword`, `ParticleAuthCoreInteraction.HasPaymentPassword`, and `ParticleAuthCore.Instance.ChangeMasterPassword` methods.

```csharp theme={null}
ParticleAuthCoreInteraction.HasMasterPassword();

ParticleAuthCoreInteraction.HasPaymentPassword();

await ParticleAuthCore.Instance.ChangeMasterPassword();
```

***

### Enable Blind Signing

Silently sign messages/transactions, this switch will work if the following conditions are met:

1. Your account is connected with JWT
2. Your account does not set payment password
3. SecurityAccountConfig.promptSettingWhenSign is 0, you can call `ParticleNetwork.SetSecurityAccountConfig` to update its value.

```csharp theme={null}
// Enable blind signing
ParticleAuthCoreInteraction.SetBlindEnable(true);
// Retrieve whether or not blind signing is enabled
var enable = ParticleAuthCoreInteraction.GetBlindEnable();
```

***

## `EvmService` utilization examples

In addition to `ParticleAuthCore` for authentication and interaction with Particle's Wallet-as-a-Service, the Unity mobile SDK also includes a class, `EvmService`, for general interaction with EVM chains.

### Write Contract

`EvmService.WriteContract` allows you to execute a write contract call defined by a specific method and set of parameters. This requires a corresponding ABI, contract address, and requester public address.

| Field             | Type           | Description                                                                                                |
| ----------------- | -------------- | ---------------------------------------------------------------------------------------------------------- |
| `from`            | `string`       | The user's public address                                                                                  |
| `contractAddress` | `string`       | The contract address                                                                                       |
| `methodName`      | `string`       | The method name that defined in the contract, add prefix `custom_`, like `custom_balanceOf`, `custom_mint` |
| `parameters`      | `List<object>` | The method's parameters                                                                                    |
| `abiJsonString`   | `string?`      | The method's abi json string                                                                               |
| `gasFeeLevel`     | `GasFeeLevel`  | (Optional) the gas fee level, `High`, `Medium` or `Low`, default is `High`                                 |

```csharp theme={null}
// Contract ABI, JSON string
// For example,
// [{\"inputs\":[{\"internalType\":\"uint256\",\"name\":\"quantity\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"amount\",\"type\":\"uint256\"}],\"name\":\"mint\",\"outputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"function\"}]

var transaction = await EvmService.WriteContract(from, contractAddress, methodName, parameters,abiJsonString);
```

### Read Contract

`EvmService.ReadContract` allows you to execute a read-only contract call defined by a specific method and set of parameters. This requires a corresponding ABI, contract address, and requester public address.

| Field             | Type           | Description                                                                                                |
| ----------------- | -------------- | ---------------------------------------------------------------------------------------------------------- |
| `from`            | `string`       | The user's public address                                                                                  |
| `contractAddress` | `string`       | The contract address                                                                                       |
| `methodName`      | `string`       | The method name that defined in the contract, add prefix `custom_`, like `custom_balanceOf`, `custom_mint` |
| `parameters`      | `List<object>` | The method's parameters                                                                                    |
| `abiJsonString`   | `string?`      | The method's abi json string                                                                               |

```csharp theme={null}
// Contract ABI, JSON string
// For example,
// [{\"inputs\":[{\"internalType\":\"uint256\",\"name\":\"quantity\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"amount\",\"type\":\"uint256\"}],\"name\":\"mint\",\"outputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"function\"}]

string rpcResult =
  await EvmService.ReadContract(from, contractAddress, methodName, parameters, abiJsonString);

var result = (string)JObject.Parse(rpcResult)["result"];
```

### Create Transaction

`EvmService.CreateTransaction` facilitates the construction of a transaction object derived from the standard `from`, `to` (`receiver` in this example), `amount` (`value`), and `data` fields. This transaction, once constructed with `EvmService.CreateTransaction`, can be passed for in-UI proposal with `ParticleAuthCore.Instance.EvmSendTransaction`.

| Field         | Type          | Description                                                                 |
| ------------- | ------------- | --------------------------------------------------------------------------- |
| `from`        | `string`      | The user's public address.                                                  |
| `data`        | `string`      | The transaction's data.                                                     |
| `value`       | `BigInteger`  | The native amount.                                                          |
| `to`          | `String`      | The parameters of this method.                                              |
| `gasFeeLevel` | `GasFeeLevel` | (Optional) the gas fee level, `High`, `Medium` or `Low`, default is `High`. |

```csharp theme={null}
var transaction = await EvmService.CreateTransaction(from, data, value, receiver);
```

### Estimate Gas

Given a standard transaction structure (detached set of values, as shown below), gas estimations can be ran to simulate and retrieve the volume of gas to be consumed by a specified transaction (wrapper for `eth_estimateGas`). This is done through `EvmService.EstimateGas`.

```csharp theme={null}
final result = await EvmService.EstimateGas(from, to, value, data);
var gasLimit = (string)JObject.Parse(result)["result"];
```

### Get Suggested Gas Fees

To retrieve categorized gas price suggestions (3 categories scaling from low to high) based upon current network conditions, you can call `EvmService.SuggestedGasFees`.

```csharp theme={null}
var gasFeesResult = await EvmService.SuggestedGasFees();
```

### Get Tokens and NFTs

`EvmService` also extends to Data API methods such as `GetTokensAndNFTs`, which returns a highly detailed JSON list of ERC20 tokens and ERC721 NFTs belonging to a specified address. This is accessible through `EvmService.GetTokensAndNFTs`, passing in the public address to retrieve the tokens and NFTs of.

`tokenAddresses` is an optional parameter, for get the specific tokens.

```csharp theme={null}
await EvmService.GetTokensAndNFTs(publicAddress, tokenAddresses);
await EvmService.GetTokens(publicAddress, tokenAddresses)
await EvmService.GetNFTs(publicAddress)
```

### Get Transactions by Address

Similar to the former method, `EvmService.GetTransactionsByAddress` enables the retrieval of a detailed JSON response containing a complete list of transactions involving a specified address.

```csharp theme={null}
await EvmService.GetTransactionsByAddress(publicAddress);
```

### Get Price

To retrieve the price of specified tokens, you can call `EvmService.GetPrice`.

```csharp theme={null}
 await EvmService.GetPrice(tokenAddresses, currencies);
```

### Basic RPC method

Basic RPC methods can be called manually through `EvmService.Rpc`, as shown below.

```csharp theme={null}
await EvmService.Rpc(method, params);
```

## `SolanaService` utilization examples

In addition to `ParticleAuthCore` for authentication and interaction with Particle's Wallet-as-a-Service, the Unity mobile SDK also includes a class, `SolanaService`, for general interaction with Solana chains.

### Get Tokens and NFTs

`SolanaService` also extends to Data API methods such as `GetTokensAndNFTs`, which returns a highly detailed JSON list of SPL tokens and NFTs belonging to a specified address. This is accessible through `SolanaService.GetTokensAndNFTs`, passing in the public address to retrieve the tokens and NFTs of.

```csharp theme={null}
await SolanaService.GetTokensAndNFTs(publicAddress, true);
```

### Serialize Transactions

`SolanaService.SerializeSOLTransaction` facilitates the construction of a SOL transaction object.

These transactions, once constructed , can be passed for in-UI proposal with `ParticleAuthCore.Instance.SolanaSendTransaction`.

```csharp theme={null}
string receiver = "";
long amount = 10000000;
SerializeSOLTransReq req = new SerializeSOLTransReq(sender, receiver, amount);
var result = await SolanaService.SerializeSOLTransaction(req);

var resultData = JObject.Parse(result);
var transaction = (string)resultData["result"]["transaction"]["serialized"];
```

### Get Price

To retrieve the price of specified tokens, you can call `SolanaService.GetPrice`.

```csharp theme={null}
 await SolanaService.GetPrice(tokenAddresses, currencies);
```

### Get transactions by Address

To retrieve transactions executed by a given address, you can call `SolanaService.getTransactionsByAddress`.

```csharp theme={null}
await SolanaService.GetTransactionsByAddress(address);
```

### Get Token by Token Address

To obtain the balance of a specified token at a specified address, you can call `SolanaService.GetTokenByTokenAddresses`.

```csharp theme={null}
await SolanaService.GetTokenByTokenAddresses(address, tokenAddresses);
```

### Basic RPC Method

Similar to `EvmService`, standard RPC methods can be called through `SolanaService.Rpc`.

```csharp theme={null}
await SolanaService.Rpc(method, params);
```


# Unreal Engine (No-Code) SDK
Source: https://developers.particle.network/social-logins/auth/multi/unreal

Interacting with Particle Auth within applications made using Unreal Engine.

## Particle Auth for Unreal Engine

Extending beyond directly programmatic implementations, **Particle Auth** also features full support for **Unreal Engine 5** through a no-code interface, enabling the integration of Particle's Wallet-as-a-Service in a familiar and straightforward environment when building games on Unreal Engine.

***

## Getting Started

Getting started with the **Particle Auth Unreal Engine SDK** is simple, although you must manually download and install the SDK using the [`particle-unreal` GitHub repository](https://github.com/Particle-Network/particle-unreal).

To install:

1. Open your project's root directly (you'll find your `.uproject` file here).
2. Create a new directory, `Plugins`, or skip this step if `Plugins` already exists.
3. Navigate to [`Plugins/ParticleSDK` within `particle-unreal`](https://github.com/Particle-Network/particle-unreal/tree/main/Plugins) and copy it to your `Plugins` directory.
4. Open the **Unreal Engine 5** editor, head over to **Menu**, then **Edit**, and finally **Plugins**, in which you'll find an option to enable **ParticleSDK**.

***

## Examples of utilization

### Initialization

To begin, you'll need to create a config object with your `projectId`, `clientKey`, and `appId` filled in.

<Note>Find a guide on how to set up a project and find the required keys: [Dashboard Guide](/social-logins/dashboard).</Note>

After retrieving and setting the necessary values, you must call the `Init` function to complete the initialization. The `Init` function accepts the following parameters:

* **Default Browser Widget**: Typically set to `W_ExecuteWebBrowser`. If you prefer to use a custom `WebBrowser` blueprint, you can do so if it follows the structure of `W_ExecuteWebBrowser`.
* **In Config**: This links to the previously defined configuration object containing `projectId`, `clientKey`, and `appId`.
* **In Theme**: An optional JSON string for customization. For more details, see [Particle Auth Set Auth Theme](/social-logins/auth/desktop-sdks/web#usecustomize).
* **In Language**: Specifies the language used in the modal. Options include `en`, `zh-cn`, `zh-tw`, `ja`, or `ko`.
* **In Chain Name & In Chain Id**: Defines the primary chain to be used, either EVM or Solana. For details on specific `chainId` and `chainName` configurations, refer to [EVM Chains Structure](/social-logins/network-coverage).

<img alt="Particle Network app Unreal." />

<img alt="Particle Network app Unreal." />

### Login

The `Login` function is the core method for onboarding and account creation/sign-in within **Particle Auth** on **Unreal Engine**. It supports social logins and includes the following parameters:

* **Preferred Auth Type:** (Optional) Specifies the authentication method. Options include:
  * `phone` for phone-based logins (sends a verification text and links the account to a phone number).
  * `email` for email-based logins (sends a verification email and links the account to an email address).
  * `jwt` for custom authentication using JWTs.

* **Account:** (Optional) Used to pass the expected values for an email address, phone number, or JWT.

Upon successful login, the function returns a **JSON** string containing detailed user information (such as email or phone, addresses, UUID, token, etc.) as event data.

<img alt="Particle Network app Unreal." />

<img alt="Particle Network app Unreal." />

### Sign Message

To prompt a standard message signature (for general strings, not typed data), you can use the `SignMessage` blueprint.

This blueprint displays a signature request for the end user to confirm. The `SignMessage` function includes the following parameter:

* `Message`: The message to be signed by the user. For EVM chains, this should be a standard UTF-8 string. For Solana, it should be a base58 string.

Upon successful confirmation, the signature is returned as event data via `OnSignMessageEvent`.

<img alt="Particle Network app Unreal." />

<img alt="Particle Network app Unreal." />

### Sign and Send Transaction

`SignAndSendTransaction` is the core method for sending transactions on EVM and Solana.

When called, it prompts the user with a transaction, allowing them to either confirm and push it to the network or reject and cancel the operation. The `SignAndSendTransaction` blueprint includes the following parameter:

* `Transaction`: A string representing the transaction object/structure to be sent. For EVM, this should be a standard UTF-8 string; for Solana, it should be a base58 string (it can be a stringified object).

You can also use the `MakeEvmTransaction` helper method to generate an EVM transaction, which can then be attached to the `Transaction` parameter in `SignAndSendTransaction` for no-code transaction creation.

Upon a successful signature, the event data, including the signature, is returned via `OnSignAndSendTransactionEvent`.

<img alt="Particle Network app Unreal." />

<img alt="Particle Network app Unreal." />

### Sign Typed Data

On **EVM** chains, you can use `SignTypedData` as an alternative to `SignMessage` for signing structured (typed) data.

The `SignTypedData` blueprint includes the following parameters:

* `Message:` The data to be signed is provided as a standard **JSON** string containing the data structure.
* `Version`: **Particle Auth** supports all three versions of `eth_signTypedData`: `v1`, `v3`, and `v4`. By default, `v4` is used.

Upon confirmation, the signature is returned via `OnSignTypedDataEvent`.

<img alt="Particle Network app Unreal." />

<img alt="Particle Network app Unreal." />

### Sign Transaction

`SignTransaction` is a **Solana-specific** method for signing a transaction without pushing it to the network. The `SignTransaction` blueprint includes the following parameters:

* `Transaction`: A **base58** string representing a valid transaction structure to be signed.

Upon a successful signature, the completed signature is returned via `OnSignTransactionEvent`.

<img alt="Particle Network app Unreal." />

<img alt="Particle Network app Unreal." />

### Sign All Transactions

The plural counterpart, `SignAllTransactions`, is another **Solana-specific** method for signing multiple transactions collectively without pushing them to the network.

The `SignAllTransactions` blueprint includes the following parameters:

* `Transactions`: An array of base58 strings, each representing a valid transaction to be signed.

Once the function completes and the signatures are generated, they are returned via `OnSignAllTransactionsEvent`.
.

<img alt="Particle Network app Unreal." />

<img alt="Particle Network app Unreal." />


# Android Quickstart
Source: https://developers.particle.network/social-logins/auth/quickstart/android-quickstart



# Quickstart: Implementing Particle Auth within Android Applications

Particle Auth, responsible for driving standalone social logins leading to MPC-secured accounts, has rich support for Android (Kotlin). Introducing Web2-like onboarding into your mobile application with Particle Auth only takes a few minutes.

Below, you'll find everything you need to get started, from beginning to end.

<Note>
  For complete documentation covering the implementation of Particle Auth on Android in more depth, head over to the [Android SDK reference](/social-logins/connect/mobile/android).
</Note>

***

Before we begin installing and configuring the SDK, you'll need a project that meets the prerequisites listed below (otherwise you may face compatability issues).

### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version **8.5.1** or higher.
* Gradle Version **8.9** or higher.

<Steps>
  <Step title="Configuring the Particle dashboard">
    Finally, before jumping into the SDKs themselves, you'll need to prepare three key values from the [Particle dashboard](https://dashboard.particle.network): your project ID, client key, and app ID. These keys will authenticate your instance of Particle Auth.

    To retrieve them, follow the instructions below.

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new application, or skip this step if you already have one">
        <div>
          <img alt="Create web app." />

          <img alt="Create web app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID, the client key, and the application ID">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at [this video](https://www.youtube.com/watch?v=d7DYCMNDmjo\&ab_channel=ParticleNetwork) or visit the [dashboard quickstart](/social-logins/dashboard).
  </Step>

  <Step title="Configuring settings.gradle">
    We'll be using Maven to install Particle Auth; as such, ensure your `settings.gradle` file looks similar to the example shown below.

    ```gradle theme={null}
    // Source: https://github.com/Particle-Network/particle-android/blob/master/settings.gradle.kts

    pluginManagement {
        repositories {
            gradlePluginPortal()
            google()
            mavenCentral()
        }
    dependencyResolutionManagement {
        repositories {
            google()
            mavenCentral()
            maven { setUrl("https://jitpack.io") }
        }
    }
    ```
  </Step>

  <Step title="Configuring build.gradle">
    You're now ready to establish your dependencies and insert the previously retrieved keys to authenticate the SDK, this will be handled through your `build.gradle` file. The areas in which you'll need to place these keys have been noted in the snippet below.

    Additionally, within `dependencies`, you'll need to (at a minimum) install the following:

    * `network.particle:connect`
    * `network.particle:connect-auth-core-adapter`
    * `network.particle:wallet-service`

    As a result, your `build.gradle` file should look similar to the following:

    ```gradle theme={null}
    // Source: https://github.com/Particle-Network/particle-android/blob/master/app/build.gradle.kts

    android {
      //...
        defaultConfig {
          //...
          minSdk = 23
          targetSdk = 34
          manifestPlaceholders["PN_PROJECT_ID"] = "Replace this with your Project ID" // !
          manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "Replace this with your Client Key" // !
          manifestPlaceholders["PN_APP_ID"] = "Replace this with your App ID" // !
          //...
        }

        compileOptions {
            sourceCompatibility(JavaVersion.VERSION_17)
            targetCompatibility(JavaVersion.VERSION_17)
        }
        kotlinOptions {
            jvmTarget = JavaVersion.VERSION_17.toString()
        }
        dataBinding {
            isEnabled = true
        }
    }

    dependencies {
        // Required
        modules {
            module("org.bouncycastle:bcprov-jdk15to18") {
                replacedBy("org.bouncycastle:bcprov-jdk15on")
            }
            module("org.bouncycastle:bcprov-jdk18on") {
                replacedBy("org.bouncycastle:bcprov-jdk15on")
            }
        }
        // Find the latest version of the SDK:
        // https://search.maven.org/search?q=g:network.particle
        val sdkVersion = "x.x.x" // Replace this with the version you intend to install
        implementation("network.particle:connect:$sdkVersion")
        implementation("network.particle:connect-auth-core-adapter:$sdkVersion")
        implementation("network.particle:wallet-service:$sdkVersion")
    }
    ```
  </Step>

  <Step title="Configuring AndroidManifest.xml">
    Finally, before initializing and utilizing Particle Auth directly, you'll additionally need configure your `AndroidManifest.xml` file, ensuring your project keys are placed accordingly (handled through the previously established environment variables through `build.gradle`).

    Below is an example of what your `AndroidManifest.xml` should resemble.

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

        <application
            android:fullBackupContent="@xml/pn_backup_rules"
            tools:replace="android:fullBackupContent"
            >

            <!-- Particle AuthCore Start -->
            <activity
                android:name="com.particle.auth.controller.AuthCoreWebActivity"
                android:configChanges="orientation|keyboardHidden|screenSize"
                android:exported="true"
                android:launchMode="singleTask"
                android:theme="@style/ThemeAuthWeb">
                <intent-filter>
                    <action android:name="android.intent.action.VIEW" />

                    <category android:name="android.intent.category.DEFAULT" />

                    <category android:name="android.intent.category.BROWSABLE" />

                    <data android:scheme="ac${PN_APP_ID}" />
                </intent-filter>
            </activity>
            <!-- Particle AuthCore End -->

            <!-- Particle Connect Redirect Callback -->
            <activity
                android:name="com.connect.common.controller.RedirectActivity"
                android:exported="true"
                android:launchMode="singleTask"
                android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen">
                <intent-filter>
                    <action android:name="android.intent.action.VIEW" />

                    <category android:name="android.intent.category.DEFAULT" />

                    <category android:name="android.intent.category.BROWSABLE" />

                    <data android:scheme="connect${PN_APP_ID}" />
                </intent-filter>
            </activity>

            <meta-data
                android:name="particle.network.project_client_key"
                android:value="${PN_PROJECT_CLIENT_KEY}" />

            <meta-data
                android:name="particle.network.app_id"
                android:value="${PN_APP_ID}" />

            <meta-data
                android:name="particle.network.project_id"
                android:value="${PN_PROJECT_ID}" />

        </application>


    </manifest>
    ```
  </Step>

  <Step title="Initialize Particle Auth">
    You're now ready to initialize and begin using Particle Auth. Initialization can be done in one line, simply by calling `init` on `ParticleNetwork`. `init` takes the following parameters:

    * `application` (`this`), which represents the underlying Android application.
    * `env`, either `Env.DEV`, `Env.PRODUCTION`, or `Env.STAGING`; this alters the information logged when using Particle Auth.
    * `chain`, a `ChainInfo` object representing the primary chain you intend to use (such as `ChainInfo.Ethereum`, `ChainInfo.Polygon`).

    The following snippet is an example of this.

    ```kotlin theme={null}
    ParticleNetwork.init(this, Env.DEV, ChainInfo.Ethereum)
    ```
  </Step>

  <Step title="Facilitating social login">
    With Particle Auth initialized, you can now facilitate social logins (creation or entry into a corresponding MPC-secured account) through `AuthCore.connect`. Simply, this method requires:

    * `socialType`, the specific social login you're facilitating (this should be a `SocialLoginType` object, such as `SocialLoginType.GOOGLE`).
    * Additionally, you'll need a callback function to handle a successful or failed login.

    Upon calling, the user will undergo authentication through the service specified through `SocialLoginType`; upon returning from this process, their account will be loaded and your application can handle next steps accordingly (through the callback function).

    ```kotlin theme={null}
    AuthCore.connect(SocialLoginType.GOOGLE, connectCallback =
        object : AuthCoreServiceCallback<UserInfo> {
            override fun success(output: UserInfo) {
                // Handle a successful login
            }
            override fun failure(errMsg: ErrorInfo) {
                // Handle a failed login
            }
        })
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieve Account Information

With a user logged in, you can retrieve information about their account (such as their address or the details relating to the chosen method; for example, the email attached to their Google account).

To retrieve an object containing a large amount of general information, call `AuthCore.getUserInfo`. This method will return numerous attributes based upon the login method they chose; for a full list of included properties, head over to the [`getUserInfo` API reference](/social-logins/api/server/getuserinfo).

`AuthCore.getUserInfo` will include a `wallets` object with their address present; although an address can also be retrieved through `AuthCore.evm.getAddress`, or if Solana is being used, `AuthCore.solana.getAddress`.

```kotlin theme={null}
val userInfo = AuthCore.getUserInfo()
val googleEmail = userInfo?.googleEmail // if user login with google account, you can get googleEmail
val publicAddress =
    if (ParticleNetwork.chainInfo.isEvmChain()) {
        AuthCore.evm.getAddress()
    } else {
        AuthCore.solana.getAddress()
    }
})

AuthCore.switchChain(ChainInfo.Solana, callback =
    object : ResultCallback{
        override fun success() {
            val userInfo = AuthCore.getUserInfo()
        }

        override fun failure() {
        }
})

// If you add ParticleAA (Account Abstraction) and enable AA, you can retrieve the address like this:
val smartAccountInfo = ParticleNetwork.getAAService().getSmartAccount(publicAddress)
```

### Sending a Transaction

Additionally, sending a transaction is relatively straightforward; `ParticleNetwork` has a built-in transaction construction method, `createTransaction`, which simply takes a `from`, `to`, and `value` field (optionally, `data` can be used for contract interaction) and returns a transaction object to be used with `AuthCore.evm.sendTransaction`.

Below is an example of this flow.

```kotlin theme={null}
val publicAddress = AuthCore.evm.getAddress()
val uiAmount = "0.0001"
val value = "0x"+uiAmount.toBigDecimal().multiply(BigDecimal(1e18)).toBigInteger().toString(16)
val trans =ParticleNetwork.evm.createTransaction(from ,to,value)!!.serialize()
AuthCore.evm.sendTransaction(trans, callback =
    object : AuthCoreSignCallback<SignOutput> {
        override fun success(output: SignOutput) {
            val signature = output.signature
        }

        override fun failure(errMsg: ErrorInfo) {
        }

    })
```


# Flutter Quickstart
Source: https://developers.particle.network/social-logins/auth/quickstart/flutter-quickstart



# Quickstart: Implementing Particle Auth within applications built with Flutter

Particle Auth is the standard SDK used for standalone social logins, allowing for 2-click onboarding using Google, X, email, and so on.

Specifically, this document will go through the step-by-step process of configuring, initializing, and using **Particle Auth** with **Flutter**.

<Note>
  For complete documentation covering the implementation of Particle Auth with Flutter in more depth, head over to the [Flutter SDK reference](/social-logins/auth/mobile-sdks/flutter).
</Note>

***

<Steps>
  <Step title="Installing Particle Auth">
    To begin, you'll need to add and install Particle Auth's primary SDK, `particle_auth_core`, to your Flutter application; this is a requirement before moving onto platform-specific configuration.

    This can be done through the following command.

    ```shell Terminal theme={null}
    flutter pub add particle_auth_core
    ```
  </Step>

  <Step title="Configuring Particle Auth">
    Once installed, you're ready to configure Particle Auth and initialize the SDK.

    To do this, you'll need three key values from the [Particle dashboard](https://dashboard.particle.network): your project ID, client key, and app ID. These are used to authenticate your instance of Particle Auth and connect your project to the dashboard; these are required to properly initialize the SDK.

    Retrieving these keys can be done through the following steps.

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new iOS/Android application, or skip this step if you already have one">
        <div>
          <img alt="Create iOS app." />

          <img alt="Create iOS app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID, client key, and application ID">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at the [dashboard quickstart](/social-logins/dashboard).

    ***

    ### Android

    #### Prerequisites

    When using Particle Auth's Flutter SDK on Android, you'll need to ensure your project meets a few different requirements (otherwise, you'll likely run into compatibility issues); these are listed below.

    * minSdkVersion **23** or higher.
    * compileSdkVersion, targetSdkVersion **34** or higher.
    * JavaVersion **17**.
    * [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
    * Android Gradle Plugin Version: **8.5.1** or higher.
    * Gradle Version: **8.9** or higher.

    #### Configuring build.gradle

    To begin configuring your project, you'll need to go ahead and open 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 Auth runs appropriately:

    1. `minSdkVersion`, which in most cases will be set to `23`.
    2. `manifestPlaceholders["PN_PROJECT_ID"]`, the `projectId` previously retrieved from the Particle dashboard.
    3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the `clientKey` previously retrieved from the Particle dashboard.
    4. `manifestPlaceholders["PN_APP_ID"]`, the `appId` previously retrieved from the Particle dashboard.

    Below is an example of how this may look.

    ```groovy build.gradle theme={null}
    // Example
    defaultConfig {
      applicationId "com.example.particle_auth_test"

      minSdkVersion 23 // Required by Particle Auth
      targetSdkVersion flutter.targetSdkVersion
      versionCode flutterVersionCode.toInteger()
      versionName flutterVersionName

      manifestPlaceholders["PN_PROJECT_ID"] = "YOUR PROJECT ID"
      manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "YOUR CLIENT KEY"
      manifestPlaceholders["PN_APP_ID"] = "YOUR APP ID"
    }
    ```

    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`, as shown below.

    ```groovy build.gradle theme={null}
    // Example
    compileOptions {
      sourceCompatibility JavaVersion.VERSION_17
      targetCompatibility JavaVersion.VERSION_17
    }

    kotlinOptions {
      jvmTarget = JavaVersion.VERSION_17.toString()
    }

    dataBinding {
      enabled = true
    }
    ```

    Finally, for dependency management, within `build.gradle` you'll need to ensure that the `repositories` object in both `buildscript` and `allprojects` has `maven { setUrl("https://jitpack.io") }` present, such as is shown in the following snippet.

    ```groovy build.gradle theme={null}
    // Example
    buildscript {
      ...
      repositories {
          google()
          mavenCentral()
          maven { setUrl("https://jitpack.io") }  // Add this
      }

      dependencies {
          ...
      }
    }


    allprojects {
      repositories {
          google()
          mavenCentral()
          maven { setUrl("https://jitpack.io") }  // Add this
      }
    }

    ...

    ```

    ***

    ### iOS

    Alternatively, if you're building an iOS application with Flutter, this entails a unique and iOS-specific configuration process, as will be covered in this section.

    #### Prerequisites

    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 navigate to `apps/{project name}.xcworkspace`.

    <Steps>
      <Step title="Configure ParticleNetwork-Info.plist">
        At the root of your Xcode project, create a new file, `ParticleNetwork-Info.plist`. Ensure this is marked under `Target Membership`.

        Now, with a fresh `ParticleNetwork-Info.plist` file, go ahead and fill it in with the following values, previously retrieved from the [Particle dashboard](https://dashboard.particle.network):

        ```xml ParticleNetwork-Info.plist theme={null}
            <?xml version="1.0" encoding="UTF-8"?>
            <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
            <plist version="1.0">
            <dict>
              <key>PROJECT_UUID</key>
              <string>YOUR_PROJECT_UUID</string> <!-- Replace this with your project ID -->
              <key>PROJECT_CLIENT_KEY</key>
              <string>YOUR_PROJECT_CLIENT_KEY</string> <!-- Replace this with your client key -->
              <key>PROJECT_APP_UUID</key>
              <string>YOUR_PROJECT_APP_UUID</string> <!-- Replace this with your app ID -->
            </dict>
            </plist>
        ```
      </Step>

      <Step title="Configuring Info.plist: Face ID">
        Furthermore, to enable Face ID for your app, add a usage description to your `Info.plist` file by including the following code:

        ```xml Info.plist theme={null}
        <key>NSFaceIDUsageDescription</key>
          <string>We use Face ID for secure access to the app.</string>
        ```
      </Step>

      <Step title="Configuring your Podfile">
        Finally, you'll need to edit your Podfile to ensure `particle_auth_core` is properly imported. Head over to the [linked example](https://github.com/Particle-Network/particle-flutter/blob/master/particle-auth-core/example/ios/Podfile) to complete this, if you haven't already.
      </Step>
    </Steps>

    <Note>
      <p>Another important note before continuing.</p>
      <p>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 snippet below.</p>

      ```ruby theme={null}
      post_install do |installer|
        installer.pods_project.targets.each do |target|
          target.build_configurations.each do |config|
            config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
          end
        end
      end
      ```
    </Note>
  </Step>

  <Step title="Initializing Particle Auth">
    At this point, you've installed and configured Particle Auth; the only step remaining before the SDK can be used is initialization.

    Particle Auth can be initialized by simply setting your project ID and client key (previously retrieved from the Particle dashboard) through `ParticleInfo.set`. An example of this has been included in the snippet below.

    Upon setting these values, you'll need to call the `init` method on `ParticleBase`. This takes the following parameters:

    * `chainInfo`, representing the primary chain you intend to use (for example, `ChainInfo.Ethereum`, `chainInfo.Polygon`).
    * `env`, affecting the information logged within your environment (`Env.dev`, `Env.production`, or `Env.staging`).

    ```dart theme={null}
    // Set the project info, get it from https://dashboard.particle.network.
    ParticleInfo.set(projectId, clientKey);
    // Initialize ParticleAuth and ParticleAuthCore.
    ParticleBase.init(ChainInfo.Ethereum, env);
    ParticleAuthCore.init()
    ```
  </Step>

  <Step title="Facilitating social login">
    You're now ready to facilitate social login and interacting with the resulting accounts.

    As shown below, you'll need to call `ParticleAuthCore.connect` to initiate social login, passing in the specific login type you'd like the user to onboard through (`.google`, `.twitter`, `.discord`, etc.) alongside, if applicable, the type of account prompt used by the OAuth provider (`.select_account`, `.consent`, `.none`).

    <Tip>When a user logs in for the first time, if there is no account, we will create one. Based on the current `chainInfo`, a new address will be generated. For example, if the current chain is EVM-compatible, only an EVM address will be generated; if it's the Solana chain, only a Solana address will be generated. If you want to obtain both addresses, you can use `ParticleAuthCore.switchChain` to switch chains, and after waiting for 2 seconds, a new address for the selected chain will be generated for you.</Tip>

    ```dart theme={null}
    final userInfo = await ParticleAuthCore.connect(LoginType.google,
              prompt: SocialLoginPrompt.select_account);

    // Additionally, you can implement custom authentication through JWT.
    // Learn more: https://developers.particle.network/social-logins/configuration/auth/jwt
    final userInfo = await ParticleAuthCore.connect(LoginType.jwt,
              account: "the JWT");
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieve User Information

With a user logged in, you'll be able to retrieve information about their account (such as their address, or specific details regarding the social login mechanism they used) through methods such as `Evm.getAddress` and `ParticleAuthCore.getUserInfo` (`getUserInfo` returns an object with numerous points of information; to learn more, head over to its [API reference](/social-logins/api/server/getuserinfo)).

The following snippet is an example of retrieving a user's address on both EVM and Solana alongside pulling their broader account information.

```dart theme={null}
final evmAddress = await Evm.getAddress();
final solanaAddress = await Solana.getAddress();

bool isSuccess = await ParticleAuthCore.switchChain(ChainInfo.Solana);
final userInfo = await ParticleAuthCore.getUserInfo();

// If you're using account abstraction through particle_aa, you'll need to retrieve their address through the following:
final accountName = AccountName.BICONOMY_V2();
final smartAccountConfig =
          SmartAccountConfig.fromAccountName(accountName, eoaAddress);
List<dynamic> response = await EvmService.getSmartAccount(
    <SmartAccountConfig>[smartAccountConfig]);
final smartAccountAddress = (response[0] as Map<String, dynamic>)["smartAccountAddress"]
    as String;
```

### Send a Transaction

Now, as a final example, you can send a transaction, such as burning 0.000000001 ETH.

To do this, you'll need to construct a transaction with `EvmService.createTransaction` using standard parameters such as `evmAddress`, `data`, `value`, and `receiverAddress`,

Upon construction, the transaction can be sent through `Evm.sendTransaction`; once the user signs/confirms, it'll be pushed to the network; an example of this is shown below.

```dart theme={null}
final evmAddress = await Evm.getAddress();
const receiverAddress = "0x0000000000000000000000000000000000000000";
final value = BigInt.from(0.000000001 * pow(10, 18));
const data = "0x";

final transaction = await EvmService.createTransaction(evmAddress, data, value, receiverAddress);
String txHash = await Evm.sendTransaction(transaction);
```

<Tip>Take a look at the complete demo project [here](https://github.com/Particle-Network/particle-flutter/tree/master/particle-auth-core/example).</Tip>


# iOS Quickstart
Source: https://developers.particle.network/social-logins/auth/quickstart/ios-quickstart



# Quickstart: Implementing Particle Auth within iOS Applications

Particle Auth, the core SDK responsible for driving social logins, has various iOS SDKs; implementation only takes a few steps.

This document will go through the step-by-step process of configuring, initializing, and using Particle Auth on iOS.

<Note>
  For complete documentation covering the implementation of Particle Auth on iOS in more depth, head over to the [iOS SDK reference](/social-logins/auth/mobile-sdks/ios).
</Note>

Before jumping into it, ensure your project meets the following minimum requirements (otherwise, you may encounter compatibility issues).

### Prerequisites

* **Xcode 15.0** or higher.
* **CocoaPods 1.14.3** or higher.
* **iOS 14** or higher.

***

<Steps>
  <Step title="Installing Particle Auth">
    To begin, you'll need to install Particle Auth through your Podfile; specifically, you'll need (at a minimum) the following libraries:

    * `ParticleAuthCore`
    * `ParticleMPCCore`
    * `Thresh`
    * Optionally, `ParticleWalletAPI` for transaction construction.
    * Optionally, `ParticleWallerGUI` to enable an embedded wallet interface.

    Below is a snippet representing the installation of the aforementioned libraries.

    ```ruby Podfile theme={null}
    pod `ParticleAuthCore`
    pod 'ParticleMPCCore'
    pod 'Thresh'

    pod 'ParticleWalletAPI' # Optional
    pod `ParticleWalletGUI` # Optional
    ```
  </Step>

  <Step title="Configuring Particle Auth">
    Once installed, you're ready to configure Particle Auth and initialize the SDK.

    To do this, you'll need three key values from the [Particle dashboard](https://dashboard.particle.network): your project ID, client key, and app ID. These are used to authenticate your instance of Particle Auth and connect your project to the dashboard; these are required to properly initialize the SDK.

    To retrieve these keys, follow the steps outlined below:

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new iOS application, or skip this step if you already have one">
        <div>
          <img alt="Create iOS app." />

          <img alt="Create iOS app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID, client key, and application ID">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at the [dashboard quickstart](/social-logins/dashboard).

    With your project ID, client key, and app ID retrieved, you'll need to add a file named `ParticleNetwork-Info.plist` to your project, then insert the aforementioned keys as is exemplified below.

    ```xml ParticleNetwork-Info.plist theme={null}
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
    	<key>PROJECT_UUID</key>
    	<string>YOUR_PROJECT_UUID</string> <!-- Replace this with your project ID -->
    	<key>PROJECT_CLIENT_KEY</key>
    	<string>YOUR_PROJECT_CLIENT_KEY</string> <!-- Replace this with your client key -->
    	<key>PROJECT_APP_UUID</key>
    	<string>YOUR_PROJECT_APP_UUID</string> <!-- Replace this with your app ID -->
    </dict>
    </plist>
    ```
  </Step>

  <Step title="Initialize Particle Auth">
    At this point, you've installed and configured Particle Auth; the only step remaining before the SDK can be used is initialization.

    Particle Auth can be initialized by simply calling the `initialize` method on `ParticleNetwork`. This takes the following parameters:

    * `config`, which takes:
      * `chainInfo`, representing the primary chain you intend to use (for example, `.ethereum`, `.polygon`).
      * `devEnv`, affecting the information logged within your environment (`.debug`, `.production`, or `.staging`).

    The snippet below is an example of this.

    ```swift theme={null}
    // You can retrieve chainInfo from ChainInfo, the initialize works for the first time open.
    // If you support more than one chain, you can use ParticleNetwork.setChainInfo to switch.
    ParticleNetwork.initialize(config: .init(chainInfo: .ethereum, devEnv: .debug))
    ```
  </Step>

  <Step title="Facilitating social login">
    You're ready to facilitate social login and interacting with the resulting accounts.

    As shown below, you'll need to call `auth.connect` to initiate social login, passing in the specific login type you'd like the user to use (`.google`, `.twitter`, `.discord`, etc.) alongside, if applicable, the type of account prompt used by the OAuth provider (`.selectAccount`, `.consent`, `.none`).

    <Tip>When a user logs in for the first time, if there is no account, we will create one. Based on the current chainInfo, a new address will be generated. For example, if the current chain is EVM-compatible, only an EVM address will be generated; if it's the Solana chain, only a Solana address will be generated. If you want to obtain both addresses, you can use `auth.switchChain` to switch chains, and after waiting for 2 seconds, a new address for the selected chain will be generated for you.</Tip>

    ```swift theme={null}
    let userInfo = try await auth.connect(type: .google, socialLoginPrompt: .selectAccount)

    // Additionally, you can implement custom authentication through JWT.
    // Learn more: https://developers.particle.network/guides/configuration/auth/jwt
    let userInfo = try await auth.connect(type: .jwt, account: "the JWT")
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieve User Information

With a user logged in, you'll be able to retrieve information about their account (such as their address, or specific details regarding the social login mechanism they used) through methods such as `auth.evm.getAddress` and `auth.getUserInfo` (`getUserInfo` returns an object with numerous points of information; to learn more, head over to its [API reference](/social-logins/api/server/getuserinfo)).

The following snippet is an example of retrieving a user's address on both EVM and Solana alongside pulling their broader account information.

```swift theme={null}
let evmAddress = auth.evm.getAddress()
let solanaAddress = auth.solana.getAddress()

let flag = try await self.auth.switchChain(chainInfo: .solana)
if flag {
    let userInfo = self.auth.getUserInfo()
}

// If you're using account abstraction through ParticleAA, you'll need to retrieve their address through the following:
let smartAccountAddress = self.auth.getUserInfo()?.smartAccountAddress
```

### Send a Transaction

Now, as a final example, you can send a transaction, such as burning 0.000000001 ETH.

To do this, you'll need to construct a transaction with `ParticleWalletAPI.createTransaction` using standard parameters such as `from`, `to`, `value`, and (optionally) `data`.

Upon construction, the transaction can be sent through `auth.evm.sendTransaction`; once the user signs/confirms, it'll be pushed to the network; an example of this is shown below.

```swift theme={null}
let evmAddress = auth.evm.getAddress()
let receiverAddress = "0x0000000000000000000000000000000000000000"
let value = BDouble(0.000000001 * pow(10, 18)).rounded().toHexString()
let transaction = try await ParticleWalletAPI.evm().createTransaction(from: evmAddress, to: receiverAddress, value: value, data: "0x").value
              
let txHash = try await self.auth.evm.sendTransaction(transaction, chainInfo: nil)
```

### Open Wallet

If you included `ParticleWalletGUI` within your Podfile, you can open the (optional) embedded wallet interface at any time after a user connects, use `ParticleWalletGUI.setSupportChain` to set supported chains, then `PNRouter` to open the interface.

```swift theme={null}
ParticleWalletGUI.setSupportChain(Set<[ChainInfo.ethereum, ChainInfo.bnbChain]>)
PNRouter.navigatorWallet(hiddenBackButton: false)
```

<Tip>Take a look at the complete demo project [here](https://github.com/Particle-Network/particle-mpc-core-ios).</Tip>


# Mobile (Android/iOS) Quickstart
Source: https://developers.particle.network/social-logins/auth/quickstart/mobile-quickstart



# Quickstart: Implementing Particle Auth within Mobile Applications (Generic)

Most of the 32 SDKs available within Particle Network's Wallet-as-a-Service belong to mobile platforms. Particle's Wallet-as-a-Service has SDKs across **Android**, **iOS**, **Unity**, **Flutter**, and **React Native**. Across these various SDKs, the implementation flow of the associated services (Particle Auth, Particle Auth Core, Particle Connect, and the Particle AA SDK) varies significantly based on the specific platform, although there are several common denominators; these will be covered within this document.

For a full rundown on each service and its associated mobile SDKs (with detailed tutorials on installation, configuration, and utilization), see [Introduction to API & SDK overview](/social-logins/auth/introduction).

***

## Installing WaaS-related libraries

Between Particle Auth, Particle Auth Core, Particle Connect, Particle Wallet, and the Particle AA SDK, there are a variety of potential SDKs you could use to implement these services within your application. The specifics of which ones you choose will depend mainly on the platform you intend to build your application on.

A rundown of the various **core** platform-specific mobile SDKs for each service can be found below:

| Product          | SDKs                                                                                                                                                                                                     | Description                                                                                                                                                                                                             |
| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Particle Auth    | `network.particle:auth-service` (Android), `ParticleAuthCore` (iOS), `particle_auth_core` (Flutter), `particle-unity` (Unity), `@particle-network/rn-auth-core` (React Native), `particle-cocos` (Cocos) | The various platform-specific mobile Particle Auth SDKs act as an all-in-one mechanism for onboarding users (initiating social login) and interacting with accounts created through Particle's Wallet-as-a-Service.     |
| Particle Connect | `particle.network:connect` (Android), `ParticleConnect` (iOS), `particle_connect` (Flutter), `particle-unity` (Unity), `@particle-network/rn-connect` (React Native)                                     | The Particle Connect mobile SDKs enable unified connection between Web2-based social logins and external wallets through an in-house connection kit.                                                                    |
| Particle Wallet  | `network.particle:wallet-service` (Android), `ParticleWalletAPI`, `ParticleWalletGUI` (iOS), `particle_wallet` (Flutter), `particle-unity` (Unity), `@particle-network/rn-wallet` (React Native)         | Particle Wallet and its associated mobile SDKs act as wallet infrastructure for accounts generated by social login with Particle Auth alongside external wallets connected through Particle Connect.                    |
| Particle AA SDK  | `network.particle:aa-service` (Android), `ParticleAA` (iOS), `particle_aa` (Flutter), `@particle-network/rn-aa` (React Native), `particle-unity` (Unity)                                                 | The Particle Network AA SDK enables end-to-end utilization of account abstraction natively within Particle Network's Wallet-as-a-Service, handling smart accounts, the construction and sending of UserOperations, etc. |

## Configuring Particle Auth

As mentioned, using these SDKs will vary significantly, although there are some common structures to keep in mind as you implement them within your application. The first and most universal of them is the requirement of the `projectId`, `clientKey`, and `appId` values. Each SDK, regardless of platform, will require these three values for authentication and connection between your application and the Particle dashboard.

To find these values and use them within your project, follow these steps:

1. Sign up/log in to the [Particle dashboard](https://dashboard.particle.network).

<div>
  <img alt="Login into Particle." />

  <img alt="Login into Particle." />
</div>

2. Create a new project or enter an existing project.

<div>
  <img alt="Create Particle project." />

  <img alt="Create Particle project." />
</div>

3. Create a new application, or skip this step if you already have one.

<div>
  <img alt="Create a new mobile app." />

  <img alt="Create a new mobile app." />
</div>

4. Retrieve the project ID (`projectId`), the client key (`clientKey`), and the application ID (`appId`).

<div>
  <img alt="Find app's credentials." />

  <img alt="Find app's credentials." />
</div>

For more information on the Particle dashboard, take a look at [this video](https://www.youtube.com/watch?v=d7DYCMNDmjo\&ab_channel=ParticleNetwork).

Now that you have your `projectId`, `clientKey`, and `appId`, you can move on to configuring your SDK of choice. The configuration will look somewhat similar between each service, although, of course, with changes in structure and syntax between platforms. To understand where you need to enter your `projectId`, `clientKey`, and `appId`, head over to [Introduction to Particle Auth](/social-logins/auth/introduction) and find the guide for your platform of choice.

Once you've configured the SDK in the backend, initialization will look like one of the following snippets, depending on your platform:

```kotlin Various languages theme={null}
// Android
ParticleNetwork.init(this, Env.DEV, EthereumChain(EthereumChainId.Mainnet))

// iOS
let config = ParticleNetworkConfiguration(chainInfo: .ethereum, devEnv: .debug)
ParticleNetwork.initialize(config: config)

// Flutter
ParticleBase.init(ChainInfo.Ethereum, Env.dev);

// Unity
ParticleNetwork.Init(ChainInfo.Ethereum, Env.DEV); 

// React Native & Cocos
particleBase.init(Ethereum, Env.Dev);
```

***

## Facilitating login

Like the configuration and initialization mechanism, the specific syntax and setup required for initiating a social login within your mobile application will deviate based on the platform. However, generally, this can be done by calling the `login` method available within the master object used prior for initialization (`ParticleNetwork`, `ParticleAuthCore`, `particleAuthCore`), and passing in common parameters, as is shown below:

```kotlin Various languages theme={null}
// Android
ParticleNetwork.login(
  loginType = LoginType.PHONE,
  account = "", // Optional
  supportAuthTypeValues = SupportAuthType.FACEBOOK.value, // Optional
  loginFormMode = false,  // Optional
  prompt = null, // Optional
  loginCallback = object : WebServiceCallback<LoginOutput> {
    override fun success(output: LoginOutput) {
      // Handle success
    }
    override fun failure(errMsg: WebServiceError) {
      // Handle failure
    }
  })

// iOS
let auth = Auth()
let userInfo = try await auth.connect(type: .email)
  
// Flutter
final userInfo = await ParticleAuthCore.connect(loginType, account: account, supportAuthTypes: supportAuthTypes, loginPageConfig: loginPageConfig);

// Unity
await ParticleAuthCore.Instance.Connect(LoginType.EMAIL, null, allSupportLoginTypes, SocialLoginPrompt.SelectAccount, loginPageConfig);

// React Native & Cocos
await particleAuthCore.connect(type, null, supportAuthType);
```

<Tip>The complete mobile SDK reference is available at [SDKs (Mobile)](/social-logins/auth/mobile-sdks/android).</Tip>


# React Native Quickstart
Source: https://developers.particle.network/social-logins/auth/quickstart/react-native-quickstart



# Quickstart: Implementing Particle Auth within applications built with React Native

Particle Auth, the primary SDK driving standalone social logins, has native support for React Native; integration only takes a few steps.

This document will go through the step-by-step process of configuring, initializing, and using Particle Auth with React Native.

<Note>
  For complete documentation covering the implementation of Particle Auth on React Native in more depth, head over to the [React Native SDK reference](/social-logins/auth/mobile-sdks/react).
</Note>

***

<Steps>
  <Step title="Installing Particle Auth">
    Getting started, you'll need to install `@particle-network/rn-auth-core` alongside `@particle-network/rn-base`.

    To do this, execute the command(s) below.

    ```shell Terminal theme={null}
    npm install @particle-network/rn-auth-core
    npm install @particle-network/rn-base

    // Or

    yarn add @particle-network/rn-auth-core
    yarn add @particle-network/rn-base
    ```
  </Step>

  <Step title="Configuring Particle Auth">
    Once installed, you're ready to begin configuring Particle Auth.

    To start, you'll need to retrieve three key values from the [Particle dashboard](https://dashboard.particle.network): your project ID, client key, and app ID. These are used to authenticate your instance of Particle Auth and connect your project to the dashboard;.

    To retrieve these keys, follow the steps outlined below:

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new iOS/Android application, or skip this step if you already have one">
        <div>
          <img alt="Create iOS app." />

          <img alt="Create iOS app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID, client key, and application ID">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at the [dashboard quickstart](/social-logins/dashboard).

    ***

    ### Android

    If you're planning on using Android for your React Native application, ensure you meet the following prerequisites (otherwise, expect compatibility issues):

    #### Prerequisites

    * minSdkVersion **23** or higher.
    * compileSdkVersion, targetSdkVersion **34** or higher.
    * JavaVersion **17**.
    * [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
    * Android Gradle Plugin Version: **8.5.1** or higher.
    * Gradle Version: **8.9** or higher. (before react-native:0.75.2, use 8.8)

    Once you've made sure your project meets these requirements, you'll need to move on and define the aforementioned configuration values (your project ID, client key, and app ID) within your `build.grade` file (which is generally found at `${project name}/android/app/build.gradle`).

    Specifically, within `build.gradle`, you'll need to set four different values:

    1. `dataBinding`, this should be enabled with `enabled = true`.
    2. `manifestPlaceholders["PN_PROJECT_ID"]`, the project ID previously retrieved from the Particle dashboard.
    3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the client key previously retrieved from the Particle dashboard.
    4. `manifestPlaceholders["PN_APP_ID"]`, the app ID previously retrieved from the Particle dashboard.

    ```groovy build.gradle theme={null}
    android {
      ...
      defaultConfig {
          ......
          manifestPlaceholders["PN_PROJECT_ID"] = "Your project ID"
          manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "Your client key"
          manifestPlaceholders["PN_APP_ID"] = "Your app ID"
      }

      dataBinding {
          enabled = true
      }

    }
    ```

    ***

    ### iOS

    Alternatively, if you plan to use iOS for your React Native application, the underlying setup process differs slightly. Before diving in, you'll need to ensure that your project meets the following requirements:

    * **Xcode 15.0** or later.

    * **iOS 14** or later.

    With these requirements set, you'll need to open an exported iOS project and navigate to `ios/{project name}.xcworkspace`.

    <Steps>
      <Step title="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 previously retrieved project keys (from the [Particle dashboard](https://dashboard.particle.network)):

        ```xml ParticleNetwork-Info.plist theme={null}
            <?xml version="1.0" encoding="UTF-8"?>
            <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
            <plist version="1.0">
            <dict>
              <key>PROJECT_UUID</key>
              <string>YOUR_PROJECT_UUID</string>
              <key>PROJECT_CLIENT_KEY</key>
              <string>YOUR_PROJECT_CLIENT_KEY</string>
              <key>PROJECT_APP_UUID</key>
              <string>YOUR_PROJECT_APP_UUID</string>
            </dict>
            </plist>
        ```
      </Step>

      <Step title="Configuring Info.plist: Face ID">
        Additionally, to enable Face ID (privacy setting) to your app, head over to (or create) the `Info.plist` file and include the following snippet:

        ```xml Info.plist theme={null}
        <key>NSFaceIDUsageDescription</key>
          <string>We use Face ID for secure access to the app.</string>
        ```
      </Step>

      <Step title="Configuring your Podfile">
        Finally, you'll need to edit your Podfile to align with the snippet below; this is required for all iOS projects that leverage Particle Auth Core.

        ```ruby theme={null}

        // add ParticleAuthCore pods to your target
        pod "Thresh", '2.0.2'
        pod "ParticleMPCCore", '2.0.2'
        pod "ParticleAuthCore", '2.0.2'
        pod "AuthCoreAdapter", '2.0.2'

        pod 'ParticleNetworkBase', '2.0.2'
        pod 'ConnectCommon', '2.0.2'

        pod 'SwiftyUserDefaults', :git ='https://github.com/SunZhiC/SwiftyUserDefaults.git', :branch ='master'
        pod 'SkeletonView', :git ='https://github.com/SunZhiC/SkeletonView.git', :branch ='main'


        post_install do |installer|
        installer.pods_project.targets.each do |target|
          target.build_configurations.each do |config|
          config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
            end
          end
         end
        ```

        <Note>
          <p>Specific note for using Expo.</p>
          <p>If you're working with Expo, your Podfile needs additional editing to ensure compatibility with Particle Auth Core, as below:</p>

          <p />

          <p>You can reference this [Podfile](https://github.com/Particle-Network/particle-react-native/blob/master/Expo-Examples/new-expo-app/ios/Podfile).</p>

          <p>
            ```ruby theme={null}
            post_install do |installer|
              installer.pods_project.targets.each do |target|
                  if target.name == 'ParticleNetworkBase' or
                     target.name == 'ParticleNetworkChains' or
                     target.name == 'ParticleWalletAPI' or
                     target.name == 'ParticleWalletGUI' or
                     target.name == 'ParticleWalletConnect' or
                     target.name == 'ParticleAA' or
                     target.name == 'ParticleConnectKit' or
                     target.name == 'ParticleConnect' or
                     target.name == 'ConnectWalletConnectAdapter' or
                     target.name == 'ConnectSolanaAdapter' or
                     target.name == 'ConnectEVMAdapter' or
                     target.name == 'ConnectPhantomAdapter' or
                     target.name == 'ConnectCommon' or
                     target.name == 'WalletConnectSwiftV2' or
                     target.name == 'CryptoSwift' or
                     target.name == 'SwiftyUserDefaults' or
                     target.name == 'RxSwift' or
                     target.name == 'RxCocoa' or
                     target.name == 'RxRelay' or
                     target.name == 'SwiftyJSON' or
                     target.name == 'Base58.swift' or
                     target.name == 'JXPagingView' or
                     target.name == 'JXSegmentedView' or
                     target.name == 'Starscream' or
                     target.name == 'SwiftMessages' or
                     target.name == 'SkeletonView' or
                     target.name == 'GRDB.swift' or
                     target.name == 'SnapKit' or
                     target.name == 'BigInt' or
                     target.name == 'Alamofire' or
                     target.name == 'RxAlamofire' or
                     target.name == 'Then' or
                     target.name == 'Thresh' or
                     target.name == 'ParticleMPCCore' or
                     target.name == 'ParticleAuthCore' or
                     target.name == 'AuthCoreAdapter'

                     target.build_configurations.each do |config|
                          config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
                  end
                end
            end
            ```
          </p>
        </Note>
      </Step>
    </Steps>
  </Step>

  <Step title="Initializing Particle Auth">
    Having now installed and configured Particle Auth based on the platform you're using, you'll need to initialize the SDK.

    Particle Auth can be initialized by first setting your project ID and client key through defining `ParticleInfo.projectId` and `ParticleInfo.clientKey`.

    After doing so, simply call the `init` method on `particleBase`. This takes the following parameters:

    * `chainInfo`, representing the primary chain you intend to use (for example, `ChainInfo.Ethereum`, `chainInfo.Polygon`).
    * `env`, affecting the information logged within your environment (`Env.dev`, `Env.production`, or `Env.staging`).

    The snippet below is an example of this.

    ```typeScript theme={null}
    // Set your project info, retrieved from https://dashboard.particle.network.
    ParticleInfo.projectId = ''; // your project id
    ParticleInfo.clientKey = ''; // your client key

    // Inititilze particleBase and particleAuthCore.
    const chainInfo = Ethereum;
    const env = Env.Dev;
    particleBase.init(chainInfo, env);
    particleAuthCore.init();
    ```
  </Step>

  <Step title="Facilitating social login">
    You're ready to facilitate social login and interacting with the resulting account.

    As shown below, you'll need to call `particleAuthCore.connect` to initiate social login, passing in the specific login type you'd like the user to onboard through (`.Google`, `.Twitter`, `.Discord`, etc.) alongside, if applicable, the type of account prompt used by the OAuth provider (`.SelectAccount`, `.Consent`, `.None`).

    <Tip>When a user logs in for the first time, if there is no account, we will create one. Based on the current chainInfo, a new address will be generated. For example, if the current chain is EVM-compatible, only an EVM address will be generated; if it's the Solana chain, only a Solana address will be generated. If you want to obtain both addresses, you can use `ParticleAuthCore.switchChain` to switch chains, and after waiting for 2 seconds, a new address for the selected chain will be generated for you.</Tip>

    ```typeScript theme={null}
    const userInfo = await particleAuthCore.connect(LoginType.google, null, supportAuthTypes, SocialLoginPrompt.SelectAccount);

    // Additionally, you can implement custom authentication through JWT.
    // Learn more: https://developers.particle.network/guides/configuration/auth/jwt
    const userInfo = await particleAuthCore.connect(LoginType.JWT, jwt);
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieve User Information

With a user logged in, you'll be able to retrieve information about their account (such as their address, or specific details regarding the social login mechanism they used) through methods such as `evm.getAddress` and `particleAuthCore.getUserInfo` (`getUserInfo` returns an object with numerous points of information; to learn more, head over to its [API reference](/social-logins/api/server/getuserinfo)).

The following snippet is an example of retrieving a user's address on both EVM and Solana alongside pulling their broader account information.

```typeScript theme={null}
const evmAddress = await evm.getAddress();
const solanaAddress = await solana.getAddress();

const isSuccess = await particleAuthCore.switchChain(Solana);
const userInfo = await particleAuthCore.getUserInfo();

// If you're using account abstraction through @particle-network/rn-aa, you'll need to retrieve their address through the following:
const smartAccountParam = {
    name: AccountName.BICONOMY_V2().name,
    version: AccountName.BICONOMY_V2().version,
    ownerAddress: eoaAddress,
};
const result: SmartAccountInfo[] = await EvmService.getSmartAccount([smartAccountParam]);
const smartAccountAddress = result[0]?.smartAccountAddress;
```

### Send a Transaction

Now, as a final example, you can send a transaction, such as burning 0.000000001 ETH.

To do this, you'll need to construct a transaction with `EvmService.createTransaction` using standard parameters such as `evmAddress` (the sender), `data`, `value`, and `receiverAddress`,

Upon construction, the transaction can be sent through `evm.sendTransaction`; once the user signs/confirms, it'll be pushed to the network; an example of this is shown below.

```typeScript theme={null}
const evmAddress = await evm.getAddress();
const receiverAddress = "0x0000000000000000000000000000000000000000";
const value = BigNumber(0.000000001 * Math.pow(10, 18));
const data = "0x";

const transaction = EvmService.createTransaction(evmAddress, data, value, receiverAddress);
const txHash = await evm.sendTransaction(transaction);
```

<Tip>Take a look at the complete demo project [here](https://github.com/Particle-Network/particle-react-native/tree/master/particle-auth-core/example).</Tip>


# Web Quickstart
Source: https://developers.particle.network/social-logins/auth/quickstart/web-quickstart



# Quickstart: Implementing Particle Auth within Web Applications

Getting started and integrating Particle Network's Wallet-as-a-Service within your web application often takes **less than five minutes**.

Below is a quick rundown on installing, configuring, and facilitating social logins within a typical Next.js application. For a more in-depth explanation of each feature, go to [Introduction to API & SDK overview](/social-logins/auth/introduction).

***

<Steps>
  <Step title="Installing Particle Auth">
    Particle Auth is the primary mechanism of implementing Particle Network's Wallet-as-a-Service and associated social authentication flow.

    To install Particle Auth within your project, copy and execute the following command.

    <CodeGroup>
      ```bash yarn theme={null}
      yarn add @particle-network/authkit @particle-network/wallet viem@2
      ```

      ```bash npm theme={null}
      npm install @particle-network/authkit @particle-network/wallet viem@2
      ```
    </CodeGroup>
  </Step>

  <Step title="Configuring Particle Auth">
    Once installed, you're ready to configure the SDK.

    Particle Auth requires three key values to be initiated: `projectId`, `clientKey`, and `appId`. These values fundamentally link your application with the [Particle dashboard](https://dashboard.particle.network/).

    To retrieve these values for configuration within your application, follow these steps:

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network/)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new web application, or skip this step if you already have one">
        <div>
          <img alt="Create web app." />

          <img alt="Create web app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID (`projectId`), the client key (`clientKey`), and the application ID (`appId`)">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at [this video](https://www.youtube.com/watch?v=d7DYCMNDmjo\&ab_channel=ParticleNetwork) or visit the [dashboard quickstart](/social-logins/dashboard).

    With your `projectId`, `clientKey`, and `appId` retrieved, you'll need to configure Particle Auth within your application through `AuthCoreContextProvider` from `@particle-network/authkit`, the primary React component responsible for initializing Particle Auth.
  </Step>

  <Step title="Configuring `AuthCoreContextProvider`">
    The `AuthCoreContextProvider` component handles the configuration for Particle Auth. It's best practice to place this configuration in a dedicated `AuthKit.tsx` file within the `src` directory, where you can set up and export the component.

    Once configured, you can use this export to wrap your main `App` component, ensuring authentication is available throughout your application.

    Here’s an example of how to configure `AuthCoreContextProvider`:

    <InteractiveLayout />

    <Tip>Learn more about the Particle Auth configuration options in the [Particle Auth SDK page](/social-logins/auth/desktop-sdks/web).</Tip>
  </Step>

  <Step title="Wrap your application with ParticleAuthkit">
    Wrap your main application component (where you use the Particle Auth hooks) with the `ParticleAuthKit` component, which is exported from `AuthKit`.

    Here’s an example of how this might look in a `layout.tsx` file:

    ```tsx layout.tsx theme={null}
    import type { Metadata } from "next";
    import { Inter } from "next/font/google";
    import "./globals.css";

    const inter = Inter({ subsets: ["latin"] });

    import { ParticleAuthkit } from "./components/AuthKit";

    export const metadata: Metadata = {
      title: "Particle Auth app",
      description: "App leveraging Particle Auth for social logins.",
    };

    export default function RootLayout({
      children,
    }: Readonly<{
      children: React.ReactNode;
    }>) {
      return (
        <html lang="en">
          <body className={inter.className}>
            <ParticleAuthkit>{children}</ParticleAuthkit>
          </body>
        </html>
      );
    }

    ```
  </Step>

  <Step title="Facilitating logins">
    With the SDK configured, you can move on to initiating social logins within your application. Particle Auth contains [numerous relevant hooks](https://github.com/Particle-Network/particle-auth-ethers-demo/blob/7cf947b6c8a05731f285821b03134a6317e0e53f/particle-next-starter/src/app/page.tsx#L23), although we'll specifically be focusing on `useConnect`, which contains a function, `connect`, that directly facilitates [wallet creation]() through social login.

    Upon logging in, the embedded wallet modal included with Particle Auth will be accessible through the button in the bottom right, unless otherwise specified through `wallet` within `AuthCoreContextProvider`.

    ```tsx page.tsx theme={null}
    "use client";

    import { useConnect, useEthereum } from "@particle-network/authkit";

    export default function Home() {
      const { connect, disconnect, connected, connectionStatus } = useConnect();
      const { address } = useEthereum();

      // Handle user login
      const handleLogin = async () => {
        if (!connected) {
          await connect({});
        }
      };

      // Handle user logout
      const handleDisconnect = async () => {
        if (connected) {
          await disconnect();
        }
      };

      return (
        <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 p-24">
          <h1 className="text-4xl font-extrabold text-white mb-8">
            Build with Particle Auth
          </h1>
          <h2 className="mb-4 text-lg font-bold text-white">
            Account status: {connectionStatus}
          </h2>
          {!connected ? (
            <div className="login-section">
              <button
                className="bg-purple-600 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"
                onClick={handleLogin}
              >
                Sign in with Particle
              </button>
            </div>
          ) : (
            <div className="text-center">
              <h2 className="mb-4 text-lg font-bold text-white">
                Address: {address}
              </h2>
              <button
                className="bg-purple-600 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"
                onClick={handleDisconnect}
              >
                Logout
              </button>
            </div>
          )}
        </main>
      );
    }

    ```

    <Tip>
      For the complete Particle Auth SDK reference, head over to the\
      <a href="/social-logins/auth/desktop-sdks/web">Web (JavaScript/TypeScript) documentation</a>.
      For practical examples, check out the following demo repositories:

      <ul>
        <li>
          Next.js: <a href="https://github.com/Particle-Network/particle-auth-ethers-demo/tree/main/particle-next-starter">Particle Auth Next Starter</a>
        </li>

        <li>
          Create React App: <a href="https://github.com/Particle-Network/particle-auth-ethers-demo/tree/main/particle-auth-cra">Particle Auth CRA Starter</a>
        </li>
      </ul>
    </Tip>
  </Step>
</Steps>

### Related Resources

<CardGroup>
  <Card title="Customization" href="/social-logins/configuration/appearance/auth">
    Customizing Particle Auth.
  </Card>

  <Card title="Supported Blockchains" href="/social-logins/network-coverage">
    List of blockchains supported by Particle Auth.
  </Card>

  <Card title="Account Abstraction" href="/aa/sdks/desktop/web">
    Using Particle Auth to create smart accounts.
  </Card>
</CardGroup>


# Customizing Login Modal
Source: https://developers.particle.network/social-logins/configuration/appearance/auth

Customizing the appearance of Particle's login modal.

**Particle Network** places a strong emphasis on **deep customization and application-specificity**. Whether it’s logos, colors, or border sharpness, virtually every aspect of Particle's native login interface can be tailored programmatically using **Particle ConnectKit** or **Particle AuthKit**. This guide will explore the various methods available for customizing these modals to meet your specific needs.

***

## Particle Connect Customization

[**Particle Connect**](/social-logins/connect/quickstart/web-quickstart) is the suggested SDK for driving generalized onboarding, supporting both social logins and standard wallet connection through a single interface. Importantly, it allows deep programmatic visual customization when initializing the SDK with `createConfig` in the `ConnectKitProvider` component.

<Frame>
  <img alt="Customizing the Particle Connect interface." />
</Frame>

Customization at a higher level is straightforward, with options such as setting **light** or **dark** mode via the `mode` parameter within `createConfig`, selecting the interface language using `language`, or specifying a custom logo through `logo`, among others.

For more granular control, deeper customization is available through the `theme` parameter, part of the `appearance` object in `createConfig`.

The `theme` object accepts the following options:

```ts theme={null}
// Font settings
'--pcm-font-family'?: string; 

// Focus and action colors
'--pcm-focus-color'?: string; 
'--pcm-body-action-color'?: string; 
'--pcm-accent-color'?: string; 

// Modal appearance
'--pcm-overlay-background'?: string; 
'--pcm-overlay-backdrop-filter'?: string; 
'--pcm-modal-box-shadow'?: string; 

// Border radius settings
'--pcm-rounded-sm'?: Unit; 
'--pcm-rounded-md'?: Unit; 
'--pcm-rounded-lg'?: Unit; 
'--pcm-rounded-xl'?: Unit; 
'--pcm-rounded-full'?: Unit; 

// Background colors
'--pcm-body-background'?: string; 
'--pcm-body-background-secondary'?: string; 
'--pcm-body-background-tertiary'?: string;
 
// Foreground (Text) colors
'--pcm-body-color'?: string;
'--pcm-body-color-secondary'?: string; 
'--pcm-body-color-tertiary'?: string; 

// Button appearance
'--pcm-button-border-color'?: string; 
'--pcm-button-font-weight'?: string; 
'--pcm-button-hover-shadow'?: string; 

// Primary Button
'--pcm-primary-button-color'?: string;
'--pcm-primary-button-background'?: string;
'--pcm-primary-button-hover-background'?: string;

// Secondary Button
'--pcm-secondary-button-color'?: string; 
'--pcm-secondary-button-background'?: string; 
'--pcm-secondary-button-hover-background'?: string; 

// Status Colors
'--pcm-error-color'?: HexColor; 
'--pcm-success-color'?: HexColor; 
'--pcm-warning-color'?: HexColor; 

// Wallet Label
'--pcm-wallet-label-color'?: HexColor;
```

Each of these options allows you to customize the appearance of the **authentication modal**, **wallet modal**, and **transaction popups**.

The following example demonstrates how to apply a green hacker theme to **Particle Connect**:

```tsx ConnectKit.tsx theme={null}
const config = createConfig({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  appId: process.env.NEXT_PUBLIC_APP_ID!,
  appearance: {
    theme: {
      // Modal
      "--pcm-overlay-background": "rgba(0, 0, 0, 0.85)", // Dark, near-black overlay
      "--pcm-overlay-backdrop-filter": "blur(8px)", // Slightly more intense blur
      "--pcm-modal-box-shadow": "0px 0px 12px rgba(0, 255, 0, 0.5)", // Green glowing shadow for a hacker vibe

      // Background
      "--pcm-body-background": "#001f00", // Dark greenish-black background
      "--pcm-body-background-secondary": "#002800", // Slightly lighter dark green
      "--pcm-body-background-tertiary": "#003300", // Another variation of dark green

      // Foreground
      "--pcm-body-color": "#00ff00", // Bright green text
      "--pcm-body-color-secondary": "#00cc00", // Slightly darker green text
      "--pcm-body-color-tertiary": "#009900", // Even darker green text

      "--pcm-body-action-color": "#00ff00", // Bright green action color
      "--pcm-accent-color": "#00ff00", // Bright green accent color
      "--pcm-focus-color": "#00ff00", // Bright green focus color

      // Button
      "--pcm-button-font-weight": "500",
      "--pcm-button-hover-shadow": "0px 0px 8px rgba(0, 255, 0, 0.5)", // Green glowing shadow on hover
      "--pcm-button-border-color": "#00ff00", // Bright green border for buttons

      // Primary Button
      "--pcm-primary-button-color": "#000000", // Black text on buttons (to contrast bright background)
      "--pcm-primary-button-bankground": "#00ff00", // Bright green background for primary buttons
      "--pcm-primary-button-hover-background": "#00cc00", // Slightly darker green on hover

      // Font
      "--pcm-font-family": `monospace, 'Courier New', Courier, 'Segoe UI', Helvetica, Arial, sans-serif`, // Monospace font for a hacker style

      // Radius
      "--pcm-rounded-sm": "6px", // Keep the original rounded values
      "--pcm-rounded-md": "12px",
      "--pcm-rounded-lg": "18px",
      "--pcm-rounded-xl": "24px",
      "--pcm-rounded-full": "9999px",

      "--pcm-success-color": "#00ff00", // Bright green for success
      "--pcm-warning-color": "#ffcc00", // Yellow for warning
      "--pcm-error-color": "#ff0000", // Red for error

      "--pcm-wallet-lable-color": "#00ff00", // Bright green label color for wallets
    },

    // The rest of the component
```

<Frame>
  <img />

  <img />
</Frame>

<Tip>For a full guide on configuring Particle Connect, head over to the [quickstart guide](/social-logins/connect/quickstart/web-quickstart).</Tip>

### Customizing the `ConnectButton` Text

**Particle Connect** enables you to customize the text displayed on the `ConnectButton` component used for user login.

To modify the text, add the `label` **prop** to the `ConnectButton` component:

```tsx theme={null}
<ConnectButton label="Click to Login" />
```

## Particle AuthKit Customization

As an alternative to Particle Connect, Particle Auth (`@particle-network/authkit`) offers a dedicated modal containing exclusively social logins. The most common way to customize this interface is through programmatic style definitions, which can be applied during SDK initialization through the `AuthCoreContextProvider` component, as will be demonstrated below.

You can achieve high-level customization by adjusting parameters such as `themeType` for light or dark mode within `AuthCoreContextProvider`, `language` to set the language of the modal, and `fiatCoin` to choose the fiat currency display.

For more advanced customization, the `customStyle` parameter in the `options` object of `AuthCoreContextProvider` offers deeper control. The `customStyle` parameter accepts the following options:

```javascript customStyle theme={null}
logo?: string;
projectName?: string;
subtitle?: string;
modalWidth?: number;
modalHeight?: number;
zIndex?: number;
primaryBtnBorderRadius?: number | string;
modalBorderRadius?: number | string;
cardBorderRadius?: number | string;
fontFamily?: string;
theme?: {
    dark?: ThemeStyle;
    light?: ThemeStyle;
};
```

The `ThemeStyle` object allows you to customize the appearance of the **authentication modal** and **transaction popups**. It provides options for defining various visual elements, including colors, backgrounds, borders, and more.

The `ThemeStyle` object accepts the following properties:

```ts ThemeStyle theme={null}
primaryBtnColor?: string;
primaryBtnBackgroundColor?: string;
secondaryBtnColor?: string;
secondaryBtnBackgroundColor?: string;
textColor?: string;
secondaryTextColor?: string;
themeBackgroundColor?: string;
iconBorderColor?: string;
accentColor?: string;
inputBackgroundColor?: string;
inputBorderColor?: string;
inputPlaceholderColor?: string;
cardBorderColor?: string;
cardUnclickableBackgroundColor?: string;
cardUnclickableBorderColor?: string;
cardDividerColor?: string;
tagBackgroundColor?: string;
modalBackgroundColor?: string;
tipsBackgroundColor?: string;
```

The following example demonstrates how to implement a green hacker theme for the **Particle Auth** login modal:

```tsx theme={null}
    <AuthCoreContextProvider
      options={{ 
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
        clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
        appId: process.env.NEXT_PUBLIC_APP_ID!,

        customStyle: {
          theme: {
            dark: {
              primaryBtnColor: "#000000", // Black text on primary buttons
              primaryBtnBackgroundColor: "#00ff00", // Bright green background for primary buttons
              secondaryBtnColor: "#00ff00", // Bright green text on secondary buttons
              secondaryBtnBackgroundColor: "#001f00", // Dark greenish-black background for secondary buttons
              textColor: "#00ff00", // Bright green text
              secondaryTextColor: "#00cc00", // Slightly darker green text
              themeBackgroundColor: "#001f00", // Dark greenish-black overall background
              iconBorderColor: "#00ff00", // Bright green border for icons
              accentColor: "#00ff00", // Bright green accents
              inputBackgroundColor: "#002800", // Slightly lighter dark green for inputs
              inputBorderColor: "#00ff00", // Bright green border for inputs
              inputPlaceholderColor: "#00cc00", // Slightly darker green for placeholder text
              cardBorderColor: "#00ff00", // Bright green border for cards
              cardUnclickableBackgroundColor: "#003300", // Darker green for unclickable cards
              cardUnclickableBorderColor: "#00cc00", // Slightly darker green border for unclickable cards
              cardDividerColor: "#00ff00", // Bright green for card dividers
              tagBackgroundColor: "#00ff00", // Bright green background for tags
              modalBackgroundColor: "#001f00", // Dark greenish-black background for modals
              tipsBackgroundColor: "#002800", // Slightly lighter dark green for tips background
            },
          },
        },

        // Rest of the component 
```

<Frame>
  <img />

  <img />
</Frame>

<Tip>For a full guide on configuring Particle Auth, head over to the [quickstart guide](/social-logins/auth/quickstart/web-quickstart).</Tip>


# Customizing Wallet Modal
Source: https://developers.particle.network/social-logins/configuration/appearance/wallet

Customizing the appearance of the Particle Wallet modal.

In addition to complete customization of Particle Auth (specifically the authentication and transaction confirmation menus), **Particle Wallet can also be deeply customized**. Particle Wallet acts as the **primary **(yet optional)** interface for users to interact with the wallet generated by Particle Auth**. While not all applications use Particle Wallet as a direct mechanism of wallet management, it's a solid option given the aforementioned customization potential, thus making the wallet modal feel specific to your application and project. This document will dive into the programmatic customization of Particle Wallet.

***

## Programmatic Customization

Particle Wallet can only currently be customized through strictly set parameters, either within the path of [https://wallet.particle.network](https://wallet.particle.network), or within the configuration of Particle Authkit or Particle Auth Core (which would translate to the in-UI modal rather than a redirect such as is the case with [https://wallet.particle.network](https://wallet.particle.network)).

`customStyle` takes the following parameters, all of which impact the appearance of the wallet modal:

```javascript JavaScript theme={null}
supportChains?: Chain[];
supportAddToken?: boolean;
displayTokenAddresses?: string[];
displayNFTContractAddresses?: string[];
priorityTokenAddresses?: string[];
priorityNFTContractAddresses?: string[];
fiatCoin?: CurrencyUnit;
evmSupportWalletConnect?: boolean;
supportUIModeSwitch?: boolean;
supportLanguageSwitch?: boolean;
light?: ModeStyle; // Profile 1, light mode
dark?: ModeStyle; // Profile 2, dark mode
```

The `ModeStyle` object provides a flexible way to customize the look and feel of the wallet modal and transaction popups. You can tailor the interface to match your brand by adjusting the following properties:

```ts theme={null}
colorAccent?: string;
colorPrimary?: string;
colorOnPrimary?: string;
primaryButtonBackgroundColors?: [string, string];
primaryIconButtonBackgroundColors?: [string, string];
primaryIconTextColor?: string;
primaryButtonTextColor?: string;
cancelButtonBackgroundColor?: string;
backgroundColors?: [string, [[string, string], [string, string]]];
messageColors?: string[];
borderGlowColors?: string[];
modalMaskBackgroundColor?: string;
cardBorderRadius?: number;
```

### Particle Connect

To customize the wallet modal in Particle Connect, you need to include the `customStyle` object within the `plugins` array in the `ConnectKitProvider` configuration.

```tsx ConnectKit.tsx theme={null}
plugins: [
    wallet({
      entryPosition: EntryPosition.TR,
      visible: true,
      themeType: "dark",
      customStyle: {
        themeType: {
          dark: {
            colorAccent: "#7DD5F9",
            colorPrimary: "#21213a",
            colorOnPrimary: "#171728",
            primaryButtonBackgroundColors: ["#5ED7FF", "#E89DE7"],
            primaryIconButtonBackgroundColors: ["#5ED7FF", "#E89DE7"],
            primaryIconTextColor: "#FFFFFF",
            primaryButtonTextColor: "#0A1161",
            cancelButtonBackgroundColor: "#666666",
            backgroundColors: [
              "#14152e",
              [
                ["#e6b1f766", "#e6b1f700"],
                ["#7dd5f94d", "#7dd5f900"],
              ],
            ],
            messageColors: ["#7DD5F9", "#ed5d51"],
            borderGlowColors: ["#7bd5f940", "#323233"],
            modalMaskBackgroundColor: "#141430b3",
          },
        },
      },
    })
  ],
```

### Particle Authkit

Customizing Particle Wallet through configuration within Particle Authkit can be done within the initialization of `AuthCoreContextProvider` from `@particle-network/authkit`. Within this component, you'll need to head into the `customStyle` object within the `wallet` parameter on `options`.

With this in mind, take a look at the below example for further insight into what a complete utilization of most of the above parameters looks like (example of a configuration for `customStyle`):

```javascript JavaScript theme={null}
customStyle: {
  supportAddToken: true,
  supportChains: [
    { id: 1, name: "Ethereum" },
    { id: 5, name: "Ethereum" },
    { id: 56, name: "BSC" },
    { id: 97, name: "BSC" }
  ],
  evmSupportWalletConnect: true,
  supportUIModeSwitch: false,
  supportLanguageSwitch: false,
  priorityTokenAddresses: [""],
  priorityNFTContractAddresses: [""],
  light: {
    colorAccent: "#F23892",
    colorPrimary: "#ffffff",
    colorOnPrimary: "#ffffff",
    primaryButtonBackgroundColors: ["#F23892", "#F23892"],
    primaryButtonTextColor: "#ffffff",
    primaryIconButtonBackgroundColors: ["#dfe9fd", "#dfe9fd"],
    primaryIconTextColor: "#F23892",
    cancelButtonBackgroundColor: "#666666",
    backgroundColors: ["#e5e5e5", [["#ffffff00", "#ffffff00"], ["#ffffff00", "#ffffff00"]]],
    messageColors: ["#7DD5F9", "#ed5d51"],
    borderGlowColors: ["#7bd5f940", "#323233"],
    modalMaskBackgroundColor: "#141430b3"
  },
  dark: {
    colorAccent: "#7DD5F9",
    colorPrimary: "#21213a",
    colorOnPrimary: "#171728",
    primaryButtonBackgroundColors: ["#5ED7FF", "#E89DE7"],
    primaryIconButtonBackgroundColors: ["#5ED7FF", "#E89DE7"],
    primaryIconTextColor: "#FFFFFF",
    primaryButtonTextColor: "#0A1161",
    cancelButtonBackgroundColor: "#666666",
    backgroundColors: ["#14152e", [["#e6b1f766", "#e6b1f700"], ["#7dd5f94d", "#7dd5f900"]]],
    messageColors: ["#7DD5F9", "#ed5d51"],
    borderGlowColors: ["#7bd5f940", "#323233"],
    modalMaskBackgroundColor: "#141430b3"
  }
};
```

<div>
  <img alt="Wallet custom style" />

  <img alt="Wallet custom style" />
</div>

This specific custom style above translates into a highly customized version of the wallet model, with gradients, major color changes, and feature removals, as shown in the following image.

<Tip>Try out an [interactive demo showcasing custom styles](https://web-demo.particle.network).</Tip>

## Customizing the Wallet Entry Point

Additionaly, you can tailor the location in which the embedded wallet interface will open; in doing so, you can create a custom **Open Wallet** button or merely alter the position of the default Particle Network button.

<Note>Find a full Next.js demo in the [Customizing Wallet Position repository](https://github.com/Particle-Network/custom-wallet-entry).</Note>

### Option 1: Alternative Position for Default Button

If you prefer to keep the default button responsible for opening the embedded wallet (circular button with the Particle Network logo, in the bottom right corner by default), you have the option of altering where on the page it'll sit.

To do this, you'll need to alter the `wallet` property of `AuthCoreContextProvider` (from [Particle Auth](/social-logins/auth/quickstart/web-quickstart)) and designate a position through `entryPosition`, which takes `EntryPosition` from `@particle-network/wallet`.

You have the choice between opening the wallet in the bottom right (`EntryPosition.BR`), bottom left (`EntryPosition.BL`), top right (`EntryPosition.TR`), or top left (`EntryPosition.TL`).

```javascript theme={null}
import { AuthCoreContextProvider } from "@particle-network/authkit";
import { EntryPosition } from "@particle-network/wallet";

export const ParticleAuthkit = ({ children }: React.PropsWithChildren) => {
  return (
    <AuthCoreContextProvider
      options={{
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID as string,
        clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY as string,
        appId: process.env.NEXT_PUBLIC_APP_ID as string,

        wallet: {
          visible: true,
          entryPosition: EntryPosition.TL,
          
        },
      }}
    >
      {children}
    </AuthCoreContextProvider>
  );
};

```

### Option 2: Custom Wallet Entry Point with openWallet()

The `openWallet()` method imported from `useAuthCore()` triggers the opening of the wallet modal, independent from the default button referenced above.

You can create your own custom wallet entry, such as a button labeled **Open Wallet**. When clicked, this button will trigger the modal using the `openWallet()` method.

<Note>Set the `visible` property to `false` in `AuthCoreContextProvider` if you want to hide the default **Particle Button**.</Note>

```jsx theme={null}
const { openWallet } = useAuthCore();

// Open the wallet modal from a custom button
const toggleParticleWallet = async () => {
    openWallet({
        windowSize: 'small',
        topMenuType: 'close',
    });
};
```


# Silent Authentication & Sign
Source: https://developers.particle.network/social-logins/configuration/auth/headless



For comprehensive security reasons, we do not support Headless mode for the built-in login system of Particle Auth. However, if a project uses its own login system and links to Particle Auth using JWT, it can operate entirely without UI, meaning users will not see the login and signature authorization pages provided by Particle. The master password and payment password functions we provide need to be configured to show no prompts (this is explained in the SDK documentation for different platforms).

It is important to note that even if all prompts are disabled, if the user has set them up before, our pages will still be involved.


# Custom Authentication (JWT)
Source: https://developers.particle.network/social-logins/configuration/auth/jwt

Customizing your JWT settings to integrate an existing user base.

### Introduction

**JSON Web Tokens (JWTs)** are a compact and self-contained way for securely transmitting information between parties as a JSON object.  Within **Particle Network**, JWT custom authentication allows you to integrate Particle Auth with your existing user base and authentication methods. By leveraging JWTs, you can seamlessly enable users to log in using their current accounts while maintaining the security and efficiency of the authentication process.

Particle Network's [Dashboard](/social-logins/dashboard) allows developers to configure custom JWT settings to seamlessly integrate their existing user base or authentication methods, such as a custom OAuth provider.

In this tutorial, you will learn how to:

* Build a basic server to handle JWT operations, including:
  * Serving public keys in JWK format
  * Generate a sample JWT with a static payload.
  * Verifying a username against a predetermined value and generate a JWT if the username is valid.
  * Decode and verify a JWT.
* Integrate JWT authentication in your dApp using Particle Auth.

<Tip>💡 You can find the repository with the complete project and instructions on GitHub: [Particle Auth JWT demo](https://github.com/soos3d/jwt-demo-particle-auth).</Tip>

### What are JSON Web Tokens?

JWTs are compact, URL-safe means of representing claims between two parties. Think of them as digital passports for your users, containing encrypted information about their identity and permissions. These tokens are self-contained, making them ideal for stateless authentication in web applications.

### Structure of a JWT

A JSON Web Token (JWT) comprises three main parts: a **header**, a **payload**, and a **signature**. These segments are Base64Url-encoded and concatenated with periods (.) to form the complete JWT.

### Header

The header is a JSON object that usually contains two fields: a token type (commonly JWT) and a signing algorithm (e.g., RS256 for RSA SHA-256). As such, it provides details about how the JWT is encoded and secured.

Example of a header:

```tsx theme={null}
{
    "alg": "RS256",
    "typ": "JWT"
}
```

### Payload

The payload is a JSON object containing claims and information about the user and other relevant data. Claims are key-value pairs and can be registered, public, or private. Registered claims are predefined by the JWT specification (e.g., **iss** for issuer and \*\*exp \*\*for expiration time), while the developer can define public and private claims.

Common keys within JWT claims include:

* **iss (Issuer)** — identifies the entity that issued the JWT. For instance, particle-network.
* **sub (Subject)** — identifies the user the token is for by storing the user's unique identifier.
* **aud (Audience)** — specifies the recipients allowed to process the token.
* **exp (Expiration Time)** — defines when the token expires, in seconds since the Unix epoch.
* **nbf (Not Before)** — defines the earliest time the token can be considered valid, in seconds since the Unix epoch.
* **iat (Issued At)** — indicates when the token was issued in seconds since the Unix epoch.

<aside>
  💡 For a full list of JWT claims, check out the [JSON Web Token Claims](https://tools.ietf.org/html/rfc7519#section-4) page from the Internet Assigned Numbers Authority.
</aside>

Example of a payload:

```tsx theme={null}
{
    "iss": "particle-network",
    "sub": "user-number-5",
    "aud": "www.mydapp.com",
    "iat": 1616239022
}
```

### Signature

The signature is a cryptographic hash created using the encoded header, payload, and a secret key. It ensures the token's integrity and authenticity.

The encoded header and payload are concatenated with a period (.) and then hashed with the secret key, using a specified algorithm to generate the signature.

Example of signature creation with RSA SHA-256:

```
RSASHA256(
    base64UrlEncode(header) + "." +
    base64UrlEncode(payload),
    private_key
)
```

This approach ensures that the JWT has not been tampered with and can be trusted as authentic.

The final JWT token is a combination of the encoded header, payload, and signature, separated by periods (.), as shown below:

```tsx theme={null}
<encoded_header>.<encoded_payload>.<signature>
```

Example of a real JWT:

```tsx theme={null}
eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyLW51bWJlci0yMCIsImlzcyI6Im15LXNlcnZpY2UtbmV3IiwiYXVkIjoibXlhcHBuZXcuY29tIiwiaWF0IjoxNjI4MjM5MDIyfQ.HMEk6j5RA-4TCJQtx8aLMAMlm9bWyG4Vi0m2d3Vkl5k
```

## Custom Authentication via JWT

This guide will demonstrate how to integrate JWT authentication with Particle Auth, allowing you to seamlessly incorporate your existing user base or custom authentication system into your dApp.

In the following [repository](https://github.com/Particle-Network/jwt-demo-particle-auth), you will find two directories: one containing code for a JWT server, and the other containing a frontend project built with Next.js.

### General JWT Authentication Flow

To understand how JWTs are typically used for authentication, let's consider the following flow:

1. **User Information Storage**: You have a database that holds a user's information, including a unique user ID, username, password for authentication, and other data relevant to your application.
2. **User Login**: When the user logs in from the front end using their username and password, the front end sends these credentials to the server for verification.
3. **JWT Generation**: If the user's credentials are correct, the server generates a JWT that includes their unique ID and possibly other claims.
4. **JWT Storage**: The JWT is sent back to the front end, where it is stored (typically in local storage or cookies) and used for subsequent authenticated requests.
5. **JWT Validation**: For each request from the front end, the server validates the JWT to ensure it is still valid and has not been tampered with. Particle Auth can validate the JWT by accessing the server’s endpoint serving the public key.
6. **Public Key Endpoint**: If using asymmetric keys (RSA), the server provides an endpoint for retrieving the public key to verify the JWT's signature.

### Demo Project’s Flow

To keep things simpler here, our demo project follows a basic flow:

* **User Information Storage**: In this example, a single user is created within the JWT server to simulate a database entry. Only a username is needed for authentication.
* **User Login**: When a user logs in from the front end using their username, the front end sends a request to the server to verify the user's identity.
* **JWT Generation**: If the username matches the “database,” the server takes their unique ID and uses it to generate and issue a new valid JWT.
* **JWT Validation**: The front end receives the JWT from the server, and Particle Auth validates it by accessing the server’s endpoint that serves public keys.
* **JWT Decoding**: As a bonus, the front end calls the server again to decode the JWT and extract information to display to the user.

The following section will review how the server handles JWTs operations and how to set it up.

### The JWT Server

The JWT server implementation in the [`jwt-server`](https://github.com/soos3d/jwt-demo-particle-auth/tree/main/jwt-server) directory is built using Node.js and the Express framework. It manages key generation, JWT issuance, and verification, serving as an example of a server that handles user authentication in a dApp.

<Tip>Note that this is a basic implementation for demonstration purposes and should not be used in a production environment.</Tip>

## Code Breakdown

### Dependencies and Setup

```jsx theme={null}
const express = require('express');
const cors = require('cors');
const { generateKeyPair, exportJWK, exportPKCS8, exportSPKI, importPKCS8, importSPKI, SignJWT, jwtVerify } = require('jose');
const fs = require('fs').promises;

const app = express();
const PORT = 4000;

let PRIVATE_KEY, PUBLIC_KEY, PUBLIC_JWK;

// Where public and private keys are saved
const PRIVATE_KEY_PATH = './private_key.pem';
const PUBLIC_KEY_PATH = './public_key.pem';

// Simulate a user in a DB
const PREDETERMINED_USERNAME = 'David';
const PREDETERMINED_USER_ID = '1234567891';

// Enable CORS for all routes
app.use(cors());
```

* **Dependencies**: The server uses Express for handling HTTP requests, `cors` for enabling Cross-Origin Resource Sharing, and `jose` for JWT handling and key management.
* **App Setup**: Sets up the Express app, defines constants for key paths and a predetermined user, and enables CORS.

### Key Initialization

```jsx theme={null}
async function initializeKeys() {
  try {
    console.log('Checking for existing keys...');
    // Attempt to read existing keys from files
    const privateKeyPem = await fs.readFile(PRIVATE_KEY_PATH, 'utf8');
    const publicKeyPem = await fs.readFile(PUBLIC_KEY_PATH, 'utf8');
    // Import the keys in PEM format
    PRIVATE_KEY = await importPKCS8(privateKeyPem, 'RS256');
    PUBLIC_KEY = await importSPKI(publicKeyPem, 'RS256');
    // Export the public key as a JWK (JSON Web Key)
    PUBLIC_JWK = await exportJWK(PUBLIC_KEY);
    PUBLIC_JWK.kid = '1'; // Key ID
    PUBLIC_JWK.use = 'sig'; // Usage is for signing
    console.log('Existing keys found and loaded.');
  } catch (error) {
    console.log('Existing keys not found. Generating new keys...');
    // Generate new RSA key pair
    const { publicKey, privateKey } = await generateKeyPair('RS256');
    PRIVATE_KEY = privateKey;
    PUBLIC_KEY = publicKey;
    PUBLIC_JWK = await exportJWK(publicKey);
    PUBLIC_JWK.kid = '1'; // Key ID
    PUBLIC_JWK.use = 'sig'; // Usage is for signing

    // Export keys to PEM format and save to files
    const privateKeyPem = await exportPKCS8(PRIVATE_KEY);
    const publicKeyPem = await exportSPKI(PUBLIC_KEY);

    await fs.writeFile(PRIVATE_KEY_PATH, privateKeyPem);
    await fs.writeFile(PUBLIC_KEY_PATH, publicKeyPem);
    console.log('New keys generated and saved.');
  }
}

```

* **Key Initialization**: When the server starts, it checks for existing keys on the filesystem. If keys are found, they are loaded and converted to the necessary formats. If not, new keys are generated, saved, and loaded.

### Starting the Server and Setting Up Routes

```jsx theme={null}

async function startServer() {
  await initializeKeys();
  app.use(express.json());

  app.post('/token', async (req, res) => {
    // Generates a JWT with a static payload and sends it to the client
  });

  app.get('/.well-known/jwks.json', (req, res) => {
    // Serves the public key in JWKS format for client-side verification
  });

  app.post('/login', async (req, res) => {
    // Verifies the username and generates a JWT if the username is valid
  });

  app.post('/decode', async (req, res) => {
    // Decodes and verifies a JWT token sent by the client
  });

  app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
  });
}

startServer();

```

* **startServer**: Initializes the keys, sets up the necessary middleware, and starts the Express server.
  * **/token**: Generates and returns a JWT with a static payload; this can be used to test the process.
  * **/.well-known/jwks.json**: Provides the public key in JWKS format for verification.
  * **/login**: Validates the username and issues a JWT if the username is correct.
  * **/decode**: Decodes and verifies a JWT provided by the client.

#### Run the server

Now that you have a good understanding of how the server works, let’s get it up and running.

* Clone the repository:

```sh Terminal theme={null}
git clone https://github.com/Particle-Network/jwt-demo-particle-auth.git
```

* Move into the `jwt-server` directory:

```sh Terminal theme={null}
cd jwt-server
```

* Install server’s dependencies

```sh Terminal theme={null}
npm ci
```

* Run the server

```sh Terminal theme={null}
node index
```

The server is now running on `http://localhost:4000`. It needs to be accessible from the Internet since Particle Auth will need to call the `/.well-known/jwks.json` endpoint to validate the JWT. Make sure to deploy this server on a platform like [Digital Ocean](https://cloud.digitalocean.com/projects/default?i=0002ad) or use [Ngrok](https://ngrok.com/docs/getting-started/) to expose the server when running locally.

## Integrating JWT Auth with Particle Auth

With the server set up, you can integrate it with Particle Auth. You can find the full implementation in Next.js within the [particle-auth-frontend](https://github.com/soos3d/jwt-demo-particle-auth/tree/main/particle-auth-frontend) directory. Here, we’ll cover the main steps to handle the JWT flow.

### Setting up a Dashboard

* The first step is configuring JWT custom authentication in the [Particle Dashboard](https://dashboard.particle.network/). Create a new project and application, then navigate to the **Custom** section on the side menu.

<Tip>Follow the steps outlined in the [Web Quickstart](/social-logins/auth/quickstart/web-quickstart) to create a new project and retrieve the necessary API keys.</Tip>

Click on the **JSON Web Token** button and add the necessary configuration.

<div>
  <img alt="Wallet custom style" />

  <img alt="Wallet custom style" />
</div>

* **JWKS URI**: This is the endpoint in your server serving the public keys, in this case, `/.well-known/jwks.json`. Ensure your server is exposed to the Internet.
* **Unique ID Key**: This key identifies the user. Set it to `sub`, which represents the unique user ID.
* **Validation Rules**: These are optional. Here, it’s configured it to include the JWT issuer to ensure the JWT comes from the correct source.
* **JWT to Verify** (validation test): Add a valid JWT to validate and verify that everything is working correctly.

### Configure Particle Auth

Now, you can move into the `particle-auth-frontend` directory to work on the front end.

Before getting started, retrieve the API keys generated during the creation of your project and app and place them in a  `.env` file within the `particle-auth-frontend` directory file using the following keys:

```sh .env theme={null}
NEXT_PUBLIC_PROJECT_ID=""
NEXT_PUBLIC_CLIENT_KEY=""
NEXT_PUBLIC_APP_ID=""
```

To configure Particle Auth for JWT, you'll use the `AuthCoreContextProvider` component in `layout.tsx`. This component initializes Particle Auth.

```tsx src/app/layout.tsx theme={null}
        <AuthCoreContextProvider
          options={{
            // All env variable must be defined at runtime
            projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
            clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
            appId: process.env.NEXT_PUBLIC_APP_ID!,
            themeType: "dark",
            wallet: {
              // Set to false to remove the embedded wallet modal
              visible: true,
              customStyle: {
                // Locks the chain selector to Base Sepolia and Ethereum Sepolia
                supportChains: [BaseSepolia, EthereumSepolia],
              },
            },
          }}
        >
          {children}
        </AuthCoreContextProvider>
```

To handle the login request and extract data from the JWT, create two support functions in `src/app/utils/jwtUtils.ts`.

```tsx src/app/utils/jwtUtils.ts theme={null}
/**
 * Makes a login request to the server with the provided username.
 * @param {string} username - The username to login with.
 * @returns {Promise<string|null>} - Returns the JWT token if login is successful, otherwise null.
 * @throws {Error} - Throws an error if the login request fails.
 */
export const loginRequest = async (username: string): Promise<string | null> => {
  const response = await fetch("http://localhost:4000/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username }),
  });

  if (!response.ok) {
    if (response.status === 401) {
      alert("User does not exist.");
      return null;
    } else {
      throw new Error(`Login failed: ${response.statusText}`);
    }
  }

  const data = await response.json();
  return data.token;
};

/**
 * Decodes and verifies a JWT token.
 * @param {string} token - The JWT token to decode.
 * @returns {Promise<Object>} - Returns the decoded payload if the token is valid.
 * @throws {Error} - Throws an error if the token decoding fails.
 */
export const decodeJWT = async (token: string): Promise<any> => {
  const response = await fetch("http://localhost:4000/decode", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ token }),
  });

  if (!response.ok) {
    throw new Error(`Decode failed: ${response.statusText}`);
  }

  const data = await response.json();
  return data.payload;
};

```

### Integrating JWT Handling within your dApp's UI

After the above, you can integrate integrate the login and JWT handling functionality with your dApp's UI. These are contained in `page.tsx`, which includes an input field for the username and a login button to trigger login logic.

```tsx src/app/page.tsx theme={null}
  // Handle user login
  const handleLogin = async () => {
    try {
      const token = await loginRequest(username);

      if (token) {
        // Use the returned JWT to connect with Particle Auth
        if (!userInfo) {
          await connect({
            jwt: token,
          });
        }

        const decodedData = await decodeJWT(token);
        setJwtData(decodedData);
      }
    } catch (error) {
      console.error("Error during login:", error);
      alert(`Error during login: ${(error as any).message}`);
    }
  };
```

The login workflow is as follows:

* A user enters their username and clicks the login button.
* The `handleLogin` function sends a login request to the server.
* If their username is valid, the server returns a JWT.
* The JWT is used to connect with Particle Auth.
* The JWT is decoded to extract user information, which is then displayed in the UI.

## Running the full application

Now, you can run and test your application. Make sure your server is running and configured in the Particle Dashboard, then follow the instructions below to run the front end :

After cloning the repository, move into the front end directory:

```tsx theme={null}
cd particle-auth-frontend
```

Install dependencies:

```tsx theme={null}
npm i
```

Run the front end:

```tsx theme={null}
npm run dev
```

## Using Production-Ready Services for JWT Authentication

While this tutorial provides a foundational understanding of JWT authentication with a custom server, it's recommended that robust authentication services be used for production environments. Services like Auth0, Firebase Authentication, and AWS Cognito are good options to consider.

### Auth0

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. With Auth0, you can quickly set up a secure JWT authentication system.

### Firebase Authentication

Firebase Authentication provides backend services to help authenticate users in your app. It supports various authentication methods, including email/password and social logins.

### AWS Cognito

AWS Cognito provides user sign-up, sign-in, and access control, allowing you to add user authentication to your web and mobile apps easily.

## Conclusion

By following this tutorial, you've learned how to integrate JSON Web Tokens (JWTs) effectively into your dApp using Particle Auth. JWTs provide a secure, stateless way to handle authentication, making them ideal for modern web applications.

You now also have a robust server that can generate, verify, and decode JWTs and a front end that can authenticate users with these tokens. This setup ensures that your authentication process is secure and scalable, allowing for seamless integration with your existing user base.

With Particle Auth, you can now leverage JWTs to enhance your dApp's security and user experience, providing a flexible and efficient authentication solution.


# Link Login Accounts
Source: https://developers.particle.network/social-logins/configuration/auth/link-accounts



For users created with Particle Auth, after logging in, they can bind other accounts. Once binding is complete, they can use these accounts to log in to the corresponding same user. Even users created with JWT login can bind other accounts, allowing them to continue using their wallet independently of the project application.

All of our SDKs provide a page for binding other login accounts, which can be called with a single click.

<Frame>
  <img alt="Link accounts" />
</Frame>


# Master Password & Payment Password
Source: https://developers.particle.network/social-logins/configuration/auth/password

Overview of the two types of passwords available in Particle social logins SDKs.

Within **Particle social logins SDKs**, users can set up two different passwords. Each serves a distinct purpose in securing accounts and authorizing actions.

***

## Master Password

* **Purpose:** Encrypts and backs up the user’s local MPC key share.
* **Ownership:** Known only to the user — Particle never stores it.
* **Recovery:** Cannot be reset or recovered if forgotten.
* **Usage:** Provides an additional encryption layer for secure wallet recovery across devices.

<Note>If the user forgets the Master Password, the encrypted key shard becomes inaccessible.</Note>

***

## Payment Password

* **Purpose:** Used as a second verification step before signing transactions.
* **Flexibility:** Can be disabled or reset by the user at any time.
* **Experience:** Adds a layer of security without affecting wallet recovery.

***

<Frame>
  <img alt="Master Password & Payment Password" />
</Frame>


# Login Session
Source: https://developers.particle.network/social-logins/configuration/auth/session-duration

Understanding login sessions on Particle Auth.

Generally, the local user state generated after a user logs in via **Particle Auth** does not expire; however, if a user logs into the same app configuration (determined by the application configured through the Particle [Dashboard](/social-logins/dashboard)) in two different places (e.g., logging in successively in two browsers), only the latter login state will be valid. For this situation, there are the following solutions:

1. Actively retrieve user information and handle the corresponding actions when a login expiration error occurs. (Different platforms have methods for retrieving user information, offering both synchronous and asynchronous options. Synchronous methods read from the local storage, while asynchronous methods fetch the latest information from the server.)
2. Enable multi-device login support for the app in the [Dashboard](/social-logins/dashboard), allowing the user to maintain a valid login state in multiple places simultaneously for the same app.

<Frame>
  <img alt="Multi-device login" />
</Frame>


# Set Social Authentication Prompt
Source: https://developers.particle.network/social-logins/configuration/auth/social-prompt

Customizing social login prompts for Google, Discord, and Microsoft accounts.

For some social platforms, specifically Google, Discord, and Microsoft, you can configure the timing of the consent page displayed to users during the login process. Generally, three options are provided:

1. `none`: Do not display any authentication or consent screens. Must not be specified with other values.
2. `consent`: Prompt the user for consent.
3. `select_account`: Prompt the user to select an account.

Our SDK does not pass this parameter by default, which corresponds to the `none` process above. After the user authorizes, they won’t need to choose next time; if you want the user to choose each time, you need to configure it to `select_account`. The configuration items for the SDK on different platforms are as follows:

1. Web

```typescript theme={null}
// connect with social type.

const userInfo = await connect({
  socialType: "google",
  prompt: "select_account", //optional, only google, discord and microsoft support it.
});
```

2. Android: `prompt` parameter

```kotlin theme={null}
AuthCore.connect(LoginType.GOOGLE, prompt = LoginPrompt.SelectAccount, loginCallback)
```

3. iOS: `socialLoginPrompt` parameter

```swift theme={null}
let userInfo = try await auth.connect(type: .google, socialLoginPrompt: .selectAccount) 
```

4. ReactNative: `socialLoginPrompt` parameter

```typeScript theme={null}
const userInfo = await particleAuthCore.connect(LoginType.Google, null, [], SocialLoginPrompt.SelectAccount);
```

5. Unity: `socialLoginPrompt` parameter

```csharp theme={null}
await ParticleAuthCore.Instance.Connect(LoginType.GOOGLE, null, [], SocialLoginPrompt.SelectAccount, null);
```

6. Flutter: `socialLoginPrompt` parameter

```dart theme={null}
final userInfo = ParticleAuthCore.connect(LoginType.google, prompt: SocialLoginPrompt.select_account);
```


# Misc & FAQ
Source: https://developers.particle.network/social-logins/configuration/misc



### Why does Google login prompt me that I do not comply with the policy?

Google does not allow usage within Webview. [https://support.google.com/accounts/answer/12917337?hl=en#zippy=%2Cdisallowed-useragent](https://support.google.com/accounts/answer/12917337?hl=en#zippy=%2Cdisallowed-useragent)

### How to add a new EVM chain?

For Particle Auth, we need to support it first before developers can use it.

### What are the options for chain\_name returned by the backend api?

`evm_chain` and `solana`; For Tron, we also use `evm_chain` as the chain\_name.

### How to ensure the signature result is consistent each time?

Due to the characteristics of MPC, the signature result for the same message is different each time, which is different from private key wallets like MetaMask. Therefore, for scenarios that rely on a consistent signature result, we provide the `uniq` parameter, which ensures the consistency of the signature result each time.

### How to determine if the account is a new user?

We have `isNewUser` in the user info returned.

### How to determine the status of the master password and payment password settings?

In the user info, we have `security_account.has_set_master_password` and `security_account.has_set_payment_password`.

### How to make the embedded wallet track my tokens?

You need to provide the token information to us, and we will manually add it.

### How to configure the name and icon of the embedded wallet?

You need to provide the name and icon to us, and we will manually add it.

### Why are the transaction records in the wallet incomplete?

Due to the large number of supported chains, many testnets do not provide detailed transaction records. However, for mainnets, we strive to provide support. If you find a chain that requires complete support, you can contact us, and we will evaluate whether to add it.

### Why is the token balance in the wallet not synchronized?

Sometimes, there may be indexing delays. If the delay is significant, contact us and we will locate and resolve the issue.


# Web (JavaScript/TypeScript) - Connect
Source: https://developers.particle.network/social-logins/connect/desktop/web

Leveraging Particle Connect within web applications.

## Particle Connect for Web

**Particle Connect** provides a single modal that supports both **social logins** and **Web3 wallets**, making onboarding simple for everyone — from Web3 natives to first-time users.

It’s an all-in-one SDK that handles the full flow: login, wallet creation, and connection.

<Info>Adding a **Connect button** to your web app only takes a few steps, as shown below.</Info>

## Demo

<Note>
  Before you begin, feel free to explore and test the [Particle Connect Demo](https://demo.particle.network) to contextualize the information covered below.

  Additionally, a boilerplate and associated quickstart is available [here](/social-logins/connect/quickstart/web-quickstart).
</Note>

<Frame>
  <div>
    <img alt="Particle Connect." />
  </div>
</Frame>

## Getting Started

### Installation

To begin, you must install the **Particle Connect** Web SDK alongside viem. Use this SDK within any React framework.

Below is an example of doing so using **yarn**.

```shell Terminal theme={null}
yarn add @particle-network/connectkit viem@^2
```

### Setting up the Particle dashboard

Before jumping directly into configuration and implementation, you must ensure you've retrieved your `projectId`, `clientKey`, and `appId` from the [Particle dashboard](https://dashboard.particle.network).

These are required values, and you'll need in the coming configuration process; they'll authenticate your instance of **Particle Connect**.

<Tip>
  Follow the [Particle Connect quickstart
  tutorial](/social-logins/connect/quickstart/web-quickstart#configuring-particle-connect) to set up a project
  and find the required keys.
</Tip>

### Configuration

Once **Particle Connect** is installed and you have your **project keys**, you can configure the SDK. Simply wrap your application in the `ConnectKitProvider` component to apply customizations and insert the aforementioned keys.

Here, you'll configure the following core parameters:

* `projectId`, `clientKey`, and `appId` — required values from the [Particle dashboard](https://dashboard.particle.network/).
* `chains` — the supported chains for your dApp; these are viem-originating objects imported from `@particle-network/connectkit/chains`.
* `walletConnectors` — an array of connectors representing the wallets you'd like to support within your dApp.
* Optionally, `plugins` — plugins enabling Particle's embedded wallet interface or implementing account abstraction.
* Optionally, `appearance` — deep customization options affecting the login modal.

Below is a code snippet showcasing a structured configuration of `ConnectKitProvider`, using the parameters above.

Create a new component named `connectkit.tsx` and follow the template to set up your configuration.

```tsx connectkit.tsx theme={null}
'use client';

import { ConnectKitProvider, createConfig } from '@particle-network/connectkit';
import { authWalletConnectors } from '@particle-network/connectkit/auth';
import { mainnet, solana } from '@particle-network/connectkit/chains';
import { evmWalletConnectors } from '@particle-network/connectkit/evm';
import { injected as solaInjected, solanaWalletConnectors } from '@particle-network/connectkit/solana';
import { wallet, EntryPosition } from '@particle-network/connectkit/wallet';
import React from 'react';

// Retrieved from https://dashboard.particle.network
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID as string;
const clientKey = process.env.NEXT_PUBLIC_CLIENT_KEY as string;
const appId = process.env.NEXT_PUBLIC_APP_ID as string;
const walletConnectProjectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string;

if (!projectId || !clientKey || !appId) {
    throw new Error('Please configure the Particle project in .env first!');
}

const config = createConfig({
    projectId,
    clientKey,
    appId,
    appearance: {
        // Optional, collection of properties to alter the appearance of the connection modal
        // Optional, label and sort wallets (to be shown in the connection modal)
        recommendedWallets: [
            { walletId: 'metaMask', label: 'Recommended' },
            { walletId: 'coinbaseWallet', label: 'popular' },
        ],
        splitEmailAndPhone: false, // Optional, displays Email and phone number entry separately
        collapseWalletList: false, // Optional, hide wallet list behind a button
        hideContinueButton: false, // Optional, remove "Continue" button underneath Email or phone number entry
        connectorsOrder: ['email', 'phone', 'social', 'wallet'], //  Optional, sort connection methods (index 0 will be placed at the top)
        language: 'en-US', // Optional, also supported ja-JP, zh-CN, zh-TW, and ko-KR
        mode: 'light', // Optional, changes theme between light, dark, or auto (which will change it based on system settings)
        theme: {
            '--pcm-accent-color': '#ff4d4f',
            // ... other options
        },
        logo: 'https://...',
        filterCountryCallingCode: (countries) => {
            // Optional, whitelist or blacklist phone numbers from specific countries
            return countries.filter((item) => item === 'US');
        },
    },
    walletConnectors: [
        evmWalletConnectors({
            metadata: { name: 'My App', icon: '', description: '', url: '' }, // Optional, this is Metadata used by WalletConnect and Coinbase
            walletConnectProjectId: 'Replace with your WalletConnect Project ID', // optional, retrieved from https://cloud.walletconnect.com
        }),
        authWalletConnectors({
            // Optional, configure this if you're using social logins
            authTypes: ['email', 'google', 'apple', 'twitter', 'github'], // Optional, restricts the types of social logins supported
            fiatCoin: 'USD', // Optional, also supports CNY, JPY, HKD, INR, and KRW
            promptSettingConfig: {
                // Optional, changes the frequency in which the user is asked to set a master or payment password
                // 0 = Never ask
                // 1 = Ask once
                // 2 = Ask always, upon every entry
                // 3 = Force the user to set this password
                promptMasterPasswordSettingWhenLogin: 1,
                promptPaymentPasswordSettingWhenSign: 1,
            },
        }),
        solanaWalletConnectors(), // Optional, you need to configure it when using Solana
    ],
    plugins: [
        wallet({
            // Optional configurations for the attached embedded wallet modal
            entryPosition: EntryPosition.BR, // Alters the position in which the modal button appears upon login
            visible: true, // Dictates whether or not the wallet modal is included/visible or not
            customStyle: {
                displayTokenAddresses: ["0x4d224452801ACEd8B2F0aebE155379bb5D594381"], // Display a custom token within the wallet modal
                priorityTokenAddresses: ["0x4d224452801ACEd8B2F0aebE155379bb5D594381"],
            },
        }),
    ],
    chains: [mainnet, solana],
});

// Export ConnectKitProvider to be used within your index or layout file (or use createConfig directly within those files).
export const ParticleConnectkit = ({ children }: React.PropsWithChildren) => {
    return <ConnectKitProvider config={config}>{children}</ConnectKitProvider>;
};
```

<Warning>
  When using a framework that supports React Server Components, such as **Next.js**, you must include the `"use
        client"` directive at the beginning of the file.
</Warning>

Next, import the `ParticleConnectKit` component (representing `ConnectKitProvider`) and wrap your application with it in your `index` or `layout` file. Here's an example of a `layout.tsx` file:

```tsx layout.tsx theme={null}
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

// Import the ConnectKitProvider configuration (exported as ParticleConnectKit)
import { ParticleConnectkit } from './components/Connectkit';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
    title: 'Particle Connect',
    description: 'Demo showcasing a quickstart for Particle Connect 2.0',
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <ParticleConnectkit>{children}</ParticleConnectkit>
            </body>
        </html>
    );
}
```

#### Selecting Chains

**Particle Connect** supports multiple **EVM** chains alongside **Solana**.

<Tip>Refer to the [Network Coverage](/social-logins/network-coverage) page for a detailed list of supported chains.</Tip>

You can easily import predefined chains from `@particle-network/connectkit/chains`.

You can also integrate additional EVM-compatible chains by defining custom chain objects that extend the `Chain` type if you are connecting to a standard wallet (without using an embedded wallet or social login features).

```typescript theme={null}
// Importing some predefined examples.
import {
    mainnet,
    sepolia,
    bsc,
    bscTestnet,
    linea,
    lineaSepolia,
    polygon,
    polygonAmoy,
    solana,
    solanaTestnet,
    defineChain,
} from '@particle-network/connectkit/chains';

// Define Custom Chains
const merlinTestnet = defineChain({
    id: 686868,
    name: 'Merlin Testnet',
    nativeCurrency: {
        decimals: 18,
        name: 'Bitcoin',
        symbol: 'BTC',
    },
    rpcUrls: {
        default: {
            http: ['https://testnet-rpc.merlinchain.io'],
        },
    },
    blockExplorers: {
        default: { name: 'Explorer', url: 'https://testnet-scan.merlinchain.io' },
    },
    testnet: true,
      custom: {
    icon: "https://ICON_URL",
    },
});
```

This example demonstrates importing predefined chains and defining a custom chain (Merlin Testnet). By doing so, you can expand your application's network capabilities to include virtually any EVM-compatible chain.

<Note>
  Defining custom chains through `defineChain` will only work with supported chain IDs (those listed in [Network
  Coverage](/social-logins/network-coverage)), as such, this function is primarily for using custom RPCs, explorers, symbols,
  etc.
</Note>

### Adding the connection button

Moving out of your `index` file and into your main `App` component, you'll need to include the **Connect** button (`ConnectButton` from `@particle-network/connectkit`) to facilitate the utilization of Particle Connect.

You can then use `isConnected` from `useAccount()` to handle your frontend post-connection.

```typescript theme={null}
"use client";

import { ConnectButton, useAccount } from "@particle-network/connectkit";

const App = () => {
  const { address, isConnected, chainId } = useAccount();

  // Standard ConnectButton utilization
  return (
    <div>
      <ConnectButton />
      {isConnected && (
        <>
          <h2>Address: {address}</h2>
          <h2>Chain ID: {chainId}</h2>
        </>
      )}
    </div>
  );
};

export default App;
```

#### Customizing the Connect Button Widget

The `ConnectButton` component turns into an embedded widget that displays a chain selector on one side and address/account information on the other after the user logs in.

If you want to remove the chain selector portion of the widget, you can do it by adding the following styles to your `global.css` file:

```css global.css theme={null}

/* Hide the chain selector elements */
.sc-dUMaFF.iLJvQa {
  display: none;
}

.sc-dKGrn.cHiobV {
  display: none;
}
```

These styles target the specific elements responsible for rendering the chain selector, effectively removing them from the widget's interface.

<Note>Ensure the class names (`.sc-dUMaFF.iLJvQa` and `.sc-dKGrn.cHiobV`) match the generated CSS in your project. These names may vary depending on your library or framework, so inspect your component's rendered DOM if the provided selectors do not work.</Note>

## Login Modal Appearance

The `appearance` property allows you to customize the modal's style, including changing the accent color, border radius, primary button color, font, and more.

You can try it in the [Particle Demo](https://demo.particle.network) and export the configuration.

```typescript theme={null}
import { createConfig } from '@particle-network/connectkit';
import { authWalletConnectors } from '@particle-network/connectkit/auth';

const config = createConfig({
    appearance: {
        mode: 'light',
        theme: {
            // modal
            '--pcm-overlay-background': 'rgba(71, 88, 107, 0.24)',
            '--pcm-overlay-backdrop-filter': 'blur(6px)',
            '--pcm-modal-box-shadow': '0px 2px 4px rgba(0, 0, 0, 0.1)',

            // background
            '--pcm-body-background': '#ffffff',
            '--pcm-body-background-secondary': '#EFF0F2',
            '--pcm-body-background-tertiary': '#F9F9FA',

            // foreground
            '--pcm-body-color': '#181B1E',
            '--pcm-body-color-secondary': '#8B8EA1',
            '--pcm-body-color-tertiary': '#DCDFE6',

            '--pcm-body-action-color': '#999999',
            '--pcm-accent-color': '#A257FA',
            '--pcm-focus-color': '#A257FA',

            // button
            '--pcm-button-font-weight': '500',
            '--pcm-button-hover-shadow': '0px 2px 4px rgba(0, 0, 0, 0.05)',
            '--pcm-button-border-color': '#EAECF0',

            // primary button
            '--pcm-primary-button-color': '#ffffff',
            '--pcm-primary-button-background': '#181B1E',
            '--pcm-primary-button-hover-background': '#353738',

            // font
            '--pcm-font-family': `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
    'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
    'Segoe UI Symbol'`,

            // radius
            '--pcm-rounded-sm': '6px',
            '--pcm-rounded-md': '12px',
            '--pcm-rounded-lg': '18px',
            '--pcm-rounded-xl': '24px',
            '--pcm-rounded-full': '9999px',

            '--pcm-success-color': '#58C08F',
            '--pcm-warning-color': '#F59E0A',
            '--pcm-error-color': '#EA4335',

            '--pcm-wallet-label-color': '#33C759',
        },
    },
    // Other connectors..
});
```

<Tip>
  To ensure a better experience, specify the mode as `light` or `dark` if you customize the background or foreground.
  Your custom theme will override the current mode's default values (`light`, `dark`, `auto`).
</Tip>

## Wallet Connectors

### Social Logins

**Particle Connect** relies on [Particle Auth](/social-logins/auth/desktop-sdks/web) for social authentication.

With **Particle Auth**, you can onboard users through `email`, `phone`, and various social logins (Google, X, and so on).

```typescript theme={null}
import { createConfig } from '@particle-network/connectkit';
import { authWalletConnectors } from '@particle-network/connectkit/auth';

const config = createConfig({
    walletConnectors: [
        authWalletConnectors({
            authTypes: ['email', 'google', 'apple', 'twitter', 'github'], // Optional, restricts the types of social logins supported
            fiatCoin: 'USD', // Optional, also supports CNY, JPY, HKD, INR, and KRW
            promptSettingConfig: {
                // Optional, changes the frequency in which the user is asked to set a master or payment password
                // 0 = Never ask
                // 1 = Ask once
                // 2 = Ask always, upon every entry
                // 3 = Force the user to set this password
                promptMasterPasswordSettingWhenLogin: 1,
                promptPaymentPasswordSettingWhenSign: 1,
            },
        }),
    ],
    // Other connectors..
});
```

### Authentication via Passkey

**Particle Connect** supports authentication with **Passkey**, a solution for secure, device-embedded authentication.

To enable **Passkeys** within your **Particle Connect** project, import `passkeySmartWallet` from `"@particle-network/connectkit/evm"` and include it in the `evmWalletConnectors` object.

<Note>**Passkey** authentication is exclusively available with **Biconomy V2** or **Coinbase** smart accounts.</Note>

```tsx theme={null}
import {
  evmWalletConnectors,
  passkeySmartWallet,
} from "@particle-network/connectkit/evm";

const config = createConfig({
    walletConnectors: [
    evmWalletConnectors({
      // Replace this with your app metadata.
      metadata: { name: "Connectkit Demo", },
      connectorFns: [passkeySmartWallet()],
      multiInjectedProviderDiscovery: false,
    }),

    ],
      plugins: [
    // Embedded wallet configuration
    wallet({
      visible: true,
      entryPosition: EntryPosition.BR,
    }),

    // AA configuration
    // For Passkeys, use Biconomy or Coinbase
    aa({
      name: "COINBASE",
      version: "1.0.0",
    }),
  ],
});
    // Other connectors..
});
```

### EVM Wallets

In addition to **social logins** and **Passkey**, **Particle Connect** supports all standard EVM wallets, and you can use the `injected` method to support additional extension-based wallets that inject a provider.

**Particle Connect** supports the following EVM wallets by default:

* **MetaMask**
* **WalletConnect**
* **Phantom**
* **Coinbase Wallet**
* **OKX Wallet**
* **Trust Wallet**
* **Bitget Wallet**

To enable these options, simply add EVM wallet connectors to `walletConnectors` (within your `ConnectKitProvider` config).

```typescript theme={null}
import { createConfig } from '@particle-network/connectkit';
import { evmWalletConnectors, injected, walletConnect, coinbaseWallet } from '@particle-network/connectkit/evm';

const config = createConfig({
    walletConnectors: [
        evmWalletConnectors({
            metadata: { name: 'My App', icon: '', description: '', url: '' }, // Optional, this is Metadata used by WalletConnect and Coinbase
            walletConnectProjectId: 'Replace with your WalletConnect Project ID', // optional, retrieved from https://cloud.walletconnect.com
            },

            // Optional, defines specific wallet connectors to be supported
            connectorFns: [
                injected({ target: 'metaMask' }),
                injected({ target: 'trustWallet' }),
                injected({ target: 'okxWallet' }),
                coinbaseWallet(),
                walletConnect({ projectId: 'WalletConnect project id', showQrModal: false }),

                // Optional, include support for a specific injected wallet (that isn't already supported)
                injected({
                    target: {
                        icon: 'https://...',
                        id: 'xxx', // Wallet Unique ID
                        name: 'XXX Wallet',
                        provider: (window) => {
                            return window?.xxx.ethereum;
                        },
                    },
                }),
            ],
            // EIP-6963: Multi Injected Provider Discovery, default true.
            multiInjectedProviderDiscovery: true,
        }),
    ],
    // Other connectors...
});
```

### Solana Wallets

Finally, **Particle Connect** also supports all standard **Solana** wallets, and, similar to **EVM** wallets, you can use the `injected` method to customize support for specific wallets.

**Particle Connect** supports the following **Solana** wallets by default:

* **Phantom**
* **Coinbase Wallet**
* **OKX Wallet**
* **Trust Wallet**
* **Bitget Wallet**

Add **Solana** wallet connectors to `walletConnectors` (within your `ConnectKitProvider` config) to enable these options.

```typescript theme={null}
import { createConfig } from '@particle-network/connectkit';
import { solanaWalletConnectors, injected } from '@particle-network/connectkit/solana';

const config = createConfig({
    walletConnectors: [
        solanaWalletConnectors({
            // Optional, defines specific wallet connectors to be supported
            connectorFns: [
                injected({ target: 'phantom' }),
                injected({ target: 'coinbaseWallet' }),
                injected({ target: 'bitKeep' }),
                injected({ target: 'trustWallet' }),
                injected({ target: 'okxWallet' }),
                // Optional, include support for a specific injected wallet (that isn't already supported)
                injected({
                    target: {
                        icon: 'https://...',
                        id: 'xxx', // wallet unique id
                        name: 'XXX Wallet',
                        provider: (window) => {
                            return window?.xxx.solana;
                        },
                    },
                }),
            ],
        }),
    ],
    // Other connectors...
});
```

## Login Flow Customization

You can customize the login flow by specifing a social login or wallet to a custom button or component directly.

### Log in with a Specific Social Platform

You can streamline the login process by bypassing the standard login modal and directing users to log in with a specific social platform.

The following example shows how to automatically prompt users to log in with their Google account, skipping the login modal entirely:

<Steps>
  <Step title="Find the Particle Auth Connector">
    This is the connector responsible for social logins.

    ```typescript theme={null}
    const particleConnector = connectors.find(
      (c) => c.id === 'particleAuth' || c.walletConnectorType === 'particleAuth'
    );
    ```
  </Step>

  <Step title="Create the Social Login Handler">
    Create a function that handles the login logic. It takes the social provider type as an argument.

    ```typescript theme={null}
    const handleLogin = (socialType) => {
      if (!particleConnector) return;

      connect({
        connector: particleConnector,
        authParams: { socialType },
      });
    };
    ```
  </Step>

  <Step title="Add the Button (e.g., Google)">
    Add the button to your UI and attach the `handleLogin` function to its `onClick` event.

    ```typescript theme={null}
    <button onClick={() => handleLogin('google')}>Continue with Google</button>
    ```
  </Step>
</Steps>

<Info>
  Supported socialType Values

  * `google`
  * `github`
  * `twitter`
  * `apple`
  * `discord`
  * `facebook`
  * `microsoft`
  * `linkedin`
  * `twitch`
</Info>

### Direct Wallet Connection

You can connect users directly to a specific wallet provider using a custom button or component.

<Steps>
  <Step title="Find the Wallet Connector">
    Locate the connector by its ID (e.g., `'metaMask'`, `'walletConnect'`, `'coinbaseWalletSDK'`).

    ```typescript theme={null}
    const metaMaskConnector = connectors.find((c) => c.id === 'metaMask');
    ```
  </Step>

  <Step title="Create the Wallet Login Handler">
    Wallets do not require `authParams`.

    ```typescript theme={null}
    const handleMetaMask = async () => {
      if (!metaMaskConnector) return;

      try {
        await connect({
          connector: metaMaskConnector,
        });
      } catch (error) {
        console.error("Error connecting with MetaMask:", error);
      }
    };
    ```
  </Step>

  <Step title="Add the Wallet Button">
    Add the button and call your handler on click.

    ```tsx theme={null}
    <button onClick={handleMetaMask}>Connect via MetaMask</button>
    ```
  </Step>
</Steps>

<Info>
  Available Wallet IDs

  * `metaMask`
  * `walletConnect`
  * `coinbaseWalletSDK`
  * `phantom`
  * `trustWallet`
  * `okxWallet`
  * `bitKeep`
  * `com.brave.wallet`
  * `app.backpack`
</Info>

## Plugins

### Embedded Wallet

The **Embedded Wallet** Plugin relies on [Particle Wallet](/wallet/desktop/web) to display a complete wallet interface upon login. This interface displays user balances and NFTs, allows standard P2P transactions, allows swapping, and so on; this is particularly helpful when using social logins or account abstraction.

<Note>
  Once a user is connected, you can access the embedded wallet service (through MetaMask, Phantom, socials, etc.).
</Note>

To enable this feature, simply add the `wallet` plugin to `plugins` (within your `ConnectKitProvider` config).

```typescript theme={null}
import { createConfig } from '@particle-network/connectkit';
import { wallet, EntryPosition } from '@particle-network/connectkit/wallet';

const config = createConfig({
    plugins: [
        wallet({
            // Optional configurations for the attached embedded wallet modal
            entryPosition: EntryPosition.BR, // Alters the position in which the modal button appears upon login
            visible: true, // Dictates whether or not the wallet modal is included/visible or not
            widgetIntegration: 'modal', // Optional: changes the wallet widget integration type (modal or embedded)
            walletUrl: 'https://wallet-iframe.particle.network', // Optional: custom wallet URL
            customStyle: {
                // Override the default configuration.
                // Define the wallet-specific configurations.
            },
        }),
    ],
    // Other plugins...
});
```

#### Customizing the Embedded Wallet

You can embed the wallet widget anywhere in your application by setting `widgetIntegration: 'embedded'`. This allows you to have complete control over the wallet component's visibility and placement.

Use the provided methods to append the wallet iframe to your desired location and listen for specific events (e.g., closing the wallet) to customize the user experience.

```tsx theme={null}
import { useEmbeddedWallet } from '@particle-network/connectkit';

const { getWalletIFrame } = useEmbeddedWallet();

// get wallet widget
const walletIFrame = getWalletIFrame();
// then you can append the wallet widget to your desired location

// listen to the message event to close the wallet widget
window.addEventListener(
    'message',
    (event) => {
        if (event?.data?.type === 'PARTICLE_WALLET_CLOSE_IFRAME') {
            // TODO: close wallet widget
        }
    },
    false
);
```

### Account Abstraction

**Particle Connect** comes with built-in **Account Abstraction** support, which you can enable using the `aa` plugin.

This plugin leverages [Particle's Account Abstraction SDK](/aa/sdks/desktop/web) to use ERC-4337 features in your application.

**Particle Network** offers support for several smart account implementations, including:

* **Biconomy**
* **CyberConnect**
* **Simple**
* **Light**
* **Xterio**

<Note>
  Refer to the [Network Coverage](/social-logins/network-coverage) page for a complete list of supported chains across these
  smart accounts. All available smart accounts and further details are on the [AA
  SDK](/aa/sdks/desktop/web#initialization) page.
</Note>

To enable Account Abstraction features, add the `aa` plugin to the `plugins` section of your `ConnectKitProvider` configuration:

```typescript theme={null}
import { createConfig } from '@particle-network/connectkit';
import { aa } from '@particle-network/connectkit/aa';

const config = createConfig({
    plugins: [
        aa({
            name: 'BICONOMY',
            version: '2.0.0',
        }),
    ],
    // Other plugins...
});
```

#### Use Smart Account

When you enable **Account Abstraction**, you'll need to handle the resulting account differently than you would typically; specifically, you'll need to use an instance of the `useSmartAccount` hook for constructing and sending `UserOperations` (transactions); these methods are available directly on the `useSmartAccount` instance.

Alternatively, this instance can be plugged into `AAWrapProvider` (generates an 1193-compatible provider) from `@particle-network/aa` to leverage the smart account through a standard library, such as Ethers.

<Note>
  For more information about working with Particle Network's account abstraction stack, head to the relevant [SDK
  reference](/aa/sdks/desktop/web).
</Note>

Example of sending a **UserOperation**:

```typescript theme={null}
import { useSmartAccount } from '@particle-network/connectkit';

const smartAccount = useSmartAccount();
const userOp = await smartAccount.buildUserOperation({
    tx: {
        to: recipientAddress,
        value: '0x1', // 1wei
        data: '0x',
    },
});
const txHash = await smartAccount.sendUserOperation(userOp);
```

#### Retrieve the Smart Account Address

After initializing an instance of the `useSmartAccount` hook, you can easily obtain the account's address with the `getAddress` method.

This is particularly useful for fetching and displaying balances or showing the address within your application's UI. Importantly, the typical hooks used for retrieving user addresses will not reflect the correct address in this case; they'll return the EOA; the only way to retrieve the user's smart account address is through `{instance of useSmartAccount}.getAddress`.

Below is an example using `useEffect` to achieve this:

```tsx theme={null}
import { useSmartAccount } from '@particle-network/connectkit';

const smartAccount = useSmartAccount();

useEffect(() => {
    if (smartAccount) {
        smartAccount
            .getAddress()
            .then((address) => console.log('SmartAccount Address:', address))
            .catch((error) => console.error('Error getting address:', error));
    }
}, [smartAccount]);
```

## Examples of Utilization

### Verify User Connection

After setting up **Particle Connect** in your application, you can check if a user is connected via **Particle Connect** using `isConnected` from the `useAccount` hook (`isConnected` will be truthy automatically upon connection).

```typescript TypeScript theme={null}
import { useAccount } from '@particle-network/connectkit';

const { isConnected, isConnecting, isDisconnected, isReconnecting } = useAccount();

if (isConnected) {
    // Truthy indicates a successful login, active session
}
```

### Get Wallet Address

After a successful connection, you can use `useAccount` to get the address and `status`, or `useAddress` to get the address.

```typescript theme={null}
import { useAccount } from '@particle-network/connectkit';

const { address, chain, status } = useAccount();

// The wallet's current active chain. If the current chain is not configured in `createConfig`, it will be null.
const currentChain = chain;

// Wallet connection status. (connected / reconnecting / connecting / disconnected)
const currentStatus = status;

// If you've enabled ERC-4337 feature and connected an EVM wallet,
// you need to use this method to get the smart account's address.
const address = useAddress();
```

<Tip>
  `useAccount` only returns the EOA address. `useAddress` returns the smart account's address when Account Abstraction
  (AA) is enabled and the EOA address when AA is disabled.
</Tip>

### Switching Networks

To switch the network of a connected wallet, you can use `useSwitchChain` imported from `@particle-network/connectkit`.

When calling the switch network method, the SDK will request the user to confirm the network switch or add the network if it was not previously set.

```typescript TypeScript theme={null}
import { useAccount, useSwitchChain } from '@particle-network/connectkit';

const { switchChain, switchChainAsync, error, status } = useSwitchChain();
// The wallet’s current active chain id.
const { chainId } = useAccount();

await switchChainAsync({ chainId: 1 });
// or
switchChain({ chainId: 1 });
```

### Fetch and Use Chain Information

**Particle Connect** provides native support for handling and displaying information about the currently selected chain. You can access these details using the `chain` object, which is available through the `useAccount()` hook.

```tsx theme={null}
import { useAccount } from '@particle-network/connectkit';

// Access the wallet’s current active chain
const { chain } = useAccount();

<h2 className="text-classes">Chain: {chain?.name}</h2>;
```

In this example, the chain's name is displayed using `chain?.name`. You can access various other properties of the `chain` object to retrieve more detailed information about the active chain.

<Accordion title="Available Fields in `chain`">
  * `id`
  * `name`
  * `nativeCurrency`
  * `rpcUrls`
  * `blockExplorers`
  * `contracts`
  * `sourceId`
  * `testnet`
  * `custom`
  * `fees`
  * `formatters`
  * `serializers`
</Accordion>

This structure enables you to dynamically access a wide range of information, offering flexibility in how you display and use this information within your application, thereby eliminating the need to hardcode blockchain-specific data.

### Use EIP-1193 Provider (Ethers)

If your dApp already uses a standard library such as Ethers, you can manage accounts by plugging in an **EIP-1193** provider attached to the connected EOA.

Upon creating an instance of Ethers, you can use the provider to send transactions and sign messages using standard syntax from that library; these requests will be automatically routed to the EOA connected through **Particle Connect**.

An example of this approach with Ethers has been included below.

```ts App.tsx theme={null}
import { useWallets } from '@particle-network/connectkit';
import { ethers } from 'ethers';

const [primaryWallet] = useWallets();

const EOAprovider = await primaryWallet.connector.getProvider();

const customProvider = new ethers.BrowserProvider(
    EOAprovider as Eip1193Provider, "any"
);
```

With this configured, both read and write calls can be made from the resulting provider object, for example:

```ts TypeScript theme={null}
// Read (balance retrieval)
const balance = await customProvider.getBalance(address);

// Write (sending a transaction)
const signer = customProvider.getSigner();
const tx = {
    to: '0x000000000000000000000000000000000000dEaD',
    value: ethers.utils.parseEther('0.01'),
};
const txResponse = await signer.sendTransaction(tx);
```

### Use Wallet Client (Manage Account)

As an alternative to using an **EIP-1193** provider with a standard Web3 library, the Wallet Client interface lets you directly interact with accounts, providing functionality to execute transactions, sign messages, and more.

<Tip>For more details on `WalletClient`, refer to the [Viem documentation](https://viem.sh/docs/clients/wallet).</Tip>

```typescript TypeScript theme={null}
import { SolanaChain, useWallets, useAccount } from '@particle-network/connectkit';

const [primaryWallet] = useWallets();

// Current chain ID being used
// Address tied to the connected wallet (or social login)
const { chainId, address } = useAccount();


const walletClient = primaryWallet.getWalletClient();
// Examples of EVM wallet methods
// Send a transaction
walletClient.sendTransaction({...})
// Sign a message
walletClient.signMessage({...})
// Sign typed data
walletClient.signTypedData({...})


const solanaWallet = primaryWallet.getWalletClient<SolanaChain>();
// Examples of Solana wallet methods
// Send a transaction
solanaWallet.sendTransaction({...})
// Sign a message
solanaWallet.signMessage({...})
// Sign a transaction (without sending)
solanaWallet.signTransaction({...})

```

Example of sending an EVM transaction:

```tsx TypeScript theme={null}
import { useWallets, useAccount } from '@particle-network/connectkit';
import { parseEther, type Address } from 'viem';

const [primaryWallet] = useWallets();
const { chain, address } = useAccount();

const executeTx = async () => {
    // Prepare the transaction object
    const tx = {
        to: recipientAddress as Address,
        value: parseEther('0.01'),
        data: '0x', // No contract interaction, so data is empty
        chain: chain,
        account: address as Address,
    };

    // Get the wallet client and send the transaction
    const walletClient = primaryWallet.getWalletClient();
    const transactionResponse = await walletClient.sendTransaction(tx);

    console.log('Transaction sent:', transactionResponse);
};
```

Example of sending a Solana transaction:

```tsx TypeScript theme={null}
import { useWallets, useAccount, usePublicClient, type SolanaChain } from '@particle-network/connectkit';
import { PublicKey, SystemProgram, Transaction } from '@solana/web3.js';

const [primaryWallet] = useWallets();
const solanaWallet = primaryWallet?.getWalletClient<SolanaChain>();
const publicClient = usePublicClient<SolanaChain>();

const executeTx = async () => {
    const publicKey = solanaWallet.publicKey;
    // Prepare the transaction object
    const tx = new Transaction();
    tx.add(
        SystemProgram.transfer({
            fromPubkey: publicKey,
            toPubkey: new PublicKey(recipientAddress),
            lamports: amount,
        })
    );

    const { blockhash, lastValidBlockHeight } = await publicClient.getLatestBlockhash({
        commitment: 'finalized',
    });

    tx.recentBlockhash = blockhash;
    tx.lastValidBlockHeight = lastValidBlockHeight;
    tx.feePayer = publicKey;

    const transactionResponse = await solanaWallet.sendTransaction(tx);
    console.log('Transaction sent:', transactionResponse);
};
```

### Leverage PublicClient for RPC Calls

**Particle Connect** integrates Viem, allowing you to make RPC calls directly—such as fetching balances or nonces—via the `usePublicClient()` hook, eliminating the need for a separate provider.

```tsx TypeScript theme={null}
import { usePublicClient } from '@particle-network/connectkit';

export const App = () => {
    // Init public client
    const publicClient = usePublicClient();

    // Fetch the balance of an account
    const fetchBalance = async () => {
        const balanceResponse = await publicClient?.getBalance({
            address,
        });
    };
};
```

For Solana, `usePublicClient` returns a `Connection` type (imported from `@solana/web3.js`).

```typescript Solana Example theme={null}
import { usePublicClient, SolanaChain } from '@particle-network/connectkit';

export const App = () => {
    // Init public client
    const publicClient = usePublicClient<SolanaChain>();

    const [primaryWallet] = useWallets();
    const solanaWallet = primaryWallet?.getWalletClient<SolanaChain>();

    // Fetch the balance of an account
    const fetchBalance = async () => {
        const balanceResponse = await publicClient?.getBalance(solanaWallet.publicKey);
    };
};
```

### Fetch User Information with Particle Auth

When a user connects through socials, you can use the `useParticleAuth()` hook to retrieve `userinfo` (which includes details about the method they used to connect, when the account was created, etc.) and other relevant details from **Particle Auth**.

```tsx App.tsx theme={null}
import { useAccount, useParticleAuth, useWallets } from '@particle-network/connectkit';
import { useState, useEffect } from 'react';

export const App = () => {
    const { getUserInfo } = useParticleAuth();
    const { isConnected } = useAccount();

    // Retrieve the primary wallet from the Particle Wallets
    const [primaryWallet] = useWallets();

    // Store userInfo in a useState to use it in your app
    const [userInfo, setUserInfo] = useState<any>(null);

    useEffect(() => {
        const fetchUserInfo = async () => {
            // Use walletConnectorType as a condition to avoid account not initialized errors
            if (primaryWallet?.connector?.walletConnectorType === 'particleAuth') {
                const userInfo = await getUserInfo();
                setUserInfo(userInfo);
            }
        };

        fetchUserInfo();
    }, [isConnected, getUserInfo]);

    return <h2 className="text-style">Name: {userInfo.name || 'N/A'}</h2>;
};
```

<Tip>
  The `userInfo` object is provided by Particle AuthKit. For a detailed breakdown of its structure and available
  properties, refer to the [Handling User Information](/social-logins/auth/desktop-sdks/web#handling-user-information)
  section in the Particle AuthKit documentation.
</Tip>

### Key React Hooks for Particle Connect

`@particle-network/connectkit` provides several React Hooks for interacting with both Particle Connect and Particle Auth. These include:

* `useWallets` - Returns all connected wallets.
* `useAccount` - Retrieves the currently active account (address) and its status.
* `useDisconnect` - Disconnects a wallet.
* `useModal` - Opens the connect modal (`setOpen`) without using `ConnectButton`.
* `usePublicClient` - A Public Client interface for accessing external JSON-RPC API methods, allowing you to retrieve block numbers, fetch transactions, and read data from smart contracts.
* `useSwitchChain` - Switches and retrieves the current primary chain.
* `useSmartAccount` - Provides [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) smart account functionality; requires implementation of the `aa` plugin.
* `useParticleAuth` - Interfaces for Particle Auth.
* `useEmbeddedWallet` - Manages the embedded wallet; requires implementation of the `wallet` plugin.


# Particle Connect FAQ
Source: https://developers.particle.network/social-logins/connect/faq

Find Frequently Asked Questions about Particle Connect.

<AccordionGroup>
  <Accordion title="How do I add a custom wallet to Particle Connect?" icon="ethereum">
    **Answer:** Particle Connect, out-of-the-box, supports **MetaMask**, **WalletConnect**, **Phantom**, **Coinbase Wallet**, **OKX Wallet**, **Trust Wallet**, and **Bitget Wallet**.

    Although, a custom wallet can be added given it supports application injection (the vast majority of extension-based wallets). To add an injected wallet to Particle Connect, you'll need to place `injected` from `@particle-network/connectkit` (for Web) within the `connectorFns` object.

    An example of this has been included below.

    ```ts theme={null}
    import { createConfig } from '@particle-network/connectkit';
    import {
      evmWalletConnectors,
      injected,
      walletConnect,
      coinbaseWallet,
    } from '@particle-network/connectkit/evm';

    const config = createConfig({
      walletConnectors: [
        evmWalletConnectors(
          {
            // You can pass options here if needed
          },
          {
            connectorFns: [
              injected({
                // Replace the placeholders with information reflecting the wallet you're including.
                target: {
                  icon: 'https://...',
                  id: 'xxx', // Wallet Unique ID
                  name: 'XXX Wallet',
                  provider: (window) => {
                    return window?.xxx?.ethereum;
                  },
                },
              }),
            ],
            // EIP-6963: Multi Injected Provider Discovery, default true.
            multiInjectedProviderDiscovery: true,
          }
        ),
        // Add more connectors like walletConnect(), coinbaseWallet(), etc., here if needed
      ],
    });
    ```
  </Accordion>

  <Accordion title="Do I need to use Particle Auth if I'm using Particle Connect?" icon="block-question">
    **Answer:** No, Particle Connect already integrates Particle Auth for social logins under the hood. If you're using Particle Connect, there's no need to install or configure any additional SDKs.

    <Tip>Get started with Particle Connect by following the [Connect Quickstart Guide](/social-logins/connect/quickstart/web-quickstart) for a step-by-step tutorial.</Tip>
  </Accordion>

  <Accordion title="Does Particle Connect include support for Bitcoin wallets through BTC Connect?" icon="bitcoin">
    **Answer:** No, Particle Connect does not natively support Bitcoin wallets.
  </Accordion>

  <Accordion title="How do I use account abstraction with Particle Connect?" icon="file-user">
    **Answer:** To enable account abstraction with Particle Connect, start by configuring the `aa` plugin through the `ConnectKitProvider`.

    Once configured, you can use the `useSmartAccount` hook within your application. This hook gives you access to an object to manage the smart account, streamlining tasks like sending transactions and signing messages.

    <Tip>For detailed setup instructions, visit the [Particle Connect SDK documentation](/social-logins/connect/desktop/web#account-abstraction).</Tip>
  </Accordion>

  <Accordion title="How do I fix webpack 5 polyfills error when creating a new React application?" icon="browser">
    **Answer:** When using `create-react-app` version 5 or above, you might encounter issues due to the lack of NodeJS polyfills, which are no longer included by default. To fix this, you can use `react-app-rewired` and install the necessary polyfill modules.

    * **Step 1:** After creating a new application with `CRA`, install `react-app-rewired` and the required polyfill packages.

      If you're using Yarn:

      ```sh theme={null}
      yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib
      ```

      If you're using NPM:

      ```sh theme={null}
      npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib
      ```

    * **Step 2:** Create a `config-overrides.js` file in the root of your project and add the necessary configuration to include the missing polyfills. This file will override the default Webpack configuration provided by `create-react-app`.

      ```js config-overrides.js theme={null}
      const webpack = require('webpack');

      module.exports = function override(config) {
        const fallback = config.resolve.fallback || {};
        Object.assign(fallback, {
          crypto: require.resolve('crypto-browserify'),
          stream: require.resolve('stream-browserify'),
          assert: require.resolve('assert'),
          http: require.resolve('stream-http'),
          https: require.resolve('https-browserify'),
          os: require.resolve('os-browserify'),
          url: require.resolve('url'),
          zlib: require.resolve('browserify-zlib'),
          process: require.resolve('process/browser'),
        });
        config.resolve.fallback = fallback;
        config.plugins = (config.plugins || []).concat([
          new webpack.ProvidePlugin({
            process: 'process/browser.js',
            Buffer: ['buffer', 'Buffer'],
          }),
        ]);

        config.module.rules = config.module.rules.map((rule) => {
          if (rule.oneOf instanceof Array) {
            rule.oneOf[rule.oneOf.length - 1].exclude = [
              /\.(js|mjs|jsx|cjs|ts|tsx)$/,
              /\.html$/,
              /\.json$/,
            ];
          }
          return rule;
        });

        return config;
      };
      ```

    * **Step 3:** Modify the `scripts` section in your `package.json` to use `react-app-rewired` instead of the default `react-scripts`:

      ```json theme={null}
      "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
      },
      ```

    After making these changes, your React application should build successfully without encountering NodeJS polyfill errors.
  </Accordion>

  <Accordion title="How do I fix the '__wbindgen_add_to_stack_pointer' error in a React app using Vite?" icon="desktop">
    **Answer:** If you're encountering the error `"Cannot read properties of undefined (reading '__wbindgen_add_to_stack_pointer')"` in your React app using Vite, it likely relates to issues with loading a WebAssembly (Wasm) module.

    To resolve this, you can use the Particle Network WASM plugin with a customized Vite configuration. Here's how to set it up:

    1. **Install the Vite Plugin:** Ensure you have the necessary WASM files and the plugin configured.

    ```sh Terminal theme={null}
    npm i @vitejs/plugin-react
    ```

    2. **Update your `vite.config.ts`:** Add the following configuration to correctly handle the WebAssembly module in development mode:

    ```ts vite.config.ts theme={null}
        import { defineConfig, Plugin, ConfigEnv } from 'vite';
      import react from '@vitejs/plugin-react';
      import fs from 'fs';
      import path from 'path';

      const particleWasmPlugin: Plugin | undefined = {
          name: 'particle-wasm',
          apply: (_, env: ConfigEnv) => {
              return env.mode === 'development';
          },
          buildStart: () => {
              const copiedPath = path.join(
                  __dirname,
                  'node_modules/@particle-network/thresh-sig/wasm/thresh_sig_wasm_bg.wasm'
              );
              const dir = path.join(__dirname, 'node_modules/.vite/wasm');
              const resultPath = path.join(dir, 'thresh_sig_wasm_bg.wasm');
              if (!fs.existsSync(dir)) {
                  fs.mkdirSync(dir, { recursive: true });
              }
              fs.copyFileSync(copiedPath, resultPath);
          },
      };

      export default defineConfig({
        plugins: [react(), particleWasmPlugin],
        server: {
          host: '0.0.0.0',
        },
        define: {
          'process.env': process.env
        },
        build: {
          target: 'esnext', // you can also use 'es2020' here
        },
        optimizeDeps: {
          esbuildOptions: {
            target: 'esnext', // you can also use 'es2020' here
          },
        },
      });
    ```

    This configuration helps ensure that the WebAssembly module is correctly copied and accessible during development, preventing the `__wbindgen_add_to_stack_pointer` error from occurring.
  </Accordion>
</AccordionGroup>

<Note>
  **Still need help?**

  [Open a ticket](https://t.me/particle_developer_bot) with Particle's Developer Relations team through the dedicated Telegram support bot.
</Note>


# Introduction to Particle Connect
Source: https://developers.particle.network/social-logins/connect/introduction

One connection layer for Web2 and Web3 logins — in a single modal.

<img alt="Particle Connect ecosystem." />

<img alt="Particle Connect ecosystem." />

***

# Particle Connect

**Particle Connect** is the single sign-on (SSO) solution for Web3.\
It combines Web2 logins (Google, Apple, Twitter, etc.) with Web3 wallets — all in **one modal**.

This lowers onboarding friction for every type of user:

* **Web3 natives**: connect with their existing wallet.
* **Web2 users**: log in with familiar accounts and get an instant wallet.

<Note>Available as SDKs for web (React) and mobile, Particle Connect is the easiest way to add **unified, fast onboarding** to your app.</Note>

***

## Get Started

Checkout the **Quickstart** for a step-by-step guide to getting started with **Particle Connect** in 5 minutes.

<Card title="Web Quickstart" icon="rocket" href="/social-logins/connect/quickstart/web-quickstart">
  Spin up a Particle Connect demo in minutes.
</Card>

## Full SDK reference

<CardGroup>
  <Card title="Web SDK" icon="code" href="/social-logins/connect/desktop/web">
    Add Particle Connect to any web app using JavaScript or TypeScript.
  </Card>

  <Card title="Unity SDK" icon="code" href="/social-logins/connect/mobile/unity">
    Add login to Unity-based mobile games with C#.
  </Card>

  <Card title="Android SDK" icon="code" href="/social-logins/connect/mobile/android">
    Native Android integration with Kotlin.
  </Card>

  <Card title="iOS SDK" icon="code" href="/social-logins/connect/mobile/ios">
    Native iOS integration with Swift.
  </Card>

  <Card title="Flutter SDK" icon="code" href="/social-logins/connect/mobile/flutter">
    Cross-platform support with Flutter.
  </Card>

  <Card title="React Native SDK" icon="code" href="/social-logins/connect/mobile/react">
    Cross-platform support with React Native.
  </Card>
</CardGroup>


# Android (Kotlin) - Connect
Source: https://developers.particle.network/social-logins/connect/mobile/android

Leveraging Particle Connect within Android applications.

## Particle Connect for Android

**Particle Connect** is a custom, in-house connection modal designed to onboard users across different login verticals, including **Web2** accounts via **Particle Auth**, various **Web3** wallets via `WalletConnect`, **Solana**'s mobile `wallet-adapter`, and private key imports.

This ensures universal accessibility within your application, bringing users, Web3-native or not, on-chain.

Implementing Particle Connect as the primary connection mechanism within your Android application only takes a few steps, **which are outlined below**.

## Repository

Before diving into the configuration and utilization process, you can review the [Particle Connect Android SDK repository](https://github.com/Particle-Network/particle-connect-android) for an initial understanding of the underlying architecture, implementation flow and examples.

<div>
  <img alt="Particle Connect Wallet." />

  <img alt="Particle Connect Wallet." />
</div>

<Warning>
  Using a private key or the mnemonic import/generate function is strongly discouraged. If you use it, you need to secure the data yourself, as Particle doesn't have a relationship with the imported/generated mnemonic or private key.
</Warning>

## Getting Started

### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version **8.5.1** or higher.
* Gradle Version **8.9** or higher.

### Dependencies

Installing and initializing **Particle Connect** is quite simple. In this case, it can be summarized in **three steps**.

The first involves dependency management within your `build.gradle` file. Particle Connect requires numerous dependencies, the extent of which depends on the functions you intend to use within your application.

To configure these dependencies, open your `build.gradle` file, and either paste the below code or conditionally define dependencies based upon which types of wallets you'd like to support:

```groovy build.gradle theme={null}
dependencies {
  // Required
  modules {
    module("org.bouncycastle:bcprov-jdk15to18") {
      replacedBy("org.bouncycastle:bcprov-jdk15on")
    }
    module("org.bouncycastle:bcprov-jdk18on") {
      replacedBy("org.bouncycastle:bcprov-jdk15on")
    }
  }
  // Find the latest version of the SDK:
  // https://search.maven.org/search?q=g:network.particle
  val sdkVersion = "x.x.x"
  implementation 'network.particle:connect:{latest-version}'
  implementation 'network.particle:connect-auth-core-adapter:{latest-version}'
  implementation 'network.particle:connect-wallet-connect-adapter:{latest-version}'
  implementation 'network.particle:connect-phantom-adapter:{latest-version}'
  implementation 'network.particle:connect-kit:{latest-version}'
  implementation 'network.particle:connect-evm-adapter:{latest-version}'
  implementation 'network.particle:connect-solana-adapter:{latest-version}'
 }
```

### Setting up the Particle dashboard

All implementations of Particle Connect (and Particle Auth) require three universal values: `projectId`, `appId`, and `clientKey`. These values tie a given implementation to the [Particle dashboard](https://dashboard.particle.network/), enabling configuration, analytics, tracking, etc.

<Note>
  Find a full rundown of how to set up a project and find the required keys in the [dashboard guide](/social-logins/dashboard).
</Note>

### Configuration

Now that you've set your dependencies and retrieved your `projectId` (`pn_project_id`), `clientKey` (`pn_project_client_key`), and `appId` (`pn_app_id`), from the [Particle dashboard](https://dashboard.particle.network), you'll need to move on to configuring `AndroidManifest.xml` using the previously retrieved values to authenticate your implementation of Particle Connect.

Open `AndroidManifest.xml` and either paste the below code or add a configuration that looks similar to the following:

```xml XML theme={null}
<application>
    <activity
        android:name="com.particle.network.controller.WebActivity"
        android:exported="true"
        android:launchMode="singleTask"
        android:configChanges="orientation|keyboardHidden|screenSize"
        android:theme="@style/ThemeAuthWeb">
        <intent-filter>
            <data android:scheme="pn${pn_app_id}" />

            <action android:name="android.intent.action.VIEW" />

            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
        </intent-filter>
    </activity>

    <activity
        android:name="com.connect.common.controller.RedirectActivity"
        android:exported="true"
        android:launchMode="singleTask"
        android:configChanges="orientation|keyboardHidden|screenSize"
        android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />

            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />

            <data android:scheme="connect${PN_APP_ID}" />
        </intent-filter>
    </activity>

    <meta-data
        android:name="particle.network.project_id"
        android:value="${PN_PROJECT_ID}" />
    <meta-data
        android:name="particle.network.project_client_key"
        android:value="${PN_PROJECT_CLIENT_KEY}" />
    <meta-data
        android:name="particle.network.app_id"
        android:value="${PN_APP_ID}" />
</application>
```

### Initialization

Before proceeding to utilization and implementation, you must finish the setup process by initializing Particle Connect within `Application#Create()` (`onCreate()`). Until initialization occurs, Particle Connect will not work. This is the primary means of configuration.

Initialization can be started through the `init` method on `ParticleConnect` (from `com.particle.connect.ParticleConnect`). `init` takes the following parameters:

| Field          | Type                             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| :------------- | :------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| application    | Application                      | Android application                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| env            | Env                              | DEV, STAGING, PRODUCTION. Different levels log different information                                                                                                                                                                                                                                                                                                                                                                                                                      |
| chain          | ChainInfo                        | The primary chain to be used within your application. `ChainInfo` can be set as a `ChainInfo` object imported from `network.particle.chains.ChainInfo.Companion.{chain}`. For example, `ChainInfo.Ethereum` or `ChainInfo.Solana`.                                                                                                                                                                                                                                                        |
| dAppData       | DAppMetadata                     | Metadata outlining the description of your application, used for `WalletConnect`. This should be set as an instance of `DAppMetadata` (imported from `com.particle.base.model.DAppMetadata`) with the following parameters set:<br />- `name`, the name of your project. <br />- `icon`, a link containing the logo (icon) of your project; this should be 512x512, ideally.<br />- `url`, the URL of your project's website. <br />- `description`, a short description of your project. |
| createAdapters | (() -> List`<IConnectAdapter>`)? | You'll need to define a list (`listOf`) wallets (adapters) that you'd like to be provided as an option within your instance of Particle Connect (these can be imported from `com.wallet.connect.adapter.{Adapter name}`).                                                                                                                                                                                                                                                                 |
|                |                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |

```kotlin Kotlin theme={null}
val dAppMetadata = DAppMetadata(
            name ="Particle Connect",
            icon= "https://connect.particle.network/icons/512.png",
            url = "https://particle.network",
            description = "Particle Connect is a decentralized wallet connection solution that allows users to connect to DApps with their wallets.",
            redirect = "redirect://",
            verifyUrl = "verifyUrl",
        )
ParticleConnect.init(
    this,
    Env.DEV,
    ChainInfo.Ethereum,
    dAppMetadata
) {
    listOf(
        AuthCoreAdapter(),
        MetaMaskConnectAdapter(),
        RainbowConnectAdapter(),
        TrustConnectAdapter(),
        ImTokenConnectAdapter(),
        BitKeepConnectAdapter(),
        OKXConnectAdapter(),
        WalletConnectAdapter(),
        PhantomConnectAdapter(),
        EVMConnectAdapter(),
        SolanaConnectAdapter(),
    )
}.
```

## Examples of utilization

### Switch Chain

To switch the primary chain being used after initial configuration, you'll need to retroactively call `ParticleConnect.setChain`, which takes one parameter, `chain` (should be a `ChainInfo` object imported from `network.particle.chains.ChainInfo.Companion.{chain}`).

Upon calling this method, the chain will be switched for the current active session, as is shown below:

```kotlin Kotlin theme={null}
ParticleConnect.setChain(chain)
```

### Get all Wallet Adapters

To retrieve a comprehensive list of current wallet adapters for either `evm` or `solana`, use the `ParticleConnect.getAdapters` method. Pass the desired chain type (`evm` or `solana`) as a parameter. For example:

```kotlin Kotlin theme={null}
var adapters = ParticleConnect.getAdapters(chainType)
```

### Get all Connected Accounts

For a list of all currently connected accounts/addresses (via Particle Connect), you can call `ParticleConnect.getAccounts` while passing in the type of chain to retrieve active accounts for, either `evm` or `solana`. E.g.:

```kotlin Kotlin theme={null}
val accounts = ParticleConnect.getAccounts(chainType)
```

### Connect Wallet V2

<Note>We recommend trying the [Particle Connect Demo](https://demo.particle.network) to easily customize and design your connect page. After customizing, you can copy the generated code from the Code Snippets section and paste it into the `ConnectKit` component to experience it directly in your app.</Note>

#### Dependencies

To include the Particle Connect Kit in your project, Ensure that the following dependency is present in your `build.gradle` file:

```gradle theme={null}
implementation("network.particle:connect-kit:{latest-version}")
```

The `ParticleConnectKit.connect` function enables one-click login with a customizable UI. You can configure the login UI using the `ConnectKitConfig` parameters.

`ConnectKitConfig` includes the following parameters:

| Field                     | Type                          | Description                                                                                                                                                               |
| ------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `connectOptions`          | `List<ConnectOption>`         | `connectOptions` supports `EMAIL`, `PHONE`, `SOCIAL`, and `WALLET`; the sort order is used for the Connect Kit login UI.                                                  |
| `socialProviders`         | `List<EnableSocialProvider>?` | `socialProviders` supports `GOOGLE`、`FACEBOOK`、`APPLE`、`TWITTER`、`DISCORD`、`GITHUB`、`TWITCH`、`MICROSOFT`、`LINKEDIN`. The sort order is used for the Connect Kit login UI. |
| `walletProviders`         | `List<EnableWalletProvider>?` | `walletProviders` supports `MetaMask`、`Rainbow`、`Trust`、`ImToken`、`Bitget`、`OKX`、`Phantom`、`WalletConnect`. The sort order is used for the Connect Kit login UI.          |
| `additionalLayoutOptions` | `AdditionalLayoutOptions`     | Layout options                                                                                                                                                            |
| `logo`                    | `String?`                     | The top logo of the login UI can be customized by providing an image link or a base64-encoded image. If set to 'null', the default Particle logo will be used.            |

`AdditionalLayoutOptions` includes these parameters:

| Field                   | Type      | Description                                                  |
| ----------------------- | --------- | ------------------------------------------------------------ |
| `isCollapseWalletList`  | `Boolean` | Determines if the wallet list should be collapsed.           |
| `isSplitEmailAndSocial` | `Boolean` | Specifies if email and social login options should be split. |
| `isSplitEmailAndPhone`  | `Boolean` | Indicates if email and phone login options should be split.  |
| `isHideContinueButton`  | `Boolean` | Controls if the continue button is hidden.                   |

```kotlin theme={null}
  val config = ConnectKitConfig(
            logo = "https://static.particle.network/logo-text.png",
            connectOptions = listOf(
                ConnectOption.EMAIL,
                ConnectOption.PHONE,
                ConnectOption.SOCIAL,
                ConnectOption.WALLET),
            socialProviders = listOf(
                EnableSocialProvider.GOOGLE,
                EnableSocialProvider.APPLE,
                EnableSocialProvider.GITHUB,
                EnableSocialProvider.FACEBOOK,
                EnableSocialProvider.TWITTER,
                EnableSocialProvider.MICROSOFT,
                EnableSocialProvider.DISCORD,
                EnableSocialProvider.TWITCH,
                EnableSocialProvider.LINKEDIN),
            walletProviders = listOf(
                EnableWalletProvider(EnableWallet.MetaMask,EnableWalletLabel.RECOMMENDED),
                EnableWalletProvider(EnableWallet.Bitget,EnableWalletLabel.POPULAR),
                EnableWalletProvider(EnableWallet.OKX),
                EnableWalletProvider(EnableWallet.Trust),
            ),
            additionalLayoutOptions = AdditionalLayoutOptions(
                isCollapseWalletList = false,
                isSplitEmailAndSocial = false,
                isSplitEmailAndPhone = false,
                isHideContinueButton = false
            )
        )

        ParticleConnectKit.connect(config, object : ConnectKitCallback {
            override fun onConnected(walletName: String, account: Account) {
                Log.i("onConnected", "walletName: $walletName, account: $account")
            }
            override fun onError(error: ConnectError) {
            }
        })
    }
```

### Connect Wallet V1

One of the key methods in the process is `connect`, which allows specific adapters to initiate a connection. This can be done by initializing the adapter in a variable, such as `adapter`. Depending on the adapter, invoking this method may trigger a modal to facilitate the connection.

For `EVMConnectAdapter` and `SolanaConnectAdapter`, calling `connect` will generate a new account with a public and private key pair. For other adapters, the connection flow will vary based on the adapter used. For example:

| Field    | Type             | Description                                                                                                                                                                                                                                       |
| :------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `config` | `ConnectConfig?` | The `ConnectConfig` will only be effective when `adapter.name` is MobileWCWalletName.AuthCore.name`. You can construct a valid object using the subclass `ParticleAuthCoreConfig`. You can pass `null`when`adapter.walletType\` is another value. |

`ConnectConfig` \` There are 4 already implemented subclasses that can correspond to different connection scenarios

| **Field**         | **Type**                            | **Description**                                                                                                                                                                                                                                                                                 |
| ----------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| loginType         | LoginType                           | The social login method in which users will be onboarded by default. This supports `EMAIL`, `PHONE`, `TWITTER`, `GOOGLE`, `FACEBOOK`, `APPLE`, `DISCORD`, `GITHUB`, `TWITCH`, `MICROSOFT`, `LINKEDIN`, `JWT`.                                                                                   |
| account           | String                              | The default is empty. You can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two but required for `.jwt`. If passing a phone number, it must be in E.164 format.                                                               |
| supportLoginTypes | List`<SupportLoginType>`            | Limits the login methods supported by the modal. The default setting supports all login types: `EMAIL`, `PHONE`, `FACEBOOK`, `GOOGLE`, `APPLE`, `TWITTER`, `DISCORD`, `GITHUB`, `TWITCH`, `MICROSOFT`, and `LINKEDIN`. You can also provide a specific subset of `SupportLoginTypes` if needed. |
| prompt            | LoginPrompt?                        | The prompt to be displayed following social login, such as a request to set a master password, payment password, etc. This is `null` by default.                                                                                                                                                |
| loginPageConfig   | LoginPageConfig?                    | If you use Google to log in, you can control the Google account login prompt with this parameter: `None`, `Consent`, or `SelectAccount`.                                                                                                                                                        |
| loginCallback     | AuthCoreServiceCallback`<UserInfo>` | Callback that handles the login process's success or failure.                                                                                                                                                                                                                                   |

```kotlin Kotlin theme={null}

data class ConnectConfigJWT(
    val jwt: String,
) : ConnectConfig

data class ConnectConfigEmail(
    @SerializedName("email") val email: String = "",
    @SerializedName("code") val code: String = "",
    @SerializedName("supportLoginTypes") val supportLoginTypes: List`<SupportLoginType>` = SupportLoginType.values().toList(),
    @SerializedName("prompt") val prompt: LoginPrompt? = null,
    @SerializedName("loginPageConfig") val loginPageConfig: LoginPageConfig? = null,
) : ConnectConfig

data class ConnectConfigPhone(
    @SerializedName("phone") val phone: String = "",
    @SerializedName("code") val code: String = "",
    @SerializedName("supportLoginTypes") val supportLoginTypes: List`<SupportLoginType>` = SupportLoginType.values().toList(),
    @SerializedName("prompt") val prompt: LoginPrompt? = null,
    @SerializedName("loginPageConfig") val loginPageConfig: LoginPageConfig? = null,
) : ConnectConfig

data class ConnectConfigSocialLogin(
    @SerializedName("loginType") val loginType: SocialLoginType,
    @SerializedName("prompt") val prompt: LoginPrompt? = null,
) : ConnectConfig

// Connect using JWT
val adapter = ParticleConnect.getAdapters().first { it is AuthCoreAdapter }
val connectConfigJWT = ConnectConfigJWT(jwt = "Your JWT")
adapter.connect(connectConfigJWT, object : ConnectCallback {
  override fun onConnected(account: Account) {
      val publicAddress =  account.publicAddress
  }
  override fun onError(error: ConnectError) {
     // Handle error
  }
})
// Connect using socials
val connectConfigSocialLogin =  ConnectConfigSocialLogin(loginType = SocialLoginType.GOOGLE, prompt = LoginPrompt.SelectAccount)
adapter.connect(connectConfigSocialLogin,callback)

// Connect using Email
val connectConfigEmail = ConnectConfigEmail()
adapter.connect(connectConfigEmail, callback)

// Connect using Phone
val connectConfigPhone =ConnectConfigPhone()
adapter.connect(connectConfigPhone, callback)
```

### Disconnect Wallet

To programmatically force an account to disconnect from your application, you'll need to call `connectAdapter.disconnect`, with `connectAdapter` referring to an instance of a given wallet adapter.

This takes one parameter (other than the callback), `address`, which you can use to specify the address to disconnect. An example of this has been included below. E.g.:

```kotlin Kotlin theme={null}
connectAdapter.disconnect(address, callback)
```

### Is Connected

In scenarios where you need to check if a specific account is connected, you can use the `connectAdapter.connected` method, which accepts the target address as a parameter. For example:

```kotlin Kotlin theme={null}
val result = connectAdapter.connected(address)
```

### Import & Export Wallet

When using an instance of either `EVMConnectAdapter` or `SolanaConnectAdapter` within your `connectAdapter` setup, you can import a wallet using a private key or a mnemonic (seed phrase).

To do this, use the `connectAdapter.importWalletFromPrivateKey` or `connectAdapter.importWalletFromMnemonic` methods. Both methods will return an account structure you can use within your application.

Additionally, if you need to export a wallet, use the `connectAdapter.exportWalletPrivateKey` method. This requires passing the wallet address (either imported or generated via `EVMConnectAdapter` or `SolanaConnectAdapter`) that you wish to export.

<Note>
  <p>
    This does not refer to importing/exporting wallets within Particle Auth;
    Particle Network's MPC-TSS accounts do not support importing/exporting
    private keys.
  </p>

  <p>This is specific to custom account connection with Particle Connect.</p>
</Note>

```kotlin Kotlin theme={null}
val account = connectAdapter.importWalletFromPrivateKey(privateKey)

val account = connectAdapter.importWalletFromMnemonic(mnemonic)

// Exportation
val privateKey = connectAdapter.exportWalletPrivateKey(address)
```

### Sign and Send Transaction

To initiate a transaction for signature and ultimately settlement on-chain, you'll need to use `connectAdapter.signAndSendTransaction` (for both EVM and Solana). This will return a popup to the adapter in question, prompting a signature from the end user. Once they confirm, the transaction will be immediately sent to the network.

`connectAdapter.signAndSendTransaction` takes the following parameters:

* `address` — The user address to target for initiating the transaction.
* `transaction` — A stringified transaction object, including fields such as `to`, `from`, `value`, `data`, and others.
* `callback` — A function to handle the transaction's return response.

| Field           | Type                | Description                                                                                                                                                             |
| :-------------- | :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String`            | For the connected public address, if `adapter` is `AuthCoreAdapter`, you can pass an empty string; for other wallet types, you need to pass a connected public address. |
| `transaction`   | `String`            | EVM transaction, expressed as a hexadecimal string, or a Solana transaction, expressed as a base58 string.                                                              |
| callback        | TransactionCallback | A function to handle the transaction's return response.                                                                                                                 |

E.g.:

```kotlin Kotlin theme={null}
connectAdapter.signAndSendTransaction(address, transaction, callback)
 adapter.signAndSendTransaction(publicAddress = "", transaction = "tx",
            object : TransactionCallback {
                override fun onTransaction(transactionId: String?) {
                  	// Handle success
                }

                override fun onError(error: ConnectError) {
                  // Handle error
                }
            })
```

### Sign Transaction

`connectAdapter.signTransaction` is a **Solana-specific** method for signing a transaction without pushing it to the network. Specifically, this method requires the following parameters:

| Field           | Type         | Description                                                                                                                                                             |
| :-------------- | :----------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String`     | For the connected public address, if `adapter` is `AuthCoreAdapter`, you can pass an empty string; for other wallet types, you need to pass a connected public address. |
| `transaction`   | `String`     | EVM transaction, expressed as a hexadecimal string, or a Solana transaction, expressed as a base58 string.                                                              |
| callback        | SignCallback | A function to handle the transaction's return response.                                                                                                                 |

E.g.:

```kotlin Kotlin theme={null}
connectAdapter.signTransaction(address, transaction, callback)

// Alternatively, the plural form of this method, takes a list of transactions
connectAdapter.signAllTransactions(address, transactions, callback)
```

### Sign Message

To sign a basic UTF-8 message (string), you can use `connectAdapter.signMessage` to prompt the user for a signature alongside the message in question. `connectAdapter.signMessage` takes the following parameters:

| Field           | Type         | Description                                                                                                                                                             |
| :-------------- | :----------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String`     | For the connected public address, if `adapter` is `AuthCoreAdapter`, you can pass an empty string; for other wallet types, you need to pass a connected public address. |
| `transaction`   | `String`     | EVM transaction, expressed as a hexadecimal string, or a Solana transaction, expressed as a base58 string.                                                              |
| callback        | SignCallback | A function to handle the transaction's return response.                                                                                                                 |

E.g.:

```kotlin Kotlin theme={null}
connectAdapter.signMessage(address, message, callback)
```

### Sign Typed Data

Alternatively, **for EVM chains**, you can request that a user signs typed (structured) data rather than purely a raw string. To do this, you can use `connectAdapter.signTypedData` (equivalent to `eth_signTypedData`). This takes the following parameters:

| Field           | Type         | Description                                                                                                                                                             |
| :-------------- | :----------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String`     | For the connected public address, if `adapter` is `AuthCoreAdapter`, you can pass an empty string; for other wallet types, you need to pass a connected public address. |
| `data`          | `String`     | the typed data to be signed; see the [Web (JavaScript/TypeScript)](/social-logins/auth/desktop-sdks/web) page for additional guidance.                                  |
| callback        | SignCallback | A function to handle the transaction's return response.                                                                                                                 |

* `address` — The user address to target for signature initiation.
* `data` — The typed data to be signed. For more details, refer to the [Web (JavaScript/TypeScript)](/social-logins/auth/desktop-sdks/web) documentation.
* `callback` — A function to handle the response after the signature process.

E.g.:

```kotlin Kotlin theme={null}
connectAdapter.signTypedData(address, data, callback)
```

### (Optional) Custom WalletConnect Project ID

```kotlin Kotlin theme={null}
//call before ParticleConnect.init
ParticleNetwork.setWalletConnectProjectId("Your WalletConnect Project ID, from https://cloud.walletconnect.com")
```

## Custom WalletConnect Adapter

There may be cases where the existing selection of adapters doesn't include a wallet you'd like to be featured within Particle Connect.

Creating a custom adapter (using **WalletConnect**) is simple. Doing so will require a structure **similar to the example below**, in which a custom **Coin98** adapter is made.

```xml XML theme={null}
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.connect.demo">
    <queries>
        ...
        <package android:name="coin98.crypto.finance.media" />
    </queries>
    <application>
    </application>
</manifest>
```

```kotlin Kotlin theme={null}
class Coin98ConnectAdapter : BaseWalletConnectAdapter() {

  val coin98 = MobileWCWallet(name = "Coin98", packageName = "coin98.crypto.finance.media", scheme = "coin98")

  override val name: WalletName = coin98.name

  override val icon: IconUrl = "https://registry.walletconnect.com/v2/logo/md/dee547be-936a-4c92-9e3f-7a2350a62e00"

  override val url: WebsiteUrl = "https://coin98.com"

  override val mobileWallet: MobileWCWallet = coin98

  override val readyState: WalletReadyState
      get() {
          if (supportChains.contains(ConnectManager.chainType)) {
              return if (AppUtils.isAppInstalled(
                      ConnectManager.context, coin98.packageName
                  )
              ) WalletReadyState.Installed else WalletReadyState.NotDetected
          }
          return WalletReadyState.Unsupported
      }
}
```


# Flutter (Dart) - Connect
Source: https://developers.particle.network/social-logins/connect/mobile/flutter

Leveraging Particle Connect within applications built using Flutter.

## Particle Connect for Flutter

The **Particle Connect** Flutter SDK facilitates end-to-end integration of **Particle Connect** within applications built using Flutter on either iOS or Android.

**Particle Connect** acts as the "SSO for Web3," aggregating authentication mechanisms from both Web2 through MPC-TSS social logins and Web3 through traditional wallets with WalletConnect, Solana's `wallet-adapter`, and private key imports, thus reducing the barrier to entry within your application.

Instructions and examples for implementing **Particle Connect** within Flutter applications **can be found below**.

## Repository

The **Particle Connect** Flutter SDK is largely open-source and available on [GitHub](https://github.com/Particle-Network/particle-flutter).

Before proceeding with the setup, it’s beneficial to explore the underlying architecture and demos provided in the [repository](https://github.com/Particle-Network/particle-flutter) to build a solid foundation.

<div>
  <img alt="Particle Connect Wallet." />

  <img alt="Particle Connect Wallet." />
</div>

<Warning>
  Using a private key or the mnemonic
  import/generate function is strongly discouraged. If you use it, you need to secure the data yourself,
  as Particle doesn't have a relationship with the imported/generated mnemonic
  or private key.
</Warning>

## Getting Started

Configuring and setting up the **Particle Connect** Flutter SDK is relatively standard, although it differs significantly based on whether you're using **Flutter** on **Android** or **iOS**. However, the setup should be complete for both platforms in just a few minutes.

Regardless of your platform, you must head to the [Particle dashboard](https://dashboard.particle.network) and retrieve your `projectId`, `clientKey`, and `appId`.

These values tie a given implementation to the [Particle dashboard](https://dashboard.particle.network/), enabling configuration, analytics, tracking, etc.

<Note>
  Find a full rundown on how to set up a project and find the required keys in the [dashboard guide](/social-logins/dashboard).
</Note>

### Adding the Particle Connect Flutter SDK to your application

Additionally, regardless of platform, you must add `particle_connect` to your Flutter application. This is a requirement before moving onto platform-specific configuration.

```shell Terminal theme={null}
flutter pub add particle_connect
```

### Android configuration

#### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version : 8.5.1 or higher.
* Gradle Version : 8.9 or higher.

To configure **Particle Connect**, open your `build.gradle` file, typically at `${project_name}/android/app/build.gradle`.

In your `build.gradle` file, add the following four lines to ensure **Particle Connect** is properly configured:

1. `minSdkVersion`. In most cases, this will be set to `23`.
2. `manifestPlaceholders["PN_PROJECT_ID"]`, the `projectId` previously retrieved from the Particle dashboard.
3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the `clientKey` previously retrieved from the Particle dashboard.
4. `manifestPlaceholders["PN_APP_ID"]`, the `appId` previously retrieved from the Particle dashboard.

```groovy build.gradle theme={null}
// Example
defaultConfig {
  applicationId "com.example.particle_auth_test"

  minSdkVersion 23 // Required
  targetSdkVersion flutter.targetSdkVersion
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName

  manifestPlaceholders["PN_PROJECT_ID"] = "EXAMPLE"
  manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "EXAMPLE"
  manifestPlaceholders["PN_APP_ID"] = "EXAMPLE"
}
```

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`.

```groovy build.gradle theme={null}
// Example
compileOptions {
  sourceCompatibility JavaVersion.VERSION_17
  targetCompatibility JavaVersion.VERSION_17
}

kotlinOptions {
  jvmTarget = JavaVersion.VERSION_17.toString()
}

dataBinding {
  enabled = true
}
```

***

### iOS configuration

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`.

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 following:

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

Similar to the Android configuration, you'll need to fill in `PROJECT_UUID` (`projectId`), `PROJECT_CLIENT_KEY`, and `PROJECT_APP_UUID` (`appId`) with the corresponding values retrieved from the [Particle dashboard](https://dashboard.particle.network).

Next, you'll need to head over to your `AppDelegate.swift` file to add an import of `ParticleConnect`.

```swift theme={null}
import 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.

```swift theme={null}
override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
  if ParticleConnect.handleUrl(url) {
      return true
  } else {
      return super.application(app, open: url, options: options)
  }
}
```

To wrap up, you'll need to configure your application's scheme URL. To do so, select your application from "TARGETS" under the "Info" section, then click "+" to add a URL type.

This should be set to "pn" + your `projectId` (retrieved and configured prior), resulting in a scheme URL that looks like the following:

```text theme={null}
pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f
```

Then, head over to your `Info.plist` file and include the following snippet:

```xml Info.plist theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
	<string>metamask</string>
	<string>phantom</string>
	<string>bitkeep</string>
	<string>imtokenv2</string>
	<string>rainbow</string>
	<string>trust</string>
	<string>zerion</string>
	<string>mathwallet</string>
	<string>oneinch</string>
	<string>awallet</string>
	<string>okex</string>
	<string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>
```

Finally, you must edit your Podfile to ensure that `particle_connect` is correctly imported.

Head over to the [linked guide](https://github.com/Particle-Network/particle-flutter/blob/master/particle-connect/example/ios/Podfile) to complete this if you haven't already.

## Examples of Utilization

### Initialization

Now that you've spun up a project on the [Particle dashboard](https://dashboard.particle.network) and configured your application, you're ready to initialize the SDK itself.

This must happen before the other methods become functional. First, call `ParticleInfo.set` and pass in your `projectId` and client key (`clientKey`). Next, initialization can happen through the `init` function on `ParticleConnect`, which can be imported from `package:particle_connect/particle_connect.dart`.

`init` takes the following parameters:

| Field          | Type            | Description                                                                                                                                                                                                                                                                                                                                                                                                                              |
| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `chainInfo`    | `ChainInfo`     | The primary blockchain and network (e.g., testnet) your application will use. For instance, you might choose `.Ethereum` or `.EthereumSepolia`, depending on the specific network required for your use case.                                                                                                                                                                                                                            |
| `dAppData`     | `DAppMetadata`  | Metadata outlining the description of your application; this should be an instance of `DAppMetadata` with the following parameters: `name`, the name of your project. `icon`, a URL linking to the icon of your project; this should be 512x512, ideally. `url`, the URL of your project's website. `description`, the description of your project, `redirect`, optional, redirect universal link of you project, `verifyUrl`, optional. |
| `env`          | `Env`           | The specific environment to be used. This can be either `.dev`, `.staging`, or `.production`.                                                                                                                                                                                                                                                                                                                                            |
| `rpcUrlConfig` | `RpcUrlConfig?` | Customize the RPC URL.                                                                                                                                                                                                                                                                                                                                                                                                                   |

```dart theme={null}
ParticleInfo.set(projectId, clientKey);

final dappInfo = DappMetaData(
    "Particle Connect",
    "https://connect.particle.network/icons/512.png",
    "https://connect.particle.network",
    "Particle Connect Flutter Demo");
ParticleConnect.init(chainInfo, dappInfo, Env.dev);
ParticleAuthCore.init();
```

Additionally, if you'd like to define multiple chains to be available through **WalletConnect**, you'll need to create an array of `ChainInfo` objects (`chainInfos` in this example) and use it within `ParticleConnect.setWalletConnectV2SupportChainInfos`. E.g.:

```dart theme={null}
List<ChainInfo> chainInfos = <ChainInfo>[ChainInfo.Ethereum];
ParticleConnect.setWalletConnectV2SupportChainInfos(chainInfos);
```

***

### Connect Wallet V2

`ParticleConnect.connectWithConnectKitConfig` is the core method driving **Particle Connect**'s customizable login modal, enabling one-click onboarding.

As detailed below, the parameters available to configure this modal can be found through `ConnectKitConfig`.

| Field                     | Type                          | Description                                                                                                                                                 |   |
| ------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
| `connectOptions`          | `List<ConnectOption>`         | Methods supported for connection, `EMAIL`, `PHONE`, `SOCIAL` and `WALLET`; the order in which these are placed will be reflected within the modal.          |   |
| `socialProviders`         | `List<EnableSocialProvider>?` | Supported social login methods, such as `GOOGLE`, `APPLE` and other social options; the order in which these are placed will be reflected within the modal. |   |
| `walletProviders`         | `List<EnableWalletProvider>?` | Supported wallet providers, such as `MetaMask`, `Trust` and other wallet options; the order in which these are placed will be reflected.                    |   |
| `additionalLayoutOptions` | `AdditionalLayoutOptions`     | Layout options.                                                                                                                                             |   |
| `logo`                    | `String`                      | Image URL or base64 string representing the logo used within the modal.                                                                                     |   |

```dart theme={null}
final config = ConnectKitConfig(
  logo: "", // base64 string or image URL
  connectOptions: [
    ConnectOption.EMAIL,
    ConnectOption.PHONE,
    ConnectOption.SOCIAL,
    ConnectOption.WALLET,
  ], // Changing the order will alter the interface
  socialProviders: [
    EnableSocialProvider.GOOGLE,
    EnableSocialProvider.TWITCH,
    EnableSocialProvider.APPLE,
    EnableSocialProvider.DISCORD,
    EnableSocialProvider.TWITTER,
    EnableSocialProvider.FACEBOOK,
    EnableSocialProvider.GITHUB,
    EnableSocialProvider.MICROSOFT,
    EnableSocialProvider.LINKEDIN,
  ], // Changing the order will alter the interface
  walletProviders: [
    EnableWalletProvider(EnableWallet.MetaMask,
        label: EnableWalletLabel.RECOMMENDED),
    EnableWalletProvider(EnableWallet.OKX),
    EnableWalletProvider(EnableWallet.Trust,
        label: EnableWalletLabel.POPULAR),
    EnableWalletProvider(EnableWallet.Bitget),
    EnableWalletProvider(EnableWallet.WalletConnect),
  ], // Changing the order will alter the interface
  additionalLayoutOptions: AdditionalLayoutOptions(
    isCollapseWalletList: false,
    isSplitEmailAndSocial: true,
    isSplitEmailAndPhone: false,
    isHideContinueButton: false,
  ),
);

final account = await ParticleConnect.connectWithConnectKitConfig(config);
```

***

### Connect Wallet V1 (Legacy)

Acting as the primary method of returning a connection menu for a specific `WalletType`, the `connect` method on `ParticleConnect` will be the primary mechanism for wallet connection within the **Particle Connect** SDK. `ParticleConnect.connect` takes one parameter, the `WalletType` to be requested for connection. Upon calling, the wallet specified in this field will throw an interface initiating the connection.
`WalletType` is an `enum` containing the following:

* `authCore`, social logins through Particle Auth.
* `evmPrivateKey`, custom EVM wallet imports/exports.
* `solanaPrivateKey`, custom Solana wallet imports/exports.
* `metaMask`.
* `rainbow`.
* `trust`.
* `imToken`.
* `bitKeep`.
* `walletConnect`.
* `zerion`.
* `math`.
* `zengo`.
* `alpha`.
* `okx`.
* `phantom`, intended for Solana.

If you're using `authCore`, you'll also need to pass in a `ParticleConnectConfig` object containing:

| Field               | Type                     | Description                                                                                                                                                                                                                                                                           |
| ------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `loginType`         | `LoginType`              | The specific social login to be used. This can be either `.email`, `.phone`, `.google`, `.apple`, `.jwt`, `.facebook`, `.twitter`, `.discord`, `.github`, `.twitch`, `.microsoft` or `linkedin`.                                                                                      |
| `account`           | `String?`                | (Optional) When `type` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. When passing a phone number, it must be in E.164 format. |
| `code`              | `String?`                | (Optional) When `type` is set to either `.email` or `.phone`, you can use the code parameter to pass the verification code.                                                                                                                                                           |
| `supportAuthTypes`  | `List<SupportAuthType>?` | The methods of authentication visible on the authentication popup UI. By default, this will be exclusive to the chosen social login method, although by passing in additional types, you can expand the UI to include the ability to login with those as an alternative to type.      |
| `socialLoginPrompt` | `SocialLoginPrompt?`     | Changes what the OAuth provider prompts a user to do; either `.none`, `.consent`, or `.select_account`. Only Google, Discord and Microsoft support it.                                                                                                                                |
| `loginPageConfig`   | `LoginPageConfig?`       | (Optional) To customize the UI page, contains project name, icon and description.                                                                                                                                                                                                     |

E.g:

```dart theme={null}
// Use social login
final loginPageConfig = LoginPageConfig(
          "https://static.particle.network/wallet-icons/Particle-iOS.png",
          "Flutter Example",
          "Welcome to login");
final config = ParticleConnectConfig(loginType, "user@example.com",
          SupportAuthType.values, SocialLoginPrompt.select_account,
          loginPageConfig: loginPageConfig);
final account = await ParticleConnect.connect(WalletType.authCore, config: config);

// Use MetaMask or other supported wallet
final account = await ParticleConnect.connect(WalletType.metaMask)
```

***

### Disconnect

Once a user has been connected, entering an active session, you'll have the ability to disconnect them from your application programmatically through `ParticleConnect.disconnect`, which requires a targeted `WalletType` and `address` (`publicAddress` in this case). This pair dictates that the specific session (user) be disconnected. E.g.:

```dart theme={null}
String result = await ParticleConnect.disconnect(WalletType.authCore, publicAddress);
```

***

### Is Connected

Another standard method is `ParticleConnect.isConnected`, returning a Boolean representing whether or not a user (defined by a paired `WalletType` and `address`) is currently connected to your application. E.g.:

```dart theme={null}
bool isConnected = await ParticleConnect.isConnected(WalletType.authCore, publicAddress);
```

***

### Get Accounts

Within an active session, you can retrieve the accounts (addresses) that belong to a specific `WalletType` (connection mechanism). This is done through `getAccounts` and returns an array of addresses within the current session associated with a given `WalletType`. E.g.:

```dart theme={null}
List<Account> accounts = await ParticleConnect.getAccounts(walletType);
```

***

### Sign Message (EIP191)

A simple message (UTF-8 string) can be signed on both EVM & Solana through `ParticleConnect.signMessage`, passing in the `WalletType`, `address` (`publicAddress` in this example), and the `message` in question. `message` should either be a hex-encoded string for EVM, or a base58 string for Solana. E.g.:

```dart theme={null}
String signature = await ParticleConnect.signMessage(WalletType.authCore, publicAddress, message);
```

***

### Sign Transaction

For **Solana**, as an alternative to `signAndSendTransaction`, you can sign a given transaction without pushing it to the network with `ParticleConnect.signTransaction`, taking `WalletType`, `address` (`publicAddress`), and a base58 `transaction` string representing a structured transaction object.

Alternatively, the plural of this method is `ParticleConnect.signAllTransactions`, which instead takes an array of base58 `transaction` strings to be prompted for signature.

```dart theme={null}
String signature = await ParticleConnect.signTransaction(WalletType.authCore, publicAddress, transaction);

// Plural
String signature = await ParticleConnect.signAllTransactions(WalletType.authCore, publicAddress, transactions);
```

***

### Sign and Send Transaction

Used as the primary mechanism of sending transactions, `ParticleConnect.signAndSendTransaction` takes in a transaction and prompts a user (through a UI corresponding with `WalletType`) for confirmation/signature. Specifically, `ParticleConnect.signAndSendTransaction` takes a `WalletType`, `address` (`publicAddress`), and `transaction` string. For EVM chains, this should be a hex-encoded string, or for Solana, this should be a base58 string. An example of this can be found below.

```dart theme={null}
String txHash = await ParticleConnect.signAndSendTransaction(WalletType.authCore, publicAddress, transaction);
```

***

### Sign Typed Data V4 (EIP712)

Additionally, for **EVM chains**, if standard UTF-8 string signatures aren't enough, you can use `ParticleConnect.signTypedData` to prompt the signature of typed (structured) data adjacent to `eth_signTypedData`. `ParticleConnect.signTypedData` requires `WalletType`, `address` (`publicAddress`), and the `typedData` to be signed. `typedData` should be a hex-encoded string representing a data structure. E.g.:

```dart theme={null}
String signature = await ParticleConnect.signTypedData(walletType, publicAddress, typedDataHex);
```

***

### Import Wallet

If you're using `evmPrivateKey` or `solanaPrivateKey` wallet types, you can import wallets through either a seed phrase or private key. These methods will associate an account instance derived from these keys, allowing utilization within your application.

These can be achieved through either `importPrivateKey` for importing a private key or `importMnemonic` for importing a mnemonic (seed phrase). These methods require the `WalletType` (either `evmPrivateKey` or `solanaPrivateKey`) and the private key/seed phrase to be imported.

Additionally, you can export one of these wallets with `ParticleConnect.exportPrivateKey`, passing in the address (of the `evmPrivateKey` or `solanaPrivateKey` imported/generated wallet) that you'd like to export.

```dart theme={null}
final account = await ParticleConnect.importPrivateKey(WalletType.evmPrivateKey, privateKey);

final account = await ParticleConnect.importMnemonic(WalletType.evmPrivateKey, mnemonic);

// Exportation
String privateKey = await ParticleConnect.exportPrivateKey(WalletType.evmPrivateKey, publicAddress);
```

### (Optional) Custom WalletConnect Project ID

```dart theme={null}
// Call before ParticleConnect.init
ParticleConnect.setWalletConnectProjectId("Your WalletConnect Project ID, from https://cloud.walletconnect.com");
```

***

## Dive Deeper

`particle_connect` includes `particle_auth_core`. If you log in with a **Particle account**, you can access additional functions such as `getUserInfo`, `openAccountAndSecurity`, `hasMasterPassword` and `hasPaymentPassword` and `changeMasterPassword`, you can reference the docs from [Auth SDK reference](/social-logins/auth/mobile-sdks/flutter)


# iOS (Swift) - Connect
Source: https://developers.particle.network/social-logins/connect/mobile/ios

Leveraging Particle Connect within iOS applications.

## Particle Connect for iOS

Integrating Particle Connect into your iOS application allows for seamless onboarding, combining Web2-like and Web3-native experiences. It functions as an **SSO for Web3**, unifying various onboarding methods within a customizable in-house connection modal.

This includes options for Web3 accounts via social logins, Web3 wallets through WalletConnect and Solana's `wallet-adapter`, and direct private key imports. Particle Connect on iOS aims to provide a universally accessible gateway into mobile dApps.

Implementing Particle Connect in your iOS application is straightforward, as detailed below.

## Repository

Before starting the configuration and usage process, explore our demo repository to understand the architecture and implementation flow. You can find the official [Particle Connect iOS SDK repository](https://github.com/Particle-Network/particle-connect-ios).

<div>
  <img alt="Particle Connect Wallet." />

  <img alt="Particle Connect Wallet." />
</div>

<Warning>
  Using a private key or the mnemonic
  import/generate function is strongly discouraged. If you use it, you need to secure the data yourself,
  as Particle doesn't have a relationship with the imported/generated mnemonic
  or private key.
</Warning>

## Getting Started

### Prerequisites

The setup process on iOS can be somewhat lengthy, so to ensure you don't run into any compatibility issues and can get started as soon as possible, you'll need to confirm that your project meets several different prerequisites:

* **Xcode 15.0** or higher
* **CocoaPods 1.14.3** or higher
* **iOS 14** or higher

### Setting up the Particle dashboard

Additionally, before diving in, you'll need to retrieve three universally required values from the [Particle dashboard](https://dashboard.particle.network): your `projectId`, `clientKey`, and `appId`. These directly link your project (instance of Particle Connect) with the Particle dashboard to enable customization, analytics, tracking, etc.

<Note>
  Find a full rundown on how to set up a project and find the required keys in the [dashboard guide](/social-logins/dashboard).
</Note>

### Dependencies

The **Podfile** is a critical element of the **Particle Connect** integration. It's where you declare the numerous dependencies required. This file serves as a roadmap for the pods (packages) to be used within your application.

It's crucial to have a **Podfile** in place. If you don't have one, head over to the root of your project directly to create one. Run the following command to get started:

```shell Terminal theme={null}
pod init
```

Then, within your Podfile, you'll need to throw in a few different dependencies, the specifics of which depend on the functions of Particle Connect that you'd like to use.

## Connect V2

<Note>We recommend trying our [Particle Connect Demo](https://demo.particle.network) to easily customize and design your connect page. After customizing, you can copy the generated code from the Code Snippets section and paste it into the [ConnectKitDemo](https://github.com/Particle-Network/particle-connect-ios/tree/master/ConnectKitDemo) to experience it directly in your app.</Note>

Starting from version 2.0.0, you can quickly integrate the `ParticleConnectKit` SDK, which includes features such as social login, SNS login, third-party wallet login, and customizable login UI.

```ruby Podfile theme={null}
pod 'ParticleConnectKit'
pod 'AuthCoreAdapter'
pod 'ParticleConnect'
pod 'ConnectPhantomAdapter'
pod 'ConnectWalletConnectAdapter'
pod 'ConnectCommon'
```

## Connect V1 (Legacy)

1. Regardless of specific functions, you'll need `ConnectCommon` and `ParticleConnect`, alongside `AuthCoreAdapter`.
2. If you'd like to support importing (or generating fresh) wallets on EVM chains, you'll need `ConnectEVMAdapter`.
   1. To do the same on Solana, use `ConnectSolanaAdapter`.
3. To support connection with Phantom (on Solana), you'll need to use `ConnectPhantomAdapter`
4. For general WalletConnect-based connection, you can use `ConnectWalletConnectAdapter`:

```ruby Podfile theme={null}
pod 'ConnectCommon'
pod 'ParticleConnect'
pod 'ConnectWalletConnectAdapter'
pod 'ConnectEVMAdapter'
pod 'ConnectSolanaAdapter'
pod 'ConnectPhantomAdapter'
pod 'AuthCoreAdapter'
```

With this set, you can simply run the following command to ensure changes are saved:

```shell Terminal theme={null}
pod install --repo-update
open your-project.xcworkspace
```

Before continuing, paste the following code into your Podfile if it is not already present; this is required for utilizing Particle Connect. Otherwise, you'll encounter issues.

```ruby theme={null}
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
    config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
      end
    end
end
```

### Configuration

Now that you've retrieved your `projectId`, `clientKey`, and `appId` from the Particle dashboard and also set up your Podfile, it's time to move on to the core configuration of your project before diving into examples of utilization. To begin this process, configure a `ParticleNetwork-Info.plist` file.

Since it's likely not already present, head to the root of your project and make a blank file, `ParticleNetwork-Info.plist`

Within this file, you must enter the authentication credentials retrieved from the Particle dashboard. You can do this through the structure below:

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

Additionally, head over to your `UIApplicationDelegate`. You'll need to import the various libraries previously declared within your Podfile at the top of the file. An example of this can be seen below:

```swift theme={null}
import AuthCoreAdapter
import ConnectCommon
import ConnectPhantomAdapter
import ConnectWalletConnectAdapter
import ParticleNetworkBase
import ParticleNetworkChains
import ParticleConnect
```

### Initialization

Now that these are set, you'll need to initialize Particle Connect itself (within `UIApplicationDelegate`). Particle Connect will not function until initialization is complete (and valid). Essentially, initialization involves declaring specific imported adapters, the chain to be used, and application metadata.

Specifically, `ParticleConnect.initialize` takes the following parameters:

| Field       | Type               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ----------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `env`       | `DevEnvironment`   | The specific environment to be used. This can be either `.debug`, `.staging`, or `.production`; it should be set to `.production` when released.                                                                                                                                                                                                                                                                                                                     |
| `chainInfo` | `ChainInfo`        | The primary chain to be used within your application. It should include an overall blockchain and a specific network. In this example, it's `.ethereum`(alternatively, it could be `.ethereumSepolia`, and so on).                                                                                                                                                                                                                                                   |
| `dAppData`  | `DAppMetadata`     | Metadata outlining the description of your application; this should be an instance of `DAppMetadata` with the following parameters: `name`, the name of your project. `icon`, a URL linking to the icon of your project; this should be 512x512, ideally. `url`, the URL of your project's website. `description`, the description of your project, `redirectUniversalLink`, optional, redirect universal link for your project, default is `DAppMetadata.standard`. |
| `adapters`  | `[ConnectAdapter]` | You'll need to pass a list of adapters to be offered within the connection modal. This can be defined as a simple array containing various imported adapters (such as `AuthCoreAdapter`, `MetaMaskConnectAdapter`, etc.)                                                                                                                                                                                                                                             |

An **example** of initialization can be found below.

```swift theme={null}
var adapters: [ConnectAdapter] = [
       AuthCoreAdapter(),
       WalletConnectAdapter(),
       MetaMaskConnectAdapter(),
       PhantomConnectAdapter(),
       ImtokenConnectAdapter(),
       BitgetConnectAdapter(),
       RainbowConnectAdapter(),
       TrustConnectAdapter(),
		   ZerionConnectAdapter(),
       MathConnectAdapter(),
       Inch1ConnectAdapter(),
       ZengoConnectAdapter(),
       AlphaConnectAdapter(),
       OKXConnectAdapter()
       ]

ParticleConnect.initialize(env: .debug, chainInfo: .ethereumSepolia, dAppData: .standard, adapters: adapters)
```

### Scheme Configuration

The final step in setting up your iOS project is configuring a scheme URL and `LSApplicationQueriesSchemes` within your application. Beginning with the scheme URL, add the following to your dApp's `application(_:open:options:)` method:

```swift theme={null}
return ParticleConnect.handleUrl(url)
```

From there, you'll need to configure the scheme URL itself; select your application target within the "Info" section, add a URL type, and include the scheme. **This scheme should be `pn` added to your `appId`.**

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`.

With the scheme URL configured, you'll also need to head into `info.plist` and add `LSApplicationQueriesSchemes` according to your specific utilization of Web3 wallets (not Particle Auth, but independent wallet adapters). An example of this can be seen below (each of these is optional and dependent upon your given implementation)

```xml Info.plist theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>phantom</string>
<string>bitkeep</string>
<string>imtokenv2</string>
<string>rainbow</string>
<string>trust</string>
<string>zerion</string>
<string>mathwallet</string>
<string>oneinch</string>
<string>awallet</string>
<string>okex</string>
<string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>
```

## Examples of Utilization

### Utilization of WalletConnect V2

You can set specific chains within WalletConnect (`chainInfo` structures) with `setWalletConnectV2SupportChainInfos`. An example of this can be found below.

```swift theme={null}
ParticleConnect.setWalletConnectV2SupportChainInfos([.ethereum, .polygon])
```

### Get all Wallet Adapter

To retrieve all wallet adapters either in total, by `chainType` (`evm` or `solana`), or by address, you'll need to call one of the following methods:

* `ParticleConnect.getAllAdapters`, returns all adapters (for every address and `chainType`).
* `ParticleConnect.getAdapters`, retrieves adapters by `chainType` (`evm` or `solana`).
* `ParticleConnect.getAdapterByAddress`, returns all adapters associated with a specific (user) public address.

```swift theme={null}
let adapter = ParticleConnect.getAllAdapters()
            .filter { $0.walletType == .authCore }.first

let adapters = ParticleConnect.getAdapters(chainType: .evm)

let adapters = ParticleConnect.getAdapterByAddress(publicAddress: address)
```

### Get Adapter Accounts

`adapter.getAccounts` returns a list of accounts associated/connected with a specific adapter. `adapter` is an instance of a given wallet adapter, such as `AuthCoreAdapter`. Each adapter has a `getAccounts` method by default. Alternatively, you'll need to call `adapter.getSmartAccounts` to retrieve smart accounts associated with a given adapter. E.g.:

```swift theme={null}
let accounts = adapter.getAccounts()

// Alternatively
let smartAccounts = try await adapter.getSmartAccounts()
```

### Switch Chain

Often, the primary chain initially set through `initialize` won't be the *only* chain used within your application; thus, to account for this and change the primary chain post-initialization, you can call `ParticleNetwork.setChainInfo`, passing in a `chainInfo` object, as shown in the example below.

`WalletType.authCore` comes from Particle Auth Core and supports EVM and Solana.

If you need a switch chain for one of the two accounts and need to switch from Solana to EVM or EVM to Solana, you can call `(adapter as! ParticleAdapter).switchChain`.

```swift theme={null}
ParticleNetwork.setChainInfo(.ethereum)

// Switch chains, such as between Solana and Ethereum.
// Ensure the adapter.walletType is authCore or particle.
let result = try await (adapter as! ParticleAdapter).switchChain(.ethereum).value
```

### Connect Wallet V2

`ParticleConnectUI.connect` is a one-click login function that integrates a customizable login UI. The parameter config can be derived from `ConnectKitConfig`.

`ConnectKitConfig.init` allows these parameters:

| Field                     | Type                      | Description                                                                                                                   |
| ------------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `connectOptions`          | `[ConnectOption]`         | `connectOptions` supports `email`, `phone`, `social` and `wallet`, the sort order is used for the Connect Kit login UI.       |
| `socialProviders`         | `[EnableSocialProvider]`  | `socialProviders` supports `google`, `apple` and other social options, the sort order is used for the Connect Kit login UI.   |
| `walletProviders`         | `[EnableWalletProvider]`  | `walletProviders` supports `metamask`, `trust` and other wallet options, the sort order is used for the Connect Kit login UI. |
| `additionalLayoutOptions` | `AdditionalLayoutOptions` | Layout options.                                                                                                               |
| `designOptions`           | `DesignOptions`           | Design options.                                                                                                               |

```swift theme={null}
let config = ConnectKitConfig(connectOptions: connectOptions, socialProviders: socialProviders, walletProviders: walletProviders, additionalLayoutOptions: additionalLayoutOptions, designOptions: designOptions)
let account = try await ParticleConnectUI.connect(config: config).value
```

### Connect Wallet V1 (Legacy)

Specific adapters can initiate the connection (through an initialization in a variable such as `adapter`) with the `connect` method. This method will display a modal facilitating connection depending on the specific adapter.

For `EVMConnectAdapter` and `SolanaConnectAdapter`, the 'connect' method will initiate a connection and generate a fresh account (public and private key pair). Otherwise, the specific connection flow will be dependent upon the adapter in which `connect` is called. E.g.:

| Field    | Type             | Description                                                                                                                                                                                                                                       |
| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `config` | `ConnectConfig?` | The `ConnectConfig` will only be effective when `adapter.walletType` is `.authCore`. You can construct a valid object using the subclass `ParticleAuthCoreConfig`. When `adapter.walletType` is another value, you can pass `ConnectConfig.none`. |

`ParticleAuthCoreConfig` construct method `init` support the following parameters:

| Field               | Type                 | Description                                                                                                                                                                                                                                                                      |
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `loginType`         | `LoginType`          | The specific social login to be used. This can be either `.email`, `.phone`, `.google`, `.apple`, `.jwt`, `.facebook`, `.twitter`, `.discord`, `.github`, `.twitch`, `.microsoft` or `linkedin`.                                                                                 |
| `supportAuthType`   | `[SupportAuthType]`  | The methods of authentication visible on the authentication popup UI. By default, this will be exclusive to the chosen social login method, although by passing in additional types, you can expand the UI to include the ability to login with those as an alternative to type. |
| `account`           | `String?`            | (Optional) when `loginType` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. The phone number must be in E.164 format.      |
| `code`              | `String?`            | (Optional) when `loginType` is set to either `.email` or `.phone`, you can use the code parameter to pass the verification code.                                                                                                                                                 |
| `socialLoginPrompt` | `SocialLoginPrompt?` | (Optional) either `.none`, `.consent`, or `.select_account`                                                                                                                                                                                                                      |
| `loginPageConfig`   | `LoginPageConfig?`   | (Optional) to customize the UI page, contains project name, icon and description.                                                                                                                                                                                                |

<Tip>You can use your existing user base or authentication method with Particle Connect through JWT. This way, your users can still log in with their current accounts. Check the [JWT guide](/social-logins/configuration/auth/jwt) to learn how to configure JWT. </Tip>

```swift theme={null}

// Retrieve and use MetaMask adapter
let adapter = ParticleConnect.getAllAdapters().first { $0.walletType == .metaMask }!
let account = try await adapter.connect(ConnectConfig.none).value

// Retrieve and use Particle (social login) adapter
let adapter = ParticleConnect.getAllAdapters().first { $0.walletType == .authCore }!
let account = try await adapter.connect(ParticleAuthCoreConfig(loginType: .google, socialLoginPrompt: .selectAccount)).value
```

Only after connecting with **Particle Connect** is successful can you retrieve `userInfo` by calling the `(adapter as! ParticleAdapter).getUserInfo` method; other wallet types can't call this method.

```swift theme={null}
let userInfo = (adapter as! ParticleAdapter).getUserInfo
```

### Disconnect Wallet

Alternatively, if a user has already connected their wallet, you can use `disconnect` as the primary method to disconnect a user within an active session. This will be relatively universal across adapters. E.g.:

| Field           | Type     | Description                                                                                                                                                          |
| --------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String` | The connected public address, if `adapter.WalletType` is `.authCore`, you can pass an empty string, for other walletTypes, you need pass a connected public address. |

```swift theme={null}
let result = try await adapter.disconnect(address).value
```

### Is Connected

Another quite important method is `isConnected`, returning a Boolean based on whether or not a given session (user) is currently connected to a wallet (through the specific adapter instance). `adapter.isConnected` takes a given public address and returns `true` or `false` depending on its connection status. E.g.:

| Field           | Type     | Description                                                                                                                                                               |
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String` | The connected public address, if `adapter.WalletType` is `.authCore`, you can pass an empty string, for other `walletTypes`, you need to pass a connected public address. |

```swift theme={null}
let result = adapter.isConnected(publicAddress: address)
```

<Note>
  <p>If the account originates from `.authCore`, it's recommended to directly use `auth.isConnected` to check the user's login status.</p>

  ```swift theme={null}
  import ParticleAuthCore

  let auth = Auth()
  let result = try await auth.isConnected()

  ```
</Note>

### Import Wallet

If you're using `EVMConnectAdapter` or `SolanaConnectAdapter`, you can import wallets through either a seed phrase or private key.

These methods will associate an account instance derived from these keys, allowing utilization within your application. These can be achieved through either `importWalletFromPrivateKey` for importing a private key or `importWalletFromMnemonic` for importing a mnemonic (seed phrase).

Additionally, you can export one of these wallets with `adapter.exportWalletPrivateKey`, passing in the address (of the `EVMConnectAdapter` or `SolanaConnectAdapter` imported/generated wallet) that you'd like to export.

<Note>
  <p>This is not the import/export of wallets within Particle Auth; Particle Network's MPC-TSS accounts do not support importing or exporting private keys.</p>
  <p>This is specific to a custom account connection with Particle Connect.</p>
</Note>

```swift theme={null}
let account = try await adapter.importWalletFromPrivateKey(privateKey).value

let account = try await adapter.importWalletFromMnemonic(mnemonic).value

// Exportation
let privateKey = try await adapter.exportWalletPrivateKey(publicAddress: address).value
```

### Sign and Send Transaction

To initiate a signature and complete an on-chain settlement, use `adapter.signAndSendTransaction`—the primary method for sending transactions through **Particle Connect** for **EVM** and **Solana** networks. When you call this method, a popup will appear in the specified adapter, prompting the user to provide a signature. Once the user confirms, the transaction is immediately sent to the network.

The `adapter.signAndSendTransaction` method accepts the following parameters:

| Field           | Type     | Description                                                                                                                                                               |
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String` | The connected public address, if `adapter.WalletType` is `.authCore`, you can pass an empty string, for other wallet\`Types, you need to pass a connected public address. |
| `transaction`   | `String` | An EVM transaction is expressed as a hexadecimal string, a Solana transaction is expressed as a base58 string.                                                            |

```swift theme={null}
let txHash = try await adapter.signAndSendTransaction(publicAddress: address, transaction: transaction).value
```

You can create an EVM transaction with class `TxData` or `FeeMarketEIP1559TxData`, and also you can use another SDK, `ParticleWalletAPI`, to create a transaction, you can reference the examples from [Wallet SDK reference](/wallet/mobile/ios)

### Sign Transaction

`adapter.signTransaction` is a **Solana-specific** method for signing a transaction without pushing it to the network. Specifically, this method requires the following parameters:

| Field           | Type     | Description                                                                                                                                                               |
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String` | The connected public address, if `adapter.WalletType` is `.authCore`, you can pass an empty string, for other `walletTypes`, you need to pass a connected public address. |
| `transaction`   | `String` | A base58 string representing a transaction object.                                                                                                                        |

This will return a popup requesting confirmation to either `SolanaConnectAdapter` or `PhantomConnectAdapter` depending on which you've defined as `adapter` (or a custom adapter you've set up). E.g.:

```swift theme={null}
let signed = try await adapter.signTransaction(publicAddress: address, transaction: transaction).value

// Alternatively, the plural form of this method, takes a list of transactions
let signeds = try await adapter.signAllTransactions(publicAddress: address, transactions: transactions).value
```

### Sign Message (EIP191)

To sign a basic UTF-8 message (string), you can use `adapter.signMessage` to prompt the user for a signature alongside the message in question. `adapter.signMessage` takes the following parameters:

| Field           | Type     | Description                                                                                                                                                                      |
| --------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String` | The connected public address, if `adapter.WalletType` is `.authCore`, you can pass an empty string, for other `walletTypes`, you need to pass a connected public address.        |
| `message`       | `String` | The message you'd like the user to sign; for EVM, this should be a hex-encoded string (prefixed by '0x'), while for Solana, you can pass a standard string (no encoding needed). |

```swift theme={null}
let signed = try await adapter.signMessage(publicAddress: address, message: message).value
```

### Sign Typed Data V4 (EIP712)

As an alternative to `signMessage`, for **EVM chains**, you can request that a user signs typed (structured) data rather than purely a raw string. You can use `adapter.signTypedData` (equivalent to `eth_signTypedData` V4) to do this. This takes the following parameters:

| Field           | Type     | Description                                                                                                                                                               |
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `publicAddress` | `String` | The connected public address, if `adapter.WalletType` is `.authCore`, you can pass an empty string, for other `walletTypes`, you need to pass a connected public address. |
| `data`          | `String` | The typed data to be signed; see the [Web (JavaScript/TypeScript)](/social-logins/connect/desktop/web) page for additional guidance.                                      |

```swift theme={null}
let signed = try await adapter.signTypedData(publicAddress: publicAddress, data: message).value
```

### (Optional) Custom WalletConnect Project ID

```swift theme={null}
ParticleConnect.setWalletConnectV2ProjectId("WalletConnect V2 Project ID")
```

### Custom WalletConnect Adapter

There may be cases where the existing selection of adapters doesn't include a wallet you'd like to be featured within Particle Connect.

Creating a custom adapter (using `WalletConnectAdapter` as the parent class) is quite simple in this situation. Doing so will require a structure similar to the example below, in which a custom Coin98 adapter is made by overriding `walletType` with a custom `AdapterInfo` instance.

```swift theme={null}
public class Coin98WalletConnectAdapter: WalletConnectAdapter {
  public override var walletType: WalletType {
      return WalletType.custom(info: AdapterInfo.init(name: "Coin98",
                   url: "https://coin98.com/",
                   icon: "https://registry.walletconnect.com/v2/logo/md/dee547be-936a-4c92-9e3f-7a2350a62e00",
                   redirectUrlHost: "coin98",
                   supportChains: [.evm],
                   deepLink: "coin98://", // Requires either universal link or scheme
                   scheme: "coin98://"))
  }
}
```

***

## Dive Deeper

`ParticleConnect` includes `ParticleAuthCore`. If you log in with a Particle account, you can access additional functions such as `getUserInfo`, `openAccountAndSecurity`, `hasMasterPassword` and `hasPaymentPassword` and `changeMasterPassword`, you can reference the docs from [Auth SDK reference](/social-logins/connect/mobile/ios).


# React Native (JavaScript) - Connect
Source: https://developers.particle.network/social-logins/connect/mobile/react

Leveraging Particle Connect within applications built using React Native.

## Particle Connect for React Native

**Particle Connect** fully supports **React Native**, facilitating unified **Web2** and **Web3** onboarding within mobile applications leveraging React Native.

It is a custom connection modal meant to act as an **SSO for Web3**, aggregating social logins and traditional Web3 wallets (even using imported accounts) within one interface, enabling universal accessibility for both Web3 natives and typical Web2 consumers.

Details on installing, configuring, and utilizing the **Particle Connect** React Native SDK **are below**.

## Repository

The ['particle-react-native ' GitHub repository](https://github.com/Particle-Network/particle-react-native) includes a demo showcasing the utilization of the Particle Connect React Native SDK, alongside the source code powering the SDK. Before diving in, consider reviewing the code within [this repository](https://github.com/Particle-Network/particle-react-native/tree/master/particle-connect) for an initial understanding of the underlying architecture.

<div>
  <img alt="Particle Connect Wallet." />

  <img alt="Particle Connect Wallet." />
</div>

<Warning>
  Using a private key or the mnemonic
  import/generate function is strongly discouraged. If you use it, you need to secure the data yourself,
  as Particle doesn't have a relationship with the imported/generated mnemonic
  or private key.
</Warning>

## Getting Started

The setup process for the **Particle Connect React Native SDK** is relatively straightforward but expectedly deviates depending on the platform.

Before diving into the platform-specific configuration, all Particle Connect (& Auth) SDKs require three standard initialization values: `projectId`, `clientKey`, and `appId`. These can be retrieved from the [Particle dashboard](https://dashboard.particle.network).

<Note>
  Find a full rundown of the setup process in the [dashboard guide](/social-logins/dashboard).
</Note>

### Adding the Particle Connect React Native SDK to your application

Another constant in the setup process is the installation of `@particle-network/rn-connect`, either through npm or Yarn, depending on your preference, as is shown below.

```shell Terminal theme={null}
npm install @particle-network/rn-connect

// Or

yarn add @particle-network/rn-connect
```

### Android configuration

If you're planning on using Android for your React Native application, ensure that you meet the following prerequisites (otherwise, expect issues or non-functionality):

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version : 8.5.1 or higher.
* Gradle Version : 8.9 or higher.(before react-native:0.75.2, use 8.8)

Once you've made sure your project meets these requirements, you'll need to move on and define the configuration above values (`projectId`, `clientKey`, and `appId`) within your `build.grade` file (generally found at `${project name}/android/app/build.gradle`). These directly link your application's instance of Particle Connect with the [dashboard](https://dashboard.particle.network).

Specifically, within `build.gradle`, you'll need to set four different values:

1. `dataBinding`, this should be enabled with `enabled = true`.
2. `manifestPlaceholders["PN_PROJECT_ID"]`, the `projectId` previously retrieved from the Particle dashboard.
3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the `clientKey` previously retrieved from the Particle dashboard.
4. `manifestPlaceholders["PN_APP_ID"]`, the `appId` previously retrieved from the Particle dashboard.

```groovy build.gradle theme={null}
android {
  ...
  defaultConfig {
      ......
      manifestPlaceholders["PN_PROJECT_ID"] = "Your project ID"
      manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "Your client key"
      manifestPlaceholders["PN_APP_ID"] = "Your app ID"
  }

  dataBinding {
      enabled = true
  }

}
```

***

### iOS configuration

Alternatively, if you plan to use iOS for your React Native application, the underlying setup process differs slightly. Before diving in, ensure that your project meets the following requirements:

* **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`.

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 following:

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

Similar to the Android configuration, you'll need to fill in `PROJECT_UUID` (`projectId`), `PROJECT_CLIENT_KEY` (`clientKey`), and `PROJECT_APP_UUID` (`appId`) with the corresponding values retrieved from the [Particle dashboard](https://dashboard.particle.network).

Next, you'll need to head over to your `AppDelegate.swift` file to add an import of `react_native_particle_connect`.

```swift AppDelegate.swift theme={null}
#import <react_native_particle_connect/react_native_particle_connect-Swift.h>
```

Additionally, within your application's `application` method (as shown below), you'll need to include a handler condition derived from `ParticleConnectSchemeManager handleUrl:url`. This should be as simple as a `YES` (true) return upon a true value of `ParticleConnectSchemeManager handleUrl:url`.

```swift AppDelegate.swift theme={null}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  if ([ParticleConnectSchemeManager handleUrl:url] == YES) {
    return YES;
  } else {
    // Other methods
  }
  return YES;
}
```

To wrap up, you'll need to configure your application's scheme URL. To do so, select your application from "TARGETS" under the "Info" section, then click "+" to add a URL type.

This should be set to "pn" + your `projectId` (retrieved and configured prior), resulting in a scheme URL that looks something like the following:

```text theme={null}
pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f
```

Additionally, head over to your `Info.plist` file and include the following snippet.

```xml Info.plist theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
	<string>metamask</string>
	<string>phantom</string>
	<string>bitkeep</string>
	<string>imtokenv2</string>
	<string>rainbow</string>
	<string>trust</string>
	<string>zerion</string>
  <string>mathwallet</string>
  <string>oneinch</string>
  <string>awallet</string>
  <string>okex</string>
  <string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>
```

Finally, you must edit your Podfile to ensure that `particle_connect` is correctly imported. If you haven't already, head over to the [linked guide](https://github.com/Particle-Network/particle-react-native/blob/master/particle-connect/example/ios/Podfile) to complete this

***

## Examples of Utilization

### Initialization

Now that you've configured your project, it's time to move on to initialization. This is required before the rest of the SDK will function. First, you'll need to import `@particle-network/rn-connect`, which generally can be imported in whole as a singular variable (in the example below, `particleConnect`.)

```typeScript theme={null}
import * as particleConnect from '@particle-network/rn-connect';
```

Initialization happens through `init` on your imported instance of `@particle-network/rn-connect`, `particleConnect` in this case. `init` takes the following parameters:

* `chainInfo` contains relevant information that determines the primary chain to be used within Particle Connect. (`ChainInfo` objects, such as `Ethereum`, `Polygon`, etc. can be imported from `@particle-network/chains`)
* `env`, imported from `@particle-network/rn-connect`, and can be either:
* `Env.Production`.
* `Env.Staging`.
* `Env.Dev`.
* `metadata`, an instance of `DappMetaData` containing the following parameters:
* `walletConnectProjectId`, your WalletConnect project ID retrieved from the [WalletConnect dashboard](https://cloud.walletconnect.com).
* `name` is the name of your project.
* `icon`, your project's logo, ideally 512x512.
* `url`, the URL of your project's website.
* `description` is a description of your project.
* `redirect` is a provided redirect that can be left blank.
* `verifyUrl`, a URL for verification, can be left blank.

Additionally, extra chains can be configured for WalletConnect through `setWalletConnectV2SupportChainInfos` and passing in an array of `ChainInfo` objects representing the different chains you'd like to be supported by your instance of WalletConnect. E.g.:

```typeScript theme={null}
const chainInfo: ChainInfo = Ethereum;
    const env = Env.Dev;
    const metadata = {
      walletConnectProjectId: 'Your WalletConnect Project ID',
      url: 'https://connect.particle.network',
      icon: 'https://connect.particle.network/icons/512.png',
      name: 'Particle Connect',
      description: 'Particle Wallet'
    }

particleConnect.init(chainInfo, env, metadata);
particleAuthCore.init();

const chainInfos = [Ethereum, Polygon, EthereumSepolia];
particleConnect.setWalletConnectV2SupportChainInfos(chainInfos);
```

***

### Connect Wallet V2

`particleConnect.connectWithConnectKitConfig` is a one-click login function that can present a customizable login UI. The parameter config can be derived from `ConnectKitConfig`.

`ConnectKitConfig.init` includes the following parameters:

| Field                     | Type                       | Description                                                                                                                                                 |
| ------------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `connectOptions`          | `ConnectOption[]`          | Methods supported for connection, `EMAIL`, `PHONE`, `SOCIAL` and `WALLET`; the order in which these are placed will be reflected within the modal.          |
| `socialProviders`         | `EnableSocialProvider[]?`  | Supported social login methods, such as `GOOGLE`, `APPLE` and other social options; the order in which these are placed will be reflected within the modal. |
| `walletProviders`         | `EnableWalletProvider[]?`  | Supported wallet providers, such as `MetaMask`, `Trust` and other wallet options; the order in which these are placed will be reflected.                    |
| `additionalLayoutOptions` | `AdditionalLayoutOptions?` | Layout options.                                                                                                                                             |
| `logo`                    | `string?`                  | Image URL or base64 string representing the logo used within the modal.                                                                                     |

```typeScript theme={null}
const config = {
      //  You can control the array elements and adjust the order shown in the UI
      connectOptions: [ConnectOption.Email, ConnectOption.Phone, ConnectOption.Social, ConnectOption.Wallet],
      //  You can control the array elements and adjust the order shown in the UI
      socialProviders: [EnableSocialProvider.Google, EnableSocialProvider.Apple, EnableSocialProvider.Twitter, EnableSocialProvider.Discord, EnableSocialProvider.Github],
      //  You can control the array elements and adjust the order shown in the UI
      walletProviders: [{ enableWallet: EnableWallet.MetaMask, label: EnableWalletLabel.Recommended },
      { enableWallet: EnableWallet.OKX, label: EnableWalletLabel.Popular },
      { enableWallet: EnableWallet.Trust, label: EnableWalletLabel.None },
      { enableWallet: EnableWallet.Bitget, label: EnableWalletLabel.None }
      ],

      additionalLayoutOptions: {
        isCollapseWalletList: false,
        isSplitEmailAndSocial: true,
        isSplitEmailAndPhone: false,
        isHideContinueButton: false,
      },
      logo: base64Icon // base64 string or image URL
    };

const accountInfo = await particleConnect.connectWithConnectKitConfig(config);
```

***

### Connect Wallet V1 (Legacy)

To directly connect a user with a given wallet type (throwing a connection menu within the current instance), you'll need to use `connect`. Within `connect`, you'll need to pass in a given `walletType`, an item selected from `WalletType`, imported from `@particle-network/rn-connect`. `WalletType` can be set to any of the following:

* `AuthCore`, Particle Auth Core, an alternative to Particle Auth (`Particle`).
* `EvmPrivateKey`, custom EVM wallet imports/exports.
* `SolanaPrivateKey`, custom Solana wallet imports/exports.
* `MetaMask`.
* `Rainbow`.
* `Trust`.
* `ImToken`.
* `BitKeep`.
* `WalletConnect`.
* `Phantom`, intended for Solana.
* `Zerion`.
* `Math`.
* `Inch1`, 1inch.
* `Zengo`.
* `Alpha`.
* `Bitpie`.
* `OKX`.
* `TokenPocket`, not supported by iOS.

If you're using `AuthCore`, you'll also need to pass in a `ParticleConnectConfig` object containing:

| Field               | Type                 | Description                                                                                                                                                                                                                                                                           |
| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `loginType`         | `LoginType`          | The specific social login to be used. This can be either `.email`, `.phone`, `.google`, `.apple`, `.jwt`, `.facebook`, `.twitter`, `.discord`, `.github`, `.twitch`, `.microsoft` or `linkedin`.                                                                                      |
| `account`           | `string?`            | (Optional) When `type` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. When passing a phone number, it must be in E.164 format. |
| `code`              | `string?`            | (Optional) when `type` is set to either `.email` pr `.phone`, you can use the code parameter to pass the verification code.                                                                                                                                                           |
| `supportAuthType`   | `SupportAuthType[]`  | The methods of authentication visible on the authentication popup UI. By default, this will be exclusive to the chosen social login method, although by passing in additional types, you can expand the UI to include the ability to login with those as an alternative to type.      |
| `socialLoginPrompt` | `SocialLoginPrompt?` | (Optional) either `.None`, `.Consent`, or `.SelectAccount`                                                                                                                                                                                                                            |
| `loginPageConfig`   | `LoginPageConfig?`   | (Optional) Changes what the OAuth provider prompts a user to do; either `.none`, `.consent`, or `.select_account`. Only Google, Discord and Microsoft support it.                                                                                                                     |

E.g:

```typeScript theme={null}
const connectConfig = {
  loginType: LoginType.Google,
  supportAuthType: [SupportAuthType.Phone, SupportAuthType.Google, SupportAuthType.Apple],
  socialLoginPrompt: SocialLoginPrompt.SelectAccount,
  loginPageConfig: {
    projectName: "React Native Example",
    description: "Welcome to login",
    imagePath: "https://connect.particle.network/icons/512.png"
  }
};

const result = await particleConnect.connect(
  WalletType.AuthCore,
  connectConfig
);
```

***

### Disconnect

Additionally, after connecting and initiating an active session, you can programmatically disconnect a given user (defined by an address within a specified `WalletType`) from your application through `disconnect`. This requires both the relevant `WalletType` and associated address as parameters. E.g.:

```typeScript theme={null}
const result = await particleConnect.disconnect(walletType, publicAddress);
```

***

### Is Connected

Often, it helps to know whether or not a user is connected. This can be retrieved as a Boolean indicating connection status by calling `isConnected` and passing in the corresponding `WalletType` and address. E.g.:

```typeScript theme={null}
const result = await particleConnect.isConnected(walletType, publicAddress);
```

***

### Sign Message (EIP191)

A simple message (UTF-8 string) can be signed on both EVM & Solana through `ParticleConnect.signMessage`, passing in the `WalletType`, `address` (`publicAddress` in this example), and the `message` in question. `message` should either be a hex-encoded string for EVM, or a base58 string for Solana. E.g.:

```typeScript theme={null}
const signature = await particleConnect.signMessage(walletType, publicAddress, message);
```

***

### Sign Transaction

For **Solana**, as an alternative to `signAndSendTransaction`, you can sign a given transaction without pushing it to the network with `particleConnect.signTransaction`, taking `WalletType`, `address` (`publicAddress`), and a base58 `transaction` string representing a structured transaction object.

Alternatively, the plural of this method is `particleConnect.signAllTransactions`, which instead takes an array of base58 `transaction` strings to be prompted for signature.

```typeScript theme={null}
const signature = await particleConnect.signTransaction(WalletType.authCore, publicAddress, transaction);

// Plural
const signature = await particleConnect.signAllTransactions(WalletType.authCore, publicAddress, transactions);
```

***

### Sign and Send Transaction

As the primary mechanism of sending transactions, `particleConnect.signAndSendTransaction` takes in a transaction and prompts a user (through a UI corresponding with `WalletType`) for confirmation/signature.

Specifically, `particleConnect.signAndSendTransaction` takes a `WalletType`, `address` (`publicAddress`), and `transaction` string. For EVM chains, this should be a hex-encoded string Solana and a base58 string. An example of this can be found below.

```typeScript theme={null}
const txHash = await particleConnect.signAndSendTransaction(WalletType.authCore, publicAddress, transaction);
```

***

### Sign Typed Data V4 (EIP712)

Additionally, for **EVM chains**, if standard UTF-8 string signatures aren't enough, you can use `ParticleConnect.signTypedData` to prompt the signature of typed (structured) data adjacent to `eth_signTypedData`.

`ParticleConnect.signTypedData` requires `WalletType`, `address` (`publicAddress`), and the `typedData` to be signed. `typedData` should be a hex-encoded string representing a data structure. E.g.:

```typeScript theme={null}
const signature = await particleConnect.signTypedData(walletType, publicAddress, typedData)
```

***

### Import Wallet

If you're using the 'EvmPrivateKey`or`SolanaPrivateKey\` wallet types, you can import wallets through either a seed phrase or private key. These methods will associate an account instance derived from these keys, allowing utilization within your application.

These can be achieved through either `importPrivateKey` for importing a private key, or `importMnemonic` for importing a mnemonic (seed phrase). These methods require the `WalletType` (either `EvmPrivateKey` or `SolanaPrivateKey`) and the private key/seed phrase to be imported.

Additionally, you can export one of these wallets with `exportPrivateKey`, passing in the address (of the `EvmPrivateKey` or `SolanaPrivateKey` imported/generated wallet) that you'd like to export.

```typeScript theme={null}
const account = await particleConnect.importPrivateKey(walletType, privateKey);

const account = await particleConnect.importMnemonic(walletType, mnemonic);

const privateKey = await particleConnect.exportPrivateKey(walletType, publicAddress);
```

***

### Get Accounts

Within an active session, you can retrieve the accounts (addresses) that belong to a specific `WalletType` (connection mechanism). This is done through `getAccounts` and returns an array of addresses within the current session associated with a given `WalletType`. E.g.:

```typeScript theme={null}
const accounts = await particleConnect.getAccounts(walletType);
```

### (Optional) Custom WalletConnect Project ID

```typeScript theme={null}
// Call before particleConnect.init
particleConnect.setWalletConnectProjectId("Your WalletConnect Project ID")
```

***

## Dive Deeper

`@particle-network/rn-connect` includes `@particle-connect/rn-auth-core`.

If you log in with a Particle account, you can access additional functions such as `getUserInfo`, `openAccountAndSecurity`, `hasMasterPassword` and `hasPaymentPassword` and `changeMasterPassword`. You can also reference the docs from [Auth SDK reference](/social-logins/auth/mobile-sdks/react).


# Unity (C#) - Connect
Source: https://developers.particle.network/social-logins/connect/mobile/unity

Leveraging Particle Connect within mobile applications built on Unity

## Particle Connect for Unity

**Particle Connect** acts as a central wallet connection mechanism within games built on **Unity**.

With it, you can onboard users into a functional account through social logins (via **Particle Auth**) or typical Web3 wallets (via WalletConnect, Solana's `wallet-adapter`, or private key imports). This creates a Web2-adjacent login experience while retaining unified compatibility with existing popular Web3 wallets.

**Particle Connect** has a dedicated **Unity** SDK for integration; the configuration process and examples of utilization **are outlined below.**

## Repository

Before diving in, all of the Particle Network **Unity** SDKs (for **Particle Auth** and **Particle Connect**) are publicly available and viewable through the [official repository](https://github.com/Particle-Network/particle-unity). Feel free to look at the underlying architecture and demos showcasing end-to-end implementation to gain an initial understanding of working with **Particle Connect** on **Unity**.

<div>
  <img alt="Particle Connect Wallet." />

  <img alt="Particle Connect Wallet." />
</div>

## Getting Started

### Prerequisites

Your **Unity** project must meet several requirements to avoid compatibility issues. These requirements will be, in some capacity, dependent on the platform that you've decided to use. They are as follows:

* **Unity 2022.3.43f1** or higher.
* If you're using iOS:
  * **Xcode 15.0** or higher.
  * **CocoaPods 1.14.3** or higher.
  * **iOS 14** or higher.
* If you're using Android:
  * minSdkVersion **23** or higher.
  * compileSdkVersion, targetSdkVersion **34** or higher.
  * JavaVersion **17**.
  * [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
  * Android Gradle Plugin Version : 8.5.1 or higher.
  * Gradle Version : 8.9 or higher.

### Setting up the Particle dashboard

Once you've ensured that your project meets the above prerequisites, you'll also need three key values from the [Particle dashboard](https://dashboard.particle.network): your `projectId`, `clientKey`, and `appId`.

These connect your **Unity** project directly with the Particle dashboard, enabling customization, analytics, tracking, etc.

<Note>
  Find a rundown on how to set up a project and find the required keys on the [dashboard guide](/social-logins/dashboard).
</Note>

### Configuration

With these values in hand, you can move on to initial configuration and dependency management, which will vary in complexity depending on the platform used. To begin, for both iOS and Android, you'll need to download and install the Particle Unity package, which will include the necessary files for both Particle Connect and Particle Auth.

Head over to the [GitHub repository](https://github.com/Particle-Network/particle-unity/releases), and download the latest release (`.unitypackage`), then import this into your project.

#### iOS configuration

If you're building a Unity game on iOS, you must follow a specific configuration process to ensure that Particle Connect functions. The first step within this process is to set up a scheme URL within the Unity editor.

1. Head into the [iOS Player Settings](https://docs.unity3d.com/Manual/class-PlayerSettingsiOS.html) menu (`Edit` -> `Project Settings` -> `Player Settings` -> `iOS`).
2. From here, select `Other`, then scroll down to `Configuration`.
3. Open the `Supported URL schemes` section, and within the `Element 0` field, paste in your `projectId` with a prefix of `pn`.
   1. For example, if your `projectId` (from the [Particle dashboard](https://dashboard.particle.network)) is something like `63bfa427-cf5f-4742-9ff1-e8f5a1b9828f`, then the scheme URL, in this case, would be `pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f`

<Note>
  <p>Remove other services, if needed</p>

  <p />

  <p>
    Within `ParticleNetworkIOSBridge.cs`, you'll have a number of services
    included in the SDK:
  </p>

  <p />

  <p>- `ParticleNetworkBase` - required universally.</p>
  <p>- `ParticleAuthCore` - required for Particle Auth Core.</p>
  <p>- `ParticleConnect`- required for Particle Connect.</p>

  <p>
    * `ParticleWalletGUI` - usage of the Particle Wallet UI, contains all
      services.
  </p>

  <p>- `ParticleAA` - usage of the Particle AA, contains all services.</p>
</Note>

You'll also need to configure your Podfile if you haven't already. To do so, go to the root of your project directory and run `pod init`; this will generate a Podfile.

Open this Podfile, and insert the specific pods (services) you'd like to use within your project. In this case, `ParticleConnect` and `CommonConnect` will generally suffice, but additional services can be added if needed.

Additionally, you'll need to paste in the code snippet below for installation handling:

```ruby Podfile theme={null}
pod 'ParticleConnect'
pod 'CommonConnect'

// Paste this
post_install do |installer|
installer.pods_project.targets.each do |target|
  target.build_configurations.each do |config|
  config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
 end
```

You can also copy the example [Podfile](https://github.com/Particle-Network/particle-unity/blob/main/ios-build/Podfile).

With your Podfile set, you'll need to run `pod install` and open your `.xcworkspace` file, as shown below:

```shell Terminal theme={null}
pod install --repo-update

open {your project}.xcworkspace
```

Finally, for **iOS**, you'll need to formally use the `projectId`, `clientKey`, and `appId` previously retrieved. To do this, head to the root of your **Xcode** project and create a file called `ParticleNetwork-Info.plist`. Within this file, paste the following text (then replace the placeholders):

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

#### Android configuration

If you're building your **Unity** game for **Android**, you'll just need to configure two files before you're ready to go. The first of these two files can be found at `Assets/Plugins/Android/launcherTemplate.gradle` within your project. Here, you'll need to ensure you have the necessary dependencies included.

Specifically, you'll need the following dependencies at a minimum:

* `network.particle:auth-service`if you're planning on using Particle Auth directly.
* `network.particle:connect`, required for Particle Connect.
* `network.particle:unity-bridge`, required universally.
* Additional dependencies, optional:
  * `network.particle:chains`, collection of `chainInfo` objects.
  * `network.particle:connect-solana-adapter`, Solana-specific custom wallet adapter to be used within Particle Connect.
  * `network.particle:connect-phantom-adapter`, Wallet adapter for Phantom to be used within Particle Connect.
  * `network.particle:connect-evm-adapter`, EVM-specific custom wallet adapter to be used within Particle Connect.
  * `network.particle:connect-auth-adapter`, Particle Auth adapter for Particle Connect (social logins).
  * `network.particle:connect-wallet-connect-adapter`, WalletConnect adapter for Particle Connect.
    The full list of `network.particle` packages can be found [here](https://central.sonatype.com/search?q=g:network.particle\&smo=true).

```groovy launcherTemplate.gradle theme={null}
dependencies {
    implementation project(':unityLibrary')
    implementation "network.particle:auth-service:${sdkVersion}"
    implementation "network.particle:unity-bridge:${sdkVersion}"
  	implementation "network.particle:connect:${sdkVersion}"
  	// Other dependencies
}
```

Finally, for **Android**, you'll need to place your `projectId`, `clientKey`, and `appId` within `gradleTemplate.properties`, which can be found at `Assets/Plugins/Android/gradleTemplate.properties`.

```groovy gradleTemplate.properties theme={null}
particle.network.project_client_key=Your Client Key
particle.network.project_id=Your Project ID
particle.network.app_id=Your App ID
```

***

## Initialization

Now that you've managed the relevant dependencies and configured your Unity environment, you'll need to initialize `ParticleNetwork` and `ParticleConnectInteraction` (derived from `Network.Particle.Scripts.Core`) before moving on. This is required for Particle Connect to function.

`ParticleNetwork` can be initialized by simply calling `Init` and passing in a `chainInfo` object (\*). `ParticleConnectInteraction.Init` will require both a `chainInfo` object and a `DAppMetaData` parameter (in this example, represented as `metadata`) containing a WalletConnect project ID retrieved from the WalletConnect dashboard, alongside the name of your project, the icon (preferably 512x512), the website URL, and a project description.

Additionally, with WalletConnect as the underlying infrastructure for Web3 wallets within Particle Connect, you'll also have the opportunity to include configuration for multiple different chains on WalletConnect by calling `ParticleConnectInteraction.SetWalletConnectV2SupportChainInfos` and passing in an array of `chainInfo` objects.

An example of the above process can be found below.

| Field       | Type           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ----------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `chainInfo` | `ChainInfo`    | The primary chain to be used within your application. This should be indicated by an overall blockchain, followed by a specific network. Within this example, it's `.Ethereum`(alternatively it could be `.EthereumSepolia`, and so on.)                                                                                                                                                                                                                                                                                                                                     |
| `dAppData`  | `DAppMetadata` | Metadata that describes your application and should be provided as an instance of `DAppMetadata` with the following parameters: `walletConnectProjectId`, the WalletConnect project ID retrieved from the [WalletConnect dashboard](https://cloud.walletconnect.com), `name`, the name of your project. `icon`, a URL linking to the icon of your project; this should be 512x512, ideally. `url`, the URL of your project's website. `description`, the description of your project, `redirect`, optional, a redirect universal link to you project, `verifyUrl`, optional. |
| `rpcUrl`    | `RpcUrl?`      | Customize the RPC URL.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `env`       | `Env`          | The specific environment to be used. This can be either `.DEV`, `.STAGING`, `.PRODUCTION`, this should be set to `.PRODUCTION` when released.                                                                                                                                                                                                                                                                                                                                                                                                                                |

```csharp theme={null}
var metadata = new DAppMetaData(TestConfig.walletConnectProjectId,"Particle Connect",
            "https://connect.particle.network/icons/512.png",
            "https://connect.particle.network",
            "Particle Unity Demo");

ParticleNetwork.Init(ChainInfo.Ethereum);
ParticleConnectInteraction.Init(ChainInfo.Ethereum, metadata);
```

Additionally, if you'd like to define multiple chains to be available through WalletConnect, you'll need to create an array of `ChainInfo` objects (`chainInfos` in this example) and use it within `ParticleConnectInteraction.SetWalletConnectV2SupportChainInfos`. E.g.:

```csharp theme={null}
List<ChainInfo> chainInfos = new List<ChainInfo>
                { ChainInfo.Ethereum, ChainInfo.EthereumSepolia, ChainInfo.EthereumSepolia };
ParticleConnectInteraction.SetWalletConnectV2SupportChainInfos(chainInfos.ToArray());
```

***

## Examples of Utilization

### Set Chain Info

If you want to set the primary chain after initializing with `.Init` and before a user is connected, you can call `ParticleNetwork.SetChainInfo`, passing in the appropriate `chainInfo` object for the desired chain.

If your application supports only EVM chains, `ParticleNetwork.SetChainInfo` is sufficient and can be called anytime. However, if you support both EVM and Solana chains, use `ParticleAuthCore.Instance.SwitchChain` when switching between EVM and Solana chains. For example:

```csharp theme={null}
ParticleNetwork.SetChainInfo(ChainInfo.Ethereum);

// Alternatively, if you are using WalletType.authCore
await ParticleAuthCore.Instance.SwitchChain(ChainInfo.Ethereum);
```

***

### Connect Wallet

Within implementations of **Particle Connect**, `Connect` drives connection with a wallet in the **Particle Connect** stack, (social login or otherwise.) This is done through `ParticleConnect.Instance.Connect`, then passing in a relevant `WalletType` object, derived from `Network.Particle.Scripts.Model`

`WalletType` is an `enum` containing the following choices:

* `AuthCore`, Particle Auth Core, an alternative to Particle Auth (`Particle`).
* `EvmPrivateKey`, custom EVM wallet imports/exports.
* `SolanaPrivateKey`, custom Solana wallet imports/exports.
* `MetaMask`.
* `Rainbow`.
* `Trust`.
* `ImToken`.
* `Bitget`.
* `WalletConnect`.
* `Zerion`.
* `Math`.
* `Inch1`.
* `Zengo`.
* `Alpha`.
* `OKX`.
* `TokenPocket`, not supported by iOS.
* `Phantom`, intended for Solana.

If you're using `AuthCore`, you'll also need to pass in a `ConnectConfig` object containing:

| Field               | Type                      | Description                                                                                                                                                                                                                                                                      |
| ------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `loginType`         | `LoginType`               | The specific social login to be used. This can be either `.EMAIL`, `.PHONE`, `.GOOGLE`, `.FACEBOOK`, `.APPLE`, `.TWITTER`, `.DISCORD`, `.GITHUB`, `.TWITCH`, `.MICROSOFT`, `.LINKEDIN` or `JWT`.                                                                                 |
| `account`           | `string?`                 | (Optional) when `type` is set to either `.email`, `.phone`, or `.jwt`, you can use the `account` parameter to pass in an expected email, phone number, or JWT. This is optional for the former two, but required for `.jwt`. The phone number must be in E.164 format.           |
| `code`              | `string?`                 | (Optional) when `type` is set to either `.email` pr `.phone`, you can use the code parameter to pass the verification code.                                                                                                                                                      |
| `supportAuthTypes`  | `List<SupportLoginType>?` | The methods of authentication visible on the authentication popup UI. By default, this will be exclusive to the chosen social login method, although by passing in additional types, you can expand the UI to include the ability to login with those as an alternative to type. |
| `socialLoginPrompt` | `SocialLoginPrompt?`      | (Optional) either `.None`, `.Consent`, or `.SelectAccount`.                                                                                                                                                                                                                      |
| `loginPageConfig`   | `LoginPageConfig?`        | (Optional) customize the UI page, includes project name, icon and description.                                                                                                                                                                                                   |

E.g.:

```csharp theme={null}
// Use social logins
var supportLoginTypes = new List<SupportLoginType> { SupportLoginType.APPLE, SupportLoginType.EMAIL, SupportLoginType.PHONE, SupportLoginType.GOOGLE};
var loginPageConfig = new LoginPageConfig("Particle Unity Example",
                "An example description", "https://connect.particle.network/icons/512.png");
ConnectConfig config = new ConnectConfig(LoginType.Email, "user@example.come", null, supportLoginTypes, SocialLoginPrompt.SelectAccount, loginPageConfig);
await ParticleConnect.Instance.Connect(WalletType.Particle, config);

// Use MetaMask or other supported wallet
await ParticleConnect.Instance.Connect(WalletType.MetaMask);
```

***

### Disconnect Wallet

To disconnect an active session identified by a specific address, you can call `ParticleConnect.Instance.Disconnect`, passing in the particular wallet type (`WalletType` object) and associated address that you'd like to disconnect from your application, as is shown below.

```csharp theme={null}
await ParticleConnect.Instance.Disconnect(this._walletType, publicAddress);
```

***

### Is Connected

Another critical method is `IsConnected`, returning a Boolean indicating whether or not a user (or, in this case, an address and `WalletType`) is currently connected to your application. This can be called through `ParticleConnectInteraction.IsConnected`. E.g.:

```csharp theme={null}
ParticleConnectInteraction.IsConnected(this._walletType, publicAddress);
```

***

### Sign and Send Transaction

`ParticleConnect.Instance.SignAndSendTransaction` is the primary mechanism for EVM and Solana to send (or, in this case, suggest) transactions. Upon calling, the `WalletType` (the adapter in question) will return a confirmation popup requesting a signature from the user before sending the transaction directly to the network. `SignAndSendTransaction` takes three parameters:

* `WalletType` is the type of wallet being used.
* `address` is the public address being used.
* `transaction,` a stringified representation of a transaction object.

E.g.:

```csharp theme={null}
await ParticleConnect.Instance.SignAndSendTransaction(this._walletType, publicAddress, transaction);
```

***

### Sign Transaction

`ParticleConnect.Instance.SignTransaction` is a **Solana-specific** method for signing a transaction without pushing it to the network. This will behave similarly to `SignAndSendTransaction`, although it will only function on either the `Phantom` or `SolanaPrivateKey` wallet types and will purely return a signature.

The plural of this method is `ParticleConnect.Instance.SignAllTransactions`, which takes a list of transactions rather than just one to be prompted for signature.

```csharp theme={null}
await ParticleConnect.Instance.SignTransaction(this._walletType, publicAddress, transaction);

// Alternatively
await ParticleConnect.Instance.SignAllTransactions(this._walletType, publicAddress, transactions);
```

***

### Sign Message

A simple message (UTF-8 string) can be signed on both EVM & Solana through `ParticleConnect.Instance.SignMessage`, passing in the `WalletType`, `address` (`publicAddress` in this example), and the `message` in question. `message` should be a general string to be signed. E.g.:

```csharp theme={null}
var message = "GM, Particle!";
await ParticleConnect.Instance.SignMessage(this._walletType, publicAddress, message);
```

***

### Sign Typed Data

As an alternative to `SignMessage`, for **EVM chains**, you can request that a user signs typed (structured) data rather than purely a raw string. To do this, you can use `adapter.signTypedData` (equivalent to `eth_signTypedData`, represented as either `TypedDataV4`, `TypedDataV2`, or `TypedDataV1`). This takes the following parameters:

* `address` is the user address to target for signature initiation.
* `data`, the typed data to be signed; see the [Web (JavaScript/TypeScript)](/social-logins/connect/desktop/web) page for additional guidance.

E.g.:

```csharp theme={null}
var txtAsset = Resources.Load<TextAsset>("TypedDataV4");
string typedData = txtAsset.text;

await ParticleConnect.Instance.SignTypedData(this._walletType, publicAddress, typedData);
```

***

### Import Wallet

If you're using the`EvmPrivateKey` or `SolanaPrivateKey` wallet types, you can import wallets through either a seed phrase or private key. These methods will associate an account instance derived from these keys, allowing utilization within your application.

These can be achieved through `ImportWalletFromPrivateKey` for importing a private key, or `ImportWalletFromMnemonic` for importing a mnemonic (seed phrase). These methods require the `WalletType` (either `EvmPrivateKey` or `SolanaPrivateKey`) and the private key/seed phrase to be imported.

Additionally, you can export one of these wallets with `ParticleConnect.Instance.ExportWalletPrivateKey`, passing in the address (of the `EvmPrivateKey` or `SolanaPrivateKey` imported/generated wallet) that you'd like to export.

```csharp theme={null}
await ParticleConnect.Instance.ImportWalletFromPrivateKey(this._walletType, privateKey);

await ParticleConnect.Instance.ImportWalletFromMnemonic(this._walletType, mnemonic);

// Exportation
await ParticleConnect.Instance.ExportWalletPrivateKey(this._walletType, publicAddress);
```

***

## Dive Deeper

`ParticleConnect` includes `ParticleAuthCore`. When logged in with a Particle account, you can access additional functions such as `getUserInfo`, `openAccountAndSecurity`, `hasMasterPassword`, `hasPaymentPassword`, and `changeMasterPassword`. For more information, refer to the [Auth SDK reference](/social-logins/auth/mobile-sdks/unity).


# Android Quickstart
Source: https://developers.particle.network/social-logins/connect/quickstart/android-quickstart



# Quickstart: Implementing Particle Connect within Android Applications

Particle Network has support for Android (Kotlin) through various platform-native SDKs. Getting started only takes a few steps.

This document covers everything needed to get up and running with Particle Connect on Android in just a few minutes.

<Note>
  For complete documentation covering the implementation of Particle Connect on Android in more depth, head over to the [Android SDK reference](/social-logins/connect/mobile/android).
</Note>

***

Before getting started, there are a few prerequisites to keep in mind; the instructions following may not work correctly if your project doesn't meet these requirements.

### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version **8.5.1** or higher.
* Gradle Version **8.9** or higher.

<Steps>
  <Step title="Configuring settings.gradle">
    To begin, you'll need to ensure your `settings.gradle` file is structured/configured to use Maven; below is an example of how this file should look.

    ```gradle theme={null}
    // From https://github.com/Particle-Network/particle-android/blob/master/settings.gradle.kts

    pluginManagement {
        repositories {
            gradlePluginPortal()
            google()
            mavenCentral()
        }
    }
    dependencyResolutionManagement {
        repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
        repositories {
            google()
            mavenCentral()
            maven { setUrl("https://jitpack.io") }
        }
    }
    ```
  </Step>

  <Step title="Configuring the Particle dashboard">
    Before continuing to the configuration of `build.gradle`, we'll need to first retrieve three key values from the [Particle dashboard](https://dashboard.particle.network).

    These values include your: `projectId`, `clientKey`, and `appId`. Using these keys, you'll be able to link your instance of Particle Connect with a project configured on the dashboard.

    To retrieve these, follow the below steps.

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network/)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new application, or skip this step if you already have one">
        <div>
          <img alt="Create web app." />

          <img alt="Create web app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID (`projectId`), the client key (`clientKey`), and the application ID (`appId`)">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at [this video](https://www.youtube.com/watch?v=d7DYCMNDmjo\&ab_channel=ParticleNetwork) or visit the [dashboard quickstart](/social-logins/dashboard).
  </Step>

  <Step title="Configuring build.gradle">
    With your project keys retrieved, you're ready to configure Particle through your `build.gradle` file. Here, you'll establish the various SDKs used within your application and plug in the aforementioned keys.

    Specifically, you'll need the following libraries:

    * `network.particle:connect`
    * `network.particle:connect-kit`
    * `network.particle:connect-auth-core-adapter`
    * `network.particle:api-service`
    * `network.particle:connect-evm-adapter`, for onboarding via EVM private key. (not recommended)
    * `network.particle:connect-solana-adapter`, for onboarding via Solana private key. (not recommended)
    * `network.particle:connect-phantom-adapter`, if using Phantom.
    * `network.particle:connect-wallet-connect-adapter`,
    * `network.particle:wallet-service`, if you'd like to use Particle's embedded wallet interface.
    * `network.particle:aa-service`, if you'd like to use ERC-4337 account abstraction.

    All in all, your `build.gradle` file should look similar to the following (replace the placeholder values with the previously retrieved keys and proper SDK versions).

    ```gradle theme={null}
    // From https://github.com/Particle-Network/particle-android/blob/master/app/build.gradle.kts

    android {
      //...
        defaultConfig {
          //...
          minSdk = 23
          targetSdk = 34
          manifestPlaceholders["PN_PROJECT_ID"] = "Replace this with your Project ID"
          manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "Replace this with your Client Key"
          manifestPlaceholders["PN_APP_ID"] = "Replace this with your App ID"
          //...
        }

        compileOptions {
            sourceCompatibility(JavaVersion.VERSION_17)
            targetCompatibility(JavaVersion.VERSION_17)
        }
        kotlinOptions {
            jvmTarget = JavaVersion.VERSION_17.toString()
        }
        dataBinding {
            isEnabled = true
        }
    }

    dependencies {
        //required
        modules {
            module("org.bouncycastle:bcprov-jdk15to18") {
                replacedBy("org.bouncycastle:bcprov-jdk15on")
            }
            module("org.bouncycastle:bcprov-jdk18on") {
                replacedBy("org.bouncycastle:bcprov-jdk15on")
            }
        }
        // Find the latest version of the SDK:
        // https://search.maven.org/search?q=g:network.particle
        val sdkVersion = "x.x.x" // Replace this
        implementation("network.particle:connect:$sdkVersion")
        implementation("network.particle:connect-kit:$sdkVersion")
        implementation("network.particle:connect-evm-adapter:$sdkVersion")
        implementation("network.particle:connect-solana-adapter:$sdkVersion")
        implementation("network.particle:connect-phantom-adapter:$sdkVersion")
        implementation("network.particle:connect-wallet-connect-adapter:$sdkVersion")
        implementation("network.particle:connect-auth-core-adapter:$sdkVersion")
        implementation("network.particle:api-service:$sdkVersion")
        implementation("network.particle:wallet-service:$sdkVersion")
        implementation("network.particle:aa-service:$sdkVersion")
    }
    ```
  </Step>

  <Step title="Configuring AndroidManifest.xml">
    With your `build.gradle` file ready to go, the final point of configuration needed is within `AndroidManifest.xml`, in which you'll have to insert the previously retrieved project keys once again.

    Below is an example of this file with areas in which project keys are needed highlighted.

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

        <application
            android:fullBackupContent="@xml/pn_backup_rules"
            tools:replace="android:fullBackupContent"
            >

            <!-- Particle Connect Redirect Callback -->
            <!-- Particle AuthCore Start -->
            <activity
                android:name="com.particle.auth.controller.AuthCoreWebActivity"
                android:configChanges="orientation|keyboardHidden|screenSize"
                android:exported="true"
                android:launchMode="singleTask"
                android:theme="@style/ThemeAuthWeb">
                <intent-filter>
                    <action android:name="android.intent.action.VIEW" />

                    <category android:name="android.intent.category.DEFAULT" />

                    <category android:name="android.intent.category.BROWSABLE" />

                    <data android:scheme="ac${PN_APP_ID}" />
                </intent-filter>
            </activity>
            <!-- Particle AuthCore End -->

            <!-- Particle Connect Redirect Callback -->
            <activity
                android:name="com.connect.common.controller.RedirectActivity"
                android:exported="true"
                android:launchMode="singleTask"
                android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen">
                <intent-filter>
                    <action android:name="android.intent.action.VIEW" />

                    <category android:name="android.intent.category.DEFAULT" />

                    <category android:name="android.intent.category.BROWSABLE" />

                    <data android:scheme="connect${PN_APP_ID}" />
                </intent-filter>
            </activity>

            <meta-data
                android:name="particle.network.project_client_key"
                android:value="${PN_PROJECT_CLIENT_KEY}" />

            <meta-data
                android:name="particle.network.app_id"
                android:value="${PN_APP_ID}" />

            <meta-data
                android:name="particle.network.project_id"
                android:value="${PN_PROJECT_ID}" />

        </application>


    </manifest>
    ```
  </Step>

  <Step title="Initializing Particle Connect">
    Finally, with your project configured (`settings.gradle`, `build.gradle`, and `AndroidManifest.xml`), it's time to initialize Particle Connect within your application.

    This is done through `ParticleConnect.init`, which takes the following parameters:

    * `application`, which represents the underlying Android application.
    * `env`, either `env.PRODUCTION`, `env.DEV`, or `env.STAGING`; this alters the information logged when running the application.
    * `chain`, a `ChainInfo` object (from `network.particle.chains.ChainInfo.Companion.{chain}`) that represents the primary chain you intend to use.
    * `dAppData`, metadata for your application to be used with WalletConnect.
    * `createAdapters`, a list of wallets (adapters imported from `com.wallet.connect.adapter.{Adapter}`) that you'd like to support within your application.

    An example of a complete call to `ParticleConnect.init` has been included below.

    ```kotlin theme={null}
    // From https://github.com/Particle-Network/particle-android/blob/master/app/src/main/java/network/particle/demo/utils/ParticleInitUtils.kt

    val dAppMetadata = DAppMetadata(
        "Particle Connect",
        "https://connect.particle.network/icons/512.png",
        "https://particle.network",
        description = "Particle Connect is a decentralized wallet connection protocol that makes it easy for users to connect their wallets to your DApp.",
    )
    ParticleConnect.init(
        app, Env.PRODUCTION, chainInfo, dAppMetadata
    ) {
        listOf(
            AuthCoreAdapter(),
            MetaMaskConnectAdapter(),
            RainbowConnectAdapter(),
            TrustConnectAdapter(),
            PhantomConnectAdapter(),
            WalletConnectAdapter(),
            ImTokenConnectAdapter(),
            BitGetConnectAdapter(),
            EVMConnectAdapter(),
            SolanaConnectAdapter(),
        )
    }

    ParticleWallet.init(app) // If using Particle Wallet
    ```
  </Step>

  <Step title="Opening connection modal">
    The connection modal provided by Particle Connect (including both wallets defined through the aforementioned list of adapters alongside social logins) can be opened now that the SDK has been initialized.

    Opening the modal is as simple as defining the various social logins you'd like to be supported alongside the wallets being used and their order; this is handled through `ParticleConnectKit.connect`, passing an instance of `ConnectKitConfig`, as exemplified below.

    ```kotlin theme={null}
    // From https://github.com/Particle-Network/particle-android/blob/master/app/src/main/java/network/particle/demo/ui/ParticleWalletLoginDemoActivity.kt

    val config = ConnectKitConfig(
          logo = "",
          connectOptions = listOf(
              ConnectOption.EMAIL,
              ConnectOption.PHONE,
              ConnectOption.SOCIAL,
              ConnectOption.WALLET),
          socialProviders = listOf(
              EnableSocialProvider.GOOGLE,
              EnableSocialProvider.APPLE,
              EnableSocialProvider.DISCORD,
              EnableSocialProvider.TWITTER,
              EnableSocialProvider.FACEBOOK,
              EnableSocialProvider.GITHUB,
              EnableSocialProvider.MICROSOFT,
              EnableSocialProvider.TWITCH,
              EnableSocialProvider.LINKEDIN),
          walletProviders = listOf(
              EnableWalletProvider(EnableWallet.MetaMask, EnableWalletLabel.RECOMMENDED),
              EnableWalletProvider(EnableWallet.OKX),
              EnableWalletProvider(EnableWallet.Phantom),
              EnableWalletProvider(EnableWallet.Trust),
              EnableWalletProvider(EnableWallet.Bitget),
              EnableWalletProvider(EnableWallet.WalletConnect),
          ),
          additionalLayoutOptions = AdditionalLayoutOptions(
              isCollapseWalletList = false,
              isSplitEmailAndSocial = false,
              isSplitEmailAndPhone = false,
              isHideContinueButton = false
          )
                )
    ParticleConnectKit.connect(config,connectCallback = object : ConnectKitCallback {
        override fun onConnected(walletName: String, account: Account) {
            LogUtils.d("onConnected: $walletName, $account")
            lifecycleScope.launch {
                ParticleWallet.setWallet(account.publicAddress,walletName)
                PNRouter.build(RouterPath.Wallet).navigation()
                openWallet() // To open the embedded wallet interface upon connection
            }
        }

        override fun onError(error: ConnectError) {
        }

    });
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieve User Information

Upon a successful connection, you'll be able to retrieve information about the resulting account through two mechanisms. The first involves reading properties on the object originally assigned to the `ParticleConnectKit.connect` call, which will contain core properties such as `publicAddress` after an account is loaded.

Additionally, to explicitly retrieve detailed information, you can call `AuthCore.getUserInfo`, which will return a `userInfo` object with various properties detailing the connection method used, addresses, and so on (to learn more about the structure of this object, head over to its [API reference](/social-logins/connect/mobile/android)).

<Tip> Ensure you save basic account details, such as the address, because you'll need this later as a parameter within transaction execution functions. </Tip>

```kotlin theme={null}
ParticleConnectKit.connect(config,connectCallback = object : ConnectKitCallback {
    override fun onConnected(walletName: String, account: Account) {
        // Save the account information properly; it will be needed when operating the account, such as for transfers and signing。
        val publicAddress = account.publicAddress
        val connectedWalletName = walletName
    }

    override fun onError(error: ConnectError) {
    }
});
```

### Send a Transaction

Transactions can be constructed and sent directly through the SDK; below is an example of the standard flow here.

In essense, you'll need to generate a transaction object with `ParticleNetwork.evm.createTransaction` (or the `solana` equivalent), passing in standard parameters such as `from`, `to`, `value`, and (if you're interacting with a contract) `data`. Using these, an object will be returned which can be used directly for execution.

Execution needs to be initiated through an instance of the active connector, or adapter (the method in which a user connected); this can be retrieved and loaded using `ParticleConnect.getAdapters`, as demonstrated below. Upon loading the adapter, you can simply call `{adapter}.signAndSendTransaction`, passing in the previously generated transaction object. Upon doing so, the user will be prompted to confirm the transaction.

```kotlin theme={null}
val publicAddress = account.publicAddress
val connectedWalletName = walletName
val uiAmount = "0.0001"
val value = "0x"+uiAmount.toBigDecimal().multiply(BigDecimal(1e18)).toBigInteger().toString(16)
val trans = ParticleNetwork.evm.createTransaction(from ,to,value)!!.serialize()
val adapter = ParticleConnect.getAdapters().first { it.name == connectedWalletName }
adapter.signAndSendTransaction(publicAddress,trans,
    object : TransactionCallback {
       override fun onError(error: ConnectError) {
           LogUtils.d("signAndSendTransaction onError")
       }

       override fun onTransaction(transactionId: String?) {
           LogUtils.d("signAndSendTransaction onTransaction")
       }
})
```

<Tip>The complete demo project, which includes the code snippets covered above, can be found [here](https://github.com/Particle-Network/particle-android).</Tip>


# Flutter Quickstart
Source: https://developers.particle.network/social-logins/connect/quickstart/flutter-quickstart



# Quickstart: Implementing Particle Connect within applications built with Flutter

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.

<Note>
  For complete documentation covering the implementation of Particle Connect on Flutter in more depth, head over to the [Flutter SDK reference](/social-logins/connect/mobile/flutter).
</Note>

***

<Steps>
  <Step title="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.

    ```shell Terminal theme={null}
    flutter pub add particle_connect
    ```
  </Step>

  <Step title="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](https://dashboard.particle.network): 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:

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new iOS/Android application, or skip this step if you already have one">
        <div>
          <img alt="Create iOS app." />

          <img alt="Create iOS app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID, client key, and application ID">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at the [dashboard quickstart](/social-logins/dashboard).

    ***

    ### Android

    If you're planning on using Android for your React Native application, ensure you meet the following prerequisites (otherwise, expect compatibility issues):

    #### Prerequisites

    * minSdkVersion **23** or higher.
    * compileSdkVersion, targetSdkVersion **34** or higher.
    * JavaVersion **17**.
    * [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
    * Android Gradle Plugin Version: **8.5.1** or higher.
    * Gradle Version: **8.9** or higher.

    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:

    1. `minSdkVersion`. In most cases, this will be set to `23`.
    2. `manifestPlaceholders["PN_PROJECT_ID"]`, the project ID previously retrieved from the Particle dashboard.
    3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the client key previously retrieved from the Particle dashboard.
    4. `manifestPlaceholders["PN_APP_ID"]`, the app ID previously retrieved from the Particle dashboard.

    An example of this has been included below.

    ```groovy build.gradle theme={null}
    // Example
    defaultConfig {
      applicationId "com.example.particle_auth_test"

      minSdkVersion 23 // Required
      targetSdkVersion flutter.targetSdkVersion
      versionCode flutterVersionCode.toInteger()
      versionName flutterVersionName

      manifestPlaceholders["PN_PROJECT_ID"] = "YOUR PROJECT ID"
      manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "YOUR CLIENT KEY"
      manifestPlaceholders["PN_APP_ID"] = "YOUR APP ID"
    }
    ```

    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`.

    ```groovy build.gradle theme={null}
    // Example
    compileOptions {
      sourceCompatibility JavaVersion.VERSION_17
      targetCompatibility JavaVersion.VERSION_17
    }

    kotlinOptions {
      jvmTarget = JavaVersion.VERSION_17.toString()
    }

    dataBinding {
      enabled = true
    }
    ```

    ***

    ### iOS

    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`.

    <Steps>
      <Step title="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](https://dashboard.particle.network):

        ```xml ParticleNetwork-Info.plist theme={null}
        <?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
        <plist version="1.0">
        <dict>
          <key>PROJECT_UUID</key>
          <string>YOUR_PROJECT_UUID</string>
          <key>PROJECT_CLIENT_KEY</key>
          <string>YOUR_PROJECT_CLIENT_KEY</string>
          <key>PROJECT_APP_UUID</key>
          <string>YOUR_PROJECT_APP_UUID</string>
        </dict>
        </plist>
        ```
      </Step>

      <Step title="Configuring AppDelegate.swift">
        Next, you'll need to head over to your `AppDelegate.swift` file to add an import of `ParticleConnect`.

        ```dart theme={null}
        import 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.

        ```dart theme={null}
        override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
          if ParticleConnect.handleUrl(url) {
              return true
          } else {
              return super.application(app, open: url, options: options)
          }
        }
        ```
      </Step>

      <Step title="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`.
      </Step>

      <Step title="Configuring Info.plist">
        Now, head over to your `Info.plist` file and include the following snippet:

        ```xml Info.plist theme={null}
        <key>LSApplicationQueriesSchemes</key>
        <array>
        <string>metamask</string>
        <string>phantom</string>
        <string>bitkeep</string>
        <string>imtokenv2</string>
        <string>rainbow</string>
        <string>trust</string>
        <string>zerion</string>
        <string>mathwallet</string>
        <string>oneinch</string>
        <string>awallet</string>
        <string>okex</string>
        <string>bnc</string>
        </array>
        <key>NSPhotoLibraryUsageDescription</key>
        <string>We need access in order to open photos of barcodes</string>
        <key>NSCameraUsageDescription</key>
        <string>We use the camera to scan barcodes</string>
        <key>NSFaceIDUsageDescription</key>
        <string>We use Face ID for secure access to the app.</string>
        ```
      </Step>

      <Step title="Configuring your Podfile">
        Finally, you'll need to edit your Podfile to ensure `particle_connect` is properly imported. Head over to the [linked guide](https://github.com/Particle-Network/particle-flutter/blob/master/particle-connect/example/ios/Podfile) to complete this if you haven't already.
      </Step>
    </Steps>

    <Note>
      <p>Another important note before continuing.</p>
      <p>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:</p>

      <p>
        ```ruby theme={null}
        post_install do |installer|
          installer.pods_project.targets.each do |target|
            target.build_configurations.each do |config|
              config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
            end
          end
        end
        ```
      </p>
    </Note>

    ***
  </Step>

  <Step title="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.

    ```dart theme={null}
    final dappInfo = DappMetaData(
        "Particle Connect",
        "https://connect.particle.network/icons/512.png",
        "https://connect.particle.network",
        "Particle Connect Flutter Demo");
    // Initialize ParticleConnect and ParticleAuthCore.
    ParticleConnect.init(currChainInfo, dappInfo, Env.dev);
    ParticleAuthCore.init();
    ```
  </Step>

  <Step title="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:

    * Onboarding mechanisms you'd like to support, through `connectOptions` (such as `.EMAIL`, `.PHONE`, `SOCIAL`, `WALLET`).
    * Social login providers you'd like to support, through `socialProviders` (such as `.GOOGLE`, `.APPLE`).
    * Wallets you'd like to be included as options within the modal, through `walletProviders` (specified through an instance of `EnableWalletProvider`, as shown below).
    * (Optionally), layout options altering the format of the connection modal through `additionalLayoutOptions`.
    * (Optionally), additional customizations, such as a custom icon, through `logo`.

    Upon generating this config (with `ConnectKitConfig`), you'll be able to call `ParticleConnect.connectWithConnectKitConfig`, initiating the resulting connection modal.

    ```dart theme={null}
    final config = ConnectKitConfig(
      logo: "", // base64 or image URL
      connectOptions: [
        ConnectOption.EMAIL,
        ConnectOption.PHONE,
        ConnectOption.SOCIAL,
        ConnectOption.WALLET,
      ], // Changing the order will alter the UI
      socialProviders: [
        EnableSocialProvider.GOOGLE,
        EnableSocialProvider.TWITCH,
        EnableSocialProvider.APPLE,
        EnableSocialProvider.DISCORD,
        EnableSocialProvider.TWITTER,
        EnableSocialProvider.FACEBOOK,
        EnableSocialProvider.GITHUB,
        EnableSocialProvider.MICROSOFT,
        EnableSocialProvider.LINKEDIN,
      ], // Changing the order will alter the UI
      walletProviders: [
        EnableWalletProvider(EnableWallet.MetaMask,
            label: EnableWalletLabel.RECOMMENDED),
        EnableWalletProvider(EnableWallet.OKX),
        EnableWalletProvider(EnableWallet.Trust,
            label: EnableWalletLabel.POPULAR),
        EnableWalletProvider(EnableWallet.Bitget),
        EnableWalletProvider(EnableWallet.WalletConnect),
      ], // Changing the order will alter the UI
      additionalLayoutOptions: AdditionalLayoutOptions(
        isCollapseWalletList: false,
        isSplitEmailAndSocial: true,
        isSplitEmailAndPhone: false,
        isHideContinueButton: false,
      ),
    );

    final account = await ParticleConnect.connectWithConnectKitConfig(config);
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieving User Information

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](/social-logins/api/server/getuserinfo)), you'll need to call `ParticleAuthCore.getUserInfo`.

An example of both approaches can be found below.

```dart theme={null}
const publicAddress = account.publicAddress
const walletType = account.walletType

if (walletType.toLowerCase() == "authCore") {
  final userInfo = await ParticleAuthCore.getUserInfo();
}
```

### Send a Transaction

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.

```dart theme={null}
final evmAddress = account.publicAddress;
const receiverAddress = "0x0000000000000000000000000000000000000000";
final value = BigInt.from(0.000000001 * pow(10, 18));
const data = "0x";

final transaction = await EvmService.createTransaction(evmAddress, data, value, receiverAddress);
String txHash = await ParticleConnect.signAndSendTransaction(WalletType.authCore, account.publicAddress, transaction);
```

### Open Wallet

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.

```dart theme={null}
List<ChainInfo> chainInfos = [
  ChainInfo.Ethereum,
  ChainInfo.Polygon,
  ChainInfo.BNBChain
];
ParticleWallet.setSupportChain(chainInfos);
ParticleWallet.navigatorWallet();
```

<Tip> To implement account abstraction within your Flutter project, integrate the `particle_aa` SDK and refer to this [documentation](/aa/sdks/mobile/flutter). Additionally, a demo repository can be found [here](https://github.com/Particle-Network/particle-flutter/tree/master/particle-aa/example). </Tip>


# iOS Quickstart
Source: https://developers.particle.network/social-logins/connect/quickstart/ios-quickstart



# Quickstart: Implementing Particle Connect within iOS Applications

Getting started with Particle Connect on iOS only takes a few minutes.

Below is a quick, step-by-step rundown on installing, configuring, and utilizing Particle Connect on iOS.

<Note>
  For complete documentation covering the implementation of Particle Connect on iOS in more depth, head over to the [iOS SDK reference](/social-logins/connect/mobile/ios).
</Note>

***

To begin, you'll need to ensure that your project meets the following requirements (if it doesn't, you may encounter compatibility issues).

### Prerequisites

* **Xcode 15.0** or higher.
* **CocoaPods 1.14.3** or higher.
* **iOS 14** or higher.

***

<Steps>
  <Step title="Installing Particle Connect">
    Once you've ensured that your project meets the aforementioned prerequisites, you'll need to install Particle Connect and various associated SDKs, including:

    * `ParticleConnectKit`
    * `ParticleConnect`
    * `ConnectCommon`
    * `ParticleAuthCore`
    * `ParticleMPCCore`
    * `Thresh`
    * `AuthCoreAdapter`
    * For EVM, `ConnectWalletConnectAdapter`
    * For Solana, `ConnectPhantomAdapter`
    * Optionally, `ParticleWalletAPI`
    * Optionally, `ParticleWalletGUI`
    * Optionally, `ParticleWalletConnect`

    The following snippet should be included within your Podfile (with or without the optional libraries).

    ```ruby Podfile theme={null}
    pod `ParticleConnectKit`
    pod 'ParticleConnect'
    pod 'ConnectPhantomAdapter'
    pod 'ConnectWalletConnectAdapter'
    pod 'ConnectCommon'
    pod `ParticleAuthCore`
    pod 'ParticleMPCCore'
    pod 'Thresh'
    pod 'AuthCoreAdapter'

    pod 'ParticleWalletAPI' #Optional, for create transaciton
    pod `ParticleWalletGUI` #Optional, for wallet
    pod 'ParticleWalletConnect' #Optional, for wallet
    ```
  </Step>

  <Step title="Configuring Particle Connect">
    Once installed, you're ready to configure the SDK.

    To configure, and eventually initialize Particle Connect, you'll need three key values from the [Particle dashboard](https://dashboard.particle.network): your project ID, client key, and app ID. These authenticate your instance of Particle Connect and connect your project to the dashboard.

    To retrieve these values, follow the steps below:

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new iOS application, or skip this step if you already have one">
        <div>
          <img alt="Create iOS app." />

          <img alt="Create iOS app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID, the client key, and the application ID">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at the [dashboard quickstart](/social-logins/dashboard).

    With your project ID, client key, and app ID retrieved, you'll add a file named `ParticleNetwork-Info.plist` to your project, then insert these values as is shown below.

    ```xml ParticleNetwork-Info.plist theme={null}
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
      <dict>
        <key>PROJECT_UUID</key>
        <string>YOUR_PROJECT_UUID</string> <!-- Replace this with your project ID -->
        <key>PROJECT_CLIENT_KEY</key>
        <string>YOUR_PROJECT_CLIENT_KEY</string> <!-- Replace this with your client key -->
        <key>PROJECT_APP_UUID</key>
        <string>YOUR_PROJECT_APP_UUID</string> <!-- Replace this with your app ID -->
    </dict>
    </plist>
    ```
  </Step>

  <Step title="Configuring Xcode">
    Finally, before initializing and using the SDK, you'll need to configure your `Info.plist` file; this file should contain an array of strings representing the wallets you intend to support, alongside a number of permissions, as is shown below.

    ```xml Info.plist theme={null}
    <key>LSApplicationQueriesSchemes</key>
    <array>
    <string>metamask</string>
    <string>phantom</string>
    <string>bitkeep</string>
    <string>imtokenv2</string>
    <string>rainbow</string>
    <string>trust</string>
    <string>zerion</string>
    <string>mathwallet</string>
    <string>oneinch</string>
    <string>awallet</string>
    <string>okex</string>
    <string>bnc</string>
    </array>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>We need access in order to open photos of barcodes</string>
    <key>NSCameraUsageDescription</key>
    <string>We use the camera to scan barcodes</string>
    <key>NSFaceIDUsageDescription</key>
    <string>We use Face ID for secure access to the app.</string>
    ```

    Additionally, you'll need to add your scheme URL to your Xcode project.

    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`.
  </Step>

  <Step title="Initialize SDK">
    Before using Particle Connect, you'll need to initialize the SDK through the `initialize` method on `ParticleConnect`, which takes the following parameters:

    * `env`, representing the mode in which you'd like your environment to be in, such as `.debug`, `.staging`, or `.production`. This primarily affects the amount of information logged during usage.
    * `chainInfo`, specifying the primary chain you intend to use within your application.
    * `dAppData`, the metadata used for WalletConnect.
    * `adapters`, an array of adapters representing the wallets you'd like to support within your application.

    Additionally, you can set specific chains to be used within WalletConnect (`chainInfo` structures) with `setWalletConnectV2SupportChainInfos`. An example of this can be found below.

    ```swift theme={null}
    var adapters: [ConnectAdapter] = [
        AuthCoreAdaper(),
        // Select the third-party wallet you want from the options below. 
        WalletConnectAdapter(),
        MetaMaskConnectAdapter(),
        PhantomConnectAdapter(),
        ImtokenConnectAdapter(),
        BitgetConnectAdapter(),
        RainbowConnectAdapter(),
        TrustConnectAdapter(),
        ZerionConnectAdapter(),
        MathConnectAdapter(),
        Inch1ConnectAdapter(),
        ZengoConnectAdapter(),
        AlphaConnectAdapter(),
        OKXConnectAdapter()
        ]

    // You can retrieve chainInfo from ChainInfo, the initialize works for the first time open.
    // If you support more than one chain, you can use ParticleNetwork.setChainInfo to switch.
    ParticleConnect.initialize(env: .debug, chainInfo: ChainInfo.ethereumSepolia, dAppData: .standard, adapters: adapters)

    // Optional, for usage of Particle Wallet
    ParticleWalletConnect.initialize(
            WalletMetaData(name: "Particle Wallet",
                            icon: URL(string: "https://connect.particle.network/icons/512.png")!,
                            url: URL(string: "https://particle.network")!,
                            description: "Particle Connect is a decentralized wallet connection protocol that makes it easy for users to connect their wallets to your DApp.", redirectUniversalLink: nil)
        )
    ParticleWalletGUI.setAdapters(adapters)

    ParticleWalletGUI.setShowTestNetwork(true)

    // Set walletConnect connection chains, but metamask doesn't support more than one chain one connection.
    ParticleConnect.setWalletConnectV2SupportChainInfos([.ethereum, .bnbChain])
    ```
  </Step>

  <Step title="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 `config` specifying the:

    * Onboarding mechanisms you'd like to support, through `connectOptions` (such as `.email`, `.phone`).
    * Social login providers you'd like to support, through `socialProviders` (such as `.google`, `.apple`).
    * Wallets you'd like to be included as options within the modal, through `walletProviders` (specified through an instance of `EnableWalletProvider`, as shown below).
    * (Optionally), layout options altering the format of the connection modal through `additionalLayoutOptions`.
    * (Optionally), additional customizations, such as a custom icon, through `designOptions`.

    Upon generating this config (with `ConnectKitConfig`), you'll be able to call `ParticleConnectUI.connect`, initiating the resulting connection modal.

    ```swift theme={null}
    let connectOptions: [ConnectOption] = [.email, .phone, .social, .wallet]
    let socialProviders: [EnableSocialProvider] = [.google, .apple]
    let walletProviders: [EnableWalletProvider] = [EnableWalletProvider(name: "metamask", state: .recommended), EnableWalletProvider(name: "okx", state: .popular), EnableWalletProvider(name: "walletConnect", state: .none)]
    let additionalLayoutOptions = AdditionalLayoutOptions(isCollapseWalletList: false, isSplitEmailAndSocial: false, isSplitEmailAndPhone: false, isHideContinueButton: false)
    // If you'd like to specify an icon, you can do so through a local image, base64 string or url.
    let designOptions: DesignOptions = .init(icon: ImagePath.local(UIImage(named: "icon")!))
    let config = ConnectKitConfig(connectOptions: connectOptions, socialProviders: socialProviders, walletProviders: walletProviders, additionalLayoutOptions: additionalLayoutOptions, designOptions: designOptions)

    let account = try await ParticleConnectUI.connect(config: config).value 
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieving User Information

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 `ParticleConnectUI.connect`, 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](/social-logins/api/server/getuserinfo)), you'll need to call `auth.getUserInfo`.

An example of both approaches can be found below.

```swift theme={null}
let publicAddress = account.publicAddress
let walletType = account.walletType

// If you're using account abstraction (through ParticleAA), you'll need to retrieve the user's address through the following:
let smartAccountAddress = account.smartAccount?.smartAccountAddress

if account.walletType == WalletType.authCore {
    let auth = Auth()
    let userInfo = auth.getUserInfo()
}
```

### Send a Transaction

Sending a transaction using the resulting account follows a similar process to other mobile SDKs. A basic transaction will need to be constructed using `ParticleWalletAPI.evm().createTransaction`, this takes basic parameters such as `from`, `to`, `value`, and (optionally) `data` and returns a machine-readable transaction object.

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 `{adapter}.signAndSendTransaction`, taking the sender's address alongside the previously constructed transaction object.

```swift theme={null}
let adapter = ParticleConnect.getAllAdapters().first {
      $0.walletType == account.walletType
}

let receiverAddress = "0x0000000000000000000000000000000000000000"
let value = BDouble(0.000000001 * pow(10, 18)).rounded().toHexString()
let transaction = try await ParticleWalletAPI.evm().createTransaction(from: account.publicAddress, to: receiverAddress, value: value, data: "0x").value

// Got this transaction hash                
let txHash = try await adapter!.signAndSendTransaction(publicAddress: account.publicAddress, transaction: transaction).value
```

### Open Wallet

If you included `ParticleWalletGUI` within your Podfile, you can open the (optional) embedded wallet interface at any time after a user connects, use `ParticleWalletGUI.setSupportChain` to set supported chains, then `PNRouter` to open the interface.

```swift theme={null}
ParticleWalletGUI.setSupportChain(Set<[ChainInfo.ethereum, ChainInfo.bnbChain]>)
PNRouter.navigatorWallet(hiddenBackButton: false)
```

<Tip> To implement account abstraction within your iOS project, integrate the `ParticleAA` SDK and refer to this [documentation](/aa/sdks/mobile/ios). Additionally, a demo repository can be found [here](https://github.com/Particle-Network/particle-connect-ios/tree/master/ConnectKitDemo). </Tip>


# React Native Quickstart
Source: https://developers.particle.network/social-logins/connect/quickstart/react-native-quickstart



# Quickstart: Implementing Particle Connect within applications built with React Native

Particle Connect, the flagship SDK for facilitating onboarding through either social logins or standard wallet connection, has rich support for React Native, as will be covered here.

Specifically, this document will go through the step-by-step process of configuring, initializing, and using Particle Connect with React Native.

<Note>
  For complete documentation covering the implementation of Particle Connect on React Native in more depth, head over to the [React Native SDK reference](/social-logins/connect/mobile/react).
</Note>

***

<Steps>
  <Step title="Installing Particle Connect">
    To begin, go ahead and add `@particle-network/rn-connect`, `@particle-network/rn-auth-core`, and `@particle-network/rn-base` to your React Native application; this is a requirement before moving onto platform-specific configuration.

    ```shell Terminal theme={null}
    npm install @particle-network/rn-auth-core
    npm install @particle-network/rn-base
    npm install @particle-network/rn-connect

    // Or

    yarn add @particle-network/rn-auth-core
    yarn add @particle-network/rn-base
    yarn add @particle-network/rn-connect
    ```
  </Step>

  <Step title="Configuring Particle Connect">
    Once the aforementioned libraries are installed, you're ready to configure Particle Connect.

    Most importantly within this process, you'll need three key values from the [Particle dashboard](https://dashboard.particle.network): 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.

    To retrieve these keys, follow the steps outlined below:

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new iOS/Android application, or skip this step if you already have one">
        <div>
          <img alt="Create iOS app." />

          <img alt="Create iOS app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID, client key, and application ID">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at the [dashboard quickstart](/social-logins/dashboard).

    ***

    ### Android

    If you're planning on using Android for your React Native application, ensure that you meet the following prerequisites:

    * minSdkVersion **23** or higher.
    * compileSdkVersion, targetSdkVersion **34** or higher.
    * JavaVersion **17**.
    * [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
    * Android Gradle Plugin Version: **8.5.1** or higher.
    * Gradle Version: **8.9** or higher. (before react-native:0.75.2, use 8.8)

    Once you've made sure your project meets these requirements, you'll need to move on and define the aforementioned configuration values (project ID, client key, and app ID) within your `build.grade` file (which is generally found at `${project name}/android/app/build.gradle`). These directly link your application's instance of Particle Connect with the [dashboard](https://dashboard.particle.network).

    Specifically, within `build.gradle`, you'll need to set four different values:

    1. `dataBinding`, this should be enabled with `enabled = true`.
    2. `manifestPlaceholders["PN_PROJECT_ID"]`, the project ID previously retrieved from the Particle dashboard.
    3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the client key previously retrieved from the Particle dashboard.
    4. `manifestPlaceholders["PN_APP_ID"]`, the app ID previously retrieved from the Particle dashboard.

    ```groovy build.gradle theme={null}
    android {
      ...
      defaultConfig {
          ......
          manifestPlaceholders["PN_PROJECT_ID"] = "Your project ID"
          manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "Your client key"
          manifestPlaceholders["PN_APP_ID"] = "Your app ID"
      }

      dataBinding {
          enabled = true
      }

    }
    ```

    ***

    ### iOS

    Alternatively, if you plan to use iOS for your React Native application, the underlying setup process differs slightly. Before diving in, ensure that your project meets the following requirements:

    * **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`.

    <Steps>
      <Step title="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 aforementioned project keys (project ID, client key, and app ID):

        ```xml ParticleNetwork-Info.plist theme={null}
        <?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
        <plist version="1.0">
        <dict>
          <key>PROJECT_UUID</key>
          <string>YOUR_PROJECT_UUID</string>
          <key>PROJECT_CLIENT_KEY</key>
          <string>YOUR_PROJECT_CLIENT_KEY</string>
          <key>PROJECT_APP_UUID</key>
          <string>YOUR_PROJECT_APP_UUID</string>
        </dict>
        </plist>
        ```
      </Step>

      <Step title="Configuring AppDelegate.swift">
        Next, you'll need to head over to your `AppDelegate.swift` file to add an import of `react_native_particle_connect`.

        ```swift AppDelegate.swift theme={null}
        #import <react_native_particle_connect/react_native_particle_connect-Swift.h>
        ```

        Additionally, within your application's `application` method (as shown below), you'll need to include a handler condition derived from `ParticleConnectSchemeManager handleUrl:url`. This should be as simple as a `YES` (true) return upon a true value of `ParticleConnectSchemeManager handleUrl:url`.

        ```swift AppDelegate.swift theme={null}
        - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
          if ([ParticleConnectSchemeManager handleUrl:url] == YES) {
            return YES;
          } else {
            // other methods
          }
          return YES;
        }
        ```
      </Step>

      <Step title="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`.
      </Step>

      <Step title="Configuring Info.plist">
        Now, head over to your `Info.plist` file and include the following snippet.

        ```xml Info.plist theme={null}
        <key>LSApplicationQueriesSchemes</key>
        <array>
        <string>metamask</string>
        <string>phantom</string>
        <string>bitkeep</string>
        <string>imtokenv2</string>
        <string>rainbow</string>
        <string>trust</string>
        <string>zerion</string>
        <string>mathwallet</string>
        <string>oneinch</string>
        <string>awallet</string>
        <string>okex</string>
        <string>bnc</string>
        </array>
        <key>NSPhotoLibraryUsageDescription</key>
        <string>We need access in order to open photos of barcodes</string>
        <key>NSCameraUsageDescription</key>
        <string>We use the camera to scan barcodes</string>
        <key>NSFaceIDUsageDescription</key>
        <string>We use Face ID for secure access to the app.</string>
        ```
      </Step>

      <Step title="Configuring your Podfile">
        Finally, you'll need to edit your Podfile to ensure `particle_connect` is properly imported. Head over to the [linked guide](https://github.com/Particle-Network/particle-react-native/blob/master/particle-connect/example/ios/Podfile) to complete this if you have not already.
      </Step>
    </Steps>
  </Step>

  <Step title="Initializing Particle Connect">
    At this point, you've 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`).
    * `metadata`, a collection of information about your project.
    * `env`, affecting the information logged within your environment (`Env.dev`, `Env.production`, or `Env.staging`).

    An example of this has been included below.

    ```typeScript theme={null}
    const chainInfo: ChainInfo = Ethereum;
    const env = Env.Dev;
    const metadata = {
        url: 'https://connect.particle.network',
        icon: 'https://connect.particle.network/icons/512.png',
        name: 'Particle Connect',
        description: 'Particle Wallet'
    }

    particleConnect.init(chainInfo, env, metadata);
    particleAuthCore.init();
    ```
  </Step>

  <Step title="Facilitating connection">
    At this point, you're ready to facilitate connection through the Particle Connect modal (via either socials or standard wallets).

    To do this, you'll need to establish a config object specifying the:

    * Onboarding mechanisms you'd like to support, through `connectOptions` (such as `ConnectOption.Email`, `ConnectOption.Phone`, `ConnectOption.Social`, `ConnectOption.Wallet`).
    * Social login providers you'd like to support, through `socialProviders` (such as `EnableSocialProvider.Google`, `EnableSocialProvider.Apple`, and so on).
    * Wallets you'd like to be included as options within the modal, through `walletProviders` (such as EnableWallet.MetaMask, as shown below).
    * (Optionally), layout options altering the format of the connection modal through `additionalLayoutOptions`.
    * (Optionally), additional customizations, such as a custom icon, through `logo`.

    Upon generating this config, you'll be able to call `particleConnect.connectWithConnectKitConfig`, initiating the resulting connection modal.

    ```typeScript theme={null}
    const config = {
          //  You can control the array elements and adjust the UI order
          connectOptions: [ConnectOption.Email, ConnectOption.Phone, ConnectOption.Social, ConnectOption.Wallet],
          //  You can control the array elements and adjust the UI order
          socialProviders: [EnableSocialProvider.Google, EnableSocialProvider.Apple, EnableSocialProvider.Twitter, EnableSocialProvider.Discord, EnableSocialProvider.Github],
          //  You can control the array elements and adjust the UI order
          walletProviders: [{ enableWallet: EnableWallet.MetaMask, label: EnableWalletLabel.Recommended },
          { enableWallet: EnableWallet.OKX, label: EnableWalletLabel.Popular },
          { enableWallet: EnableWallet.Trust, label: EnableWalletLabel.None },
          { enableWallet: EnableWallet.Bitget, label: EnableWalletLabel.None }
          ],

          additionalLayoutOptions: {
            isCollapseWalletList: false,
            isSplitEmailAndSocial: true,
            isSplitEmailAndPhone: false,
            isHideContinueButton: false,
          },
          logo: base64Icon // base64 string or image URL
        };

    const accountInfo = await particleConnect.connectWithConnectKitConfig(config);
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieving User Information

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](/social-logins/api/server/getuserinfo)), you'll need to call `particleAuthCore.getUserInfo`.

An example of both approaches can be found below.

```typeScript theme={null}
const publicAddress = account.publicAddress
const walletType = account.walletType

if (walletType == WalletType.AuthCore) {
  const userInfo = await particleAuthCore.getUserInfo();
}
```

### Send a Transaction

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 `receiverAddress` (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.

```typeScript theme={null}
const evmAddress = await evm.getAddress();
const receiverAddress = "0x0000000000000000000000000000000000000000";
const value = BigNumber(0.000000001 * Math.pow(10, 18));
const data = "0x";

const transaction = EvmService.createTransaction(evmAddress, data, value, receiverAddress);
const txHash = await ParticleConnect.signAndSendTransaction(WalletType.AuthCore, account.publicAddress, transaction);
```

### Open Wallet

If you installed `@particle-network/rn-wallet`, you can open the (optional) **embedded wallet interface** any time after a user connects, use `particleWallet.setSupportChain` to set supported chains, then `particleWallet.navigatorWallet` to open the interface.

```typeScript theme={null}
const chainInfos = [Ethereum, EthereumSepolia, Base];
particleWallet.setSupportChain(chainInfos);

const display = WalletDisplay.Token;
particleWallet.navigatorWallet(display);
```

<Tip> To implement account abstraction within your React Native project, integrate the `particle_aa` SDK and refer to this [documentation](/aa/sdks/mobile/react). Additionally, a demo repository can be found [here](https://github.com/Particle-Network/particle-react-native/tree/master/particle-aa/example). </Tip>


# Quickstart: Integrating Particle Connect into Your Web Application
Source: https://developers.particle.network/social-logins/connect/quickstart/web-quickstart



Integrating **Particle Connect** into your web application can be done in **under five minutes**.

This guide provides a concise overview of how to install, configure, and enable social logins in a Next.js application using `create @particle-network/connectkit` as your starting point.

<Note>
  For a detailed explanation of each feature and more advanced configurations, refer to the [Particle Connect SDK reference](/social-logins/connect/desktop/web).
</Note>

***

<Steps>
  <Step title="Boilerplate: Initializing Particle Connect">
    The easiest way to get started with Particle Connect is through its built-in starter/boilerplate; this includes the core file setup and code structure needed to configure Particle Connect.

    To initialize this boilerplate, copy and execute one of the following commands.

    ```sh Terminal theme={null}
    npm init @particle-network/connectkit@latest
    # or
    pnpm create @particle-network/connectkit@latest
    # or
    yarn create @particle-network/connectkit
    ```

    After running one of the aforementioned commands, the CLI will guide you through a setup process; it will prompt you to enter a project name, choose your preferred framework (Next.js or React), and select additional options.

    ```shell Terminal theme={null}
    🤩 Welcome to Particle Network!

    ✔ What is the name of your project? … connectkit-aa-usage

    ✔ What is the template of your project? › create-next-app
    ✔ Which chains does your app support?​ › EVM
    ✔ Which ERC-4337 Contract does your app support?​ › BICONOMY-2.0.0
    ✔ Does it support an embedded wallet?​ … yes
    ```

    <Note>This guide will proceed with a Next.js project setup, although React (create-react-app) is also available.</Note>
  </Step>

  <Step title="Configuring Particle Connect">
    With a starter project initialized, you're ready to configure Particle Connect through its core component, `ConnectKitProvider`.

    Although before diving in too deep here, you'll need some keys from the [Particle dashboard](https://dashboard.particle.network).

    **Particle Connect** requires three key values from the dashboard to be initiated: `projectId`, `clientKey`, and `appId`.

    To retrieve these values for configuration within your application, follow these steps:

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network/)

        <div>
          <img alt="Login into Particle." />

          <img alt="Login into Particle." />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div>
          <img alt="Create Particle project." />

          <img alt="Create Particle project." />
        </div>
      </Accordion>

      <Accordion title="Create a new web application, or skip this step if you already have one">
        <div>
          <img alt="Create web app." />

          <img alt="Create web app." />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID (`projectId`), the client key (`clientKey`), and the application ID (`appId`)">
        <div>
          <img alt="Find app's credentials." />

          <img alt="Find app's credentials." />
        </div>
      </Accordion>
    </AccordionGroup>

    <Note>For a quick overview of the Particle dashboard, watch [this video](https://www.youtube.com/watch?v=d7DYCMNDmjo\&ab_channel=ParticleNetwork) or check out the [Dashboard Quickstart Guide](/social-logins/dashboard).</Note>

    After obtaining your `projectId`, `clientKey`, and `appId`, you'll need to use these to configure the aforementioned `ConnectKitProvider` component from `@particle-network/connectkit`.

    The boilerplate already includes the basic variable setup —just add your API keys to the `.env.sample` file and rename it to `.env`.

    <Tip>
      At this point, you're ready to move onto either running and testing the application or beginning development through `app/page.tsx`.

      Although, below we'll continue and go over some of the granular controls given to you through `ConnectKitProvider`.
    </Tip>
  </Step>

  <Step title="Configuring ConnectKitProvider">
    When working with `ConnectKitProvider`, it's recommended to use a dedicated `Connectkit.tsx` file in the `src` directory where you can configure and export the component. Then, you'll use this export to wrap your main App component (the location of your Particle Connect implementation through `ConnectButton`).

    Here’s how you can configure `ConnectKitProvider`:

    **Required Configurations:**

    * `projectId`, `clientKey`, and `appId` — Get these from the [Particle dashboard](https://dashboard.particle.network/), as covered prior.
    * `chains` — Specify the supported chains for your dApp (this is an array of Viem-originating chain objects imported from `@particle-network/connectkit/chains`).
    * `walletConnectors` — Define the wallets you want to support.

    **Optional Configurations:**

    * `theme` and `language` for basic customization of the connection modal UI.
    * Additional appearance customizations.

    <Note>In the boilerplate application, you'll find a pre-configured `Connectkit.tsx` file located in the `src` directory.</Note>

    Below is an example of a configured instance of `ConnectKitProvider`. For more details around each available property, head over to the [Particle Connect Web SDK reference](/social-logins/connect/desktop/web).

    <InteractiveConnectkit />

    <Tip>For more detailed information, visit the full [**Particle Connect** SDK documentation](/social-logins/connect/desktop/web).</Tip>
  </Step>

  <Step title="Wrap your application with ConnectKitProvider">
    Wrap your primary application component (wherever you place and use `ConnectButton` alongside the various hooks from Particle Connect) with the `ParticleConnectKit` component (exported from `ConnectKitProvider`).

    Here’s an example of what this looks like for a `layout.tsx` file:

    ```tsx layout.tsx [expandable] theme={null}
    import { ParticleConnectkit } from '@/connectkit'; // Export of a configured ConnectKitProvider instance
    import type { Metadata } from 'next';
    import { Inter } from 'next/font/google';
    import './globals.css';

    const inter = Inter({ subsets: ['latin'] });

    export const metadata: Metadata = {
      title: 'Particle Connectkit App',
      description: 'Generated by create next app',
    };

    export default function RootLayout({
      children,
    }: Readonly<{
      children: React.ReactNode;
    }>) {
      return (
        <html lang="en">
          <body className={inter.className}>
            <ParticleConnectkit>{children}</ParticleConnectkit>
          </body>
        </html>
      );
    }

    ```

    <Note>In the boilerplate application, you'll find a pre-configured `layout.tsx` file located in the `app` directory.</Note>
  </Step>

  <Step title="Facilitating logins and chain interactions">
    With **Particle Connect** now configured, you can proceed to enable social logins within your application through the aforementioned `ConnectButton` component.

    Additionally, for driving application-level interaction (after initial onboarding), `@particle-network/connectkit` provides a variety of hooks. You can explore all available hooks in the [Particle Connect SDK documentation](/social-logins/connect/desktop/web#key-react-hooks-for-particle-connect).

    The boilerplate application includes a basic example featuring only a **Connect** button (`ConnectButton`).

    After logging in (connecting), users can access the embedded wallet modal provided by Particle Connect via the button in the bottom right corner, unless customized through the `wallet` configuration within `ConnectKitProvider`.

    To explore additional features like fetching and displaying user information, balances, on-ramp services, and sending transactions using either the native Particle Provider (Viem-based WalletClient) or ethers.js through an EIP-1193 provider, paste the following code into `app/page.tsx`.

    ```tsx page.tsx [expandable] theme={null}
    "use client";

    import React, { useEffect, useState } from "react";

    // Particle imports
    import {
      ConnectButton,
      useAccount,
      useDisconnect,
      usePublicClient,
      useParticleAuth,
      useWallets,
    } from "@particle-network/connectkit";

    // Connectkit uses Viem, so Viem's features can be utilized
    import { formatEther, parseEther } from "viem";

    // Optional: Import ethers provider for EIP-1193 compatibility
    import { ethers, type Eip1193Provider } from "ethers";

    export default function Home() {
      // Initialize account-related states from Particle's useAccount hook
      const { address, isConnected, isConnecting, isDisconnected, chainId } =
        useAccount();
      const { disconnect, disconnectAsync } = useDisconnect();
      const { getUserInfo } = useParticleAuth();

      // Optional: Initialize public client for RPC calls using Viem
      const publicClient = usePublicClient();

      // Retrieve the primary wallet from the Particle Wallets
      const [primaryWallet] = useWallets();

      // Define state variables
      const [account, setAccount] = useState(null); // Store account information
      const [balance, setBalance] = useState<string>(""); // Store user's balance
      const [userAddress, setUserAddress] = useState<string>(""); // Store user's address
      const [userInfo, setUserInfo] = useState<any>(null); // Store user's information
      const [isLoadingUserInfo, setIsLoadingUserInfo] = useState<boolean>(false); // Loading state for fetching user info
      const [userInfoError, setUserInfoError] = useState<string | null>(null); // Error state for fetching user info
      const [recipientAddress, setRecipientAddress] = useState<string>(""); // Store recipient's address for transactions
      const [transactionHash, setTransactionHash] = useState<string | null>(null); // Store transaction hash after sending
      const [isSending, setIsSending] = useState<boolean>(false); // State for showing sending status

      // Connection status message based on the account's connection state
      const connectionStatus = isConnecting
        ? "Connecting..."
        : isConnected
        ? "Connected"
        : isDisconnected
        ? "Disconnected"
        : "Unknown";

      // Load account details and fetch balance when address or chainId changes
      useEffect(() => {
        async function loadAccount() {
          if (address) {
            setAccount(account);
            setUserAddress(address);
            await fetchBalance();
          }
        }
        loadAccount();
      }, [chainId, address]);

      // Fetch and set user information when connected
      useEffect(() => {
        const fetchUserInfo = async () => {
          setIsLoadingUserInfo(true);
          setUserInfoError(null);

          try {
            const userInfo = await getUserInfo();
            console.log(userInfo);
            setUserInfo(userInfo);
          } catch (error) {
            setUserInfoError(
              "Error fetching user info: The current wallet is not a particle wallet."
            );
            console.error("Error fetching user info:", error);
          } finally {
            setIsLoadingUserInfo(false);
          }
        };

        if (isConnected) {
          fetchUserInfo();
        }
      }, [isConnected, getUserInfo]);

      // Fetch user's balance and format it for display
      const fetchBalance = async () => {
        try {
          if (!address) return;
          const balanceResponse = await publicClient?.getBalance({ address });
          const balanceInEther = formatEther(balanceResponse!);
          console.log(balanceResponse);
          setBalance(parseFloat(balanceInEther).toFixed(4)); // Display balance with 4 decimal places
        } catch (error) {
          console.error("Error fetching balance:", error);
        }
      };

      // Handle user disconnect action
      const handleDisconnect = async () => {
        try {
          await disconnectAsync();
        } catch (error) {
          console.error("Error disconnecting:", error);
        }
      };

      // Option 1: Send transaction using ethers.js with a custom EIP-1193 provider
      const executeTxEthers = async () => {
        const tx = {
          to: recipientAddress,
          value: parseEther("0.01"), // Set value to 0.01 Ether
          data: "0x", // No data, as there is no contract interaction
        };

        setIsSending(true);

        try {
          const EOAprovider = await primaryWallet.connector.getProvider();
          const customProvider = new ethers.BrowserProvider(
            EOAprovider as Eip1193Provider,
            "any"
          );

          const signer = await customProvider.getSigner();
          const txResponse = await signer.sendTransaction(tx);
          const txReceipt = await txResponse.wait();

          if (txReceipt) {
            setTransactionHash(txReceipt.hash);
          } else {
            console.error("Transaction receipt is null");
          }
        } catch (error) {
          console.error("Error executing EVM transaction:", error);
        } finally {
          setIsSending(false);
        }
      };

      // Option 2: Send transaction using the native Particle provider
      const executeTxNative = async () => {
        try {
          const tx = {
            to: recipientAddress,
            value: parseEther("0.01"), // Set value to 0.01 Ether
            data: "0x", // No data, as there is no contract interaction
            chainId: primaryWallet.chainId, // Current chainId
            account: primaryWallet.accounts[0], // Primary account
          };

          setIsSending(true);

          const walletClient = primaryWallet.getWalletClient();
          const transactionResponse = await walletClient.sendTransaction(tx);

          setTransactionHash(transactionResponse);
          console.log("Transaction sent:", transactionResponse);
        } catch (error) {
          console.error("Failed to send transaction:", error);
        } finally {
          setIsSending(false);
        }
      };

      // Parameters for the on-ramp URL
      const fiatCoin = "USD";
      const cryptoCoin = "ETH";
      const network = "Ethereum";
      const theme = "dark";
      const language = "en";

      // Function to handle the on-ramp button click
      const handleOnRamp = () => {
        const onRampUrl = `https://ramp.particle.network/?fiatCoin=${fiatCoin}&cryptoCoin=${cryptoCoin}&network=${network}&theme=${theme}&language=${language}`;
        window.open(onRampUrl, "_blank");
      };

      // Function to copy text to clipboard
      const copyToClipboard = (text: string) => {
        navigator.clipboard.writeText(text).then(() => {
          alert("Copied to clipboard!");
        });
      };

      // Function to truncate Ethereum address
      const truncateAddress = (address: string) => {
        return address.slice(0, 6) + "..." + address.slice(-4);
      };

      return (
        <div className=" flex flex-col items-center justify-between p-8 bg-black text-white">
          {/* Header */}
          <header className="mb-8 flex flex-col items-center">
            <img
              src="https://camo.githubusercontent.com/8f19e01ee2f062917c087e75d1a504315a04fbf8d42cbcd61fc4b8a20f11118e/68747470733a2f2f692e696d6775722e636f6d2f786d647a5855342e706e67"
              alt="Particle Network Logo"
              className="mb-4 w-96"
            />
            <h1 className="text-4xl font-bold">Particle Connect 2.0</h1>
            <h2 className="mt-4 text-xl font-bold">
              Particle Connect Quickstart— Fetch user data and send trasnactions
            </h2>
          </header>

          <main className="flex-grow flex flex-col items-center justify-center w-full max-w-6xl mx-auto">
            {/* Display connection status */}
            <div className="bg-gray-800 p-4 rounded-lg shadow-lg max-w-sm mx-auto mb-4">
              <h2 className="text-md font-semibold text-white">
                Status: {connectionStatus}
              </h2>
            </div>

            {isConnected ? (
              <>
                <div className="flex justify-center w-full">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-4xl">
                    <div className="border border-purple-500 p-6 rounded-lg">
                      {isLoadingUserInfo ? (
                        <div>Loading user info...</div>
                      ) : userInfoError ? (
                        <div className="text-red-500">{userInfoError}</div>
                      ) : (
                        userInfo && ( // Conditionally render user info
                          <div className="flex items-center">
                            <h2 className="text-lg font-semibold text-white mr-2">
                              Name: {userInfo.name || "N/A"}
                            </h2>
                            {userInfo.avatar && (
                              <img
                                src={userInfo.avatar}
                                alt="User Avatar"
                                className="w-10 h-10 rounded-full"
                              />
                            )}
                          </div>
                        )
                      )}
                      <h2 className="text-lg font-semibold mb-2 text-white flex items-center">
                        Address: <code>{truncateAddress(userAddress)}</code>
                        <button
                          className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-1 px-2 ml-2 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg flex items-center"
                          onClick={() => copyToClipboard(userAddress)}
                        >
                          📋
                        </button>
                      </h2>
                      <h2 className="text-lg font-semibold mb-2 text-white">
                        Chain ID: <code>{chainId}</code>
                      </h2>
                      <h2 className="text-lg font-semibold mb-2 text-white flex items-center">
                        Balance: {balance !== "" ? balance : "Loading..."}
                        <button
                          className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-1 px-2 ml-2 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg flex items-center"
                          onClick={fetchBalance}
                        >
                          🔄
                        </button>
                      </h2>
                      <button
                        className="mt-4 bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"
                        onClick={handleOnRamp}
                      >
                        Buy Crypto with Fiat
                      </button>
                      <div>
                        <button
                          className="mt-4 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"
                          onClick={handleDisconnect}
                        >
                          Disconnect
                        </button>
                      </div>
                    </div>

                    <div className="border border-purple-500 p-6 rounded-lg">
                      <h2 className="text-2xl font-bold mb-2 text-white">
                        Send a transaction
                      </h2>
                      <h2 className="text-lg">Send 0.01</h2>
                      <input
                        type="text"
                        placeholder="Recipient Address"
                        value={recipientAddress}
                        onChange={(e) => setRecipientAddress(e.target.value)}
                        className="mt-4 p-2 w-full rounded border border-gray-700 bg-gray-900 text-white focus:outline-none focus:ring-2 focus:ring-purple-400"
                      />
                      <button
                        className="mt-4 bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"
                        onClick={executeTxNative}
                        disabled={!recipientAddress || isSending}
                      >
                        {isSending ? "Sending..." : `Send 0.01 Particle provider`}
                      </button>
                      <button
                        className="mt-4 bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"
                        onClick={executeTxEthers}
                        disabled={!recipientAddress || isSending}
                      >
                        {isSending ? "Sending..." : `Send 0.01 with ethers`}
                      </button>
                      {/* Display transaction notification with the hash */}
                      {transactionHash && (
                        <div className="mt-4 p-2 bg-gray-800 rounded-lg text-white">
                          Transaction Hash: {transactionHash}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </>
            ) : (
              <ConnectButton />
            )}
          </main>
        </div>
      );
    }
    ```

    <Tip>
      A Next.js demo repository containing the above code can be found [here](https://github.com/Particle-Network/particle-connectkit2.0-quickstart).
    </Tip>
  </Step>
</Steps>


# Particle Network Dashboard
Source: https://developers.particle.network/social-logins/dashboard

Overview of the Particle Network Dashboard.

The [Particle Dashboard](https://dashboard.particle.network) is the control center for integrating Particle’s Wallet-as-a-Service and SDKs.\
From here, you can manage projects, track users, customize login flows, configure paymasters, and access node endpoints.

***

<Frame>
  <iframe />
</Frame>

***

## Project Management

Every SDK requires three values: **Project ID**, **Client Key**, and **App ID**.\
You create these inside the dashboard by setting up:

1. **Projects**: Containers for multiple applications with shared settings.
2. **Applications**: Specific instances (Web, iOS, Android) identified by an **App ID**.

Applications let you configure features like:

* **Multi-device login**: Keep user accounts consistent across devices.
* **Redirect links**: Define where users land after login.

<Note>When creating an app, you’ll need to specify a domain. This can be any domain, even a placeholder like `demo.com`.</Note>

To retrieve these values, follow these steps:

<AccordionGroup>
  <Accordion title="Access the Particle Dashboard">
    Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network/)

    <div>
      <img alt="Login into Particle." />

      <img alt="Login into Particle." />
    </div>
  </Accordion>

  <Accordion title="Create a new project or enter an existing project">
    <div>
      <img alt="Create Particle project." />

      <img alt="Create Particle project." />
    </div>
  </Accordion>

  <Accordion title="Create a new web application, or skip this step if you already have one">
    <div>
      <img alt="Create web app." />

      <img alt="Create web app." />
    </div>
  </Accordion>

  <Accordion title="Retrieve the project ID (`projectId`), the client key (`clientKey`), and the application ID (`appId`)">
    <div>
      <img alt="Find app's credentials." />

      <img alt="Find app's credentials." />
    </div>
  </Accordion>
</AccordionGroup>

***

## User Activity

The **Activity** tab gives you real-time insight into app usage:

* Total, new, and active users
* Wallet connections and social logins
* Verification messages (SMS + email)

***

## Team

Use the **Team** tab to invite collaborators:

* **Administrators**: Full edit access (apps, branding, authentication, etc.)
* **Viewers**: Read-only access

Permissions apply at the **project** level (all apps inside).

***

## Users

The **Users** tab lists all individual users of your apps, showing:

* Linked social accounts (if any)
* EVM and Solana addresses
* Sign-up and last active timestamps

See also: [`getUserInfo`](/social-logins/api/server/getuserinfo).

***

## Custom Auth

For apps needing custom login flows, the **Custom** page supports JWT-based authentication (RS256).\
Configure fields like:

* JWKs URI
* Custom ID key
* Validation rules

This lets you plug in your own OAuth or identity provider.

<Note>Find a comple guide on how to implement [custom authentication via JWT](/social-logins/configuration/auth/jwt).</Note>

***

## Paymaster

The **Paymaster** page manages Particle’s [Omnichain Paymaster](/aa/architecture/omni-paymaster):

* Deposit stablecoins on one chain (e.g., Ethereum, BNB)
* Sponsor gas fees across 35+ supported chains
* Track deposits and usage

***

### Stats

The **Stats** tab shows analytics for requests tied to your project:

* Method distribution (e.g., `eth_getBalance`)
* Success rate
* Total request count

***

<Note>📹 A quick [dashboard walkthrough video](https://www.youtube.com/embed/d7DYCMNDmjo) is available.</Note>


# Security (MPC-TSS)
Source: https://developers.particle.network/social-logins/mpc-tss

Particle's Modular Smart WaaS uses MPC-TSS to secure private keys while enabling non-custodial social logins.

***

<Frame>
  <img />

  <img />
</Frame>

## Why Security Matters

Private keys are the foundation of blockchain ownership. Any WaaS (Wallet-as-a-Service) solution must guarantee secure key management.

Particle Network’s security model is built on four principles:

* Only the **user** controls their keys.
* Only the **user** can initiate signing.
* Accounts must be **recoverable** across devices.
* No **single point of failure** should ever exist.

To achieve this, Particle replaces the traditional single private key with a **multi-share system** using **MPC-TSS**.

***

## What is MPC-TSS?

**Threshold Signature Schemes (TSS)** split a secret (the private key) into multiple shares. The full key never exists in one place — even during generation.

* A subset of shares (e.g., 2/2 or 3/5) is enough to generate a signature.
* Keys can be refreshed periodically, improving resilience.
* MPC (Multi-Party Computation) ensures computations are done collaboratively without revealing the key.

This combination means **no entity ever has access to the full private key**.

***

## Particle’s 2/2 MPC-TSS Approach

Particle uses a **2/2 TSS model**:

* **Share 1**: stored locally on the user’s device.
* **Share 2**: stored in Particle’s **Trusted Execution Environment (TEE)**.

Key facts:

* The two shares are never combined, not even during signing.
* Each share reveals nothing about the private key on its own.
* Continuous key refresh makes compromise virtually impossible.

Users can also add a **[Master Password](/social-logins/configuration/auth/password)** to encrypt their local share, providing:

* Extra protection on top of social login.
* Secure cross-device wallet recovery.

***

## Supported Cryptographic Algorithms

Particle implements secure MPC versions of:

* **2-Party EdDSA** — Solana
* **2-Party ECDSA** — EVM chains

This makes the system **non-custodial, chain-agnostic, and highly secure**.

***

## Infrastructure Security

Beyond MPC-TSS, Particle’s infrastructure follows strict security standards:

* End-to-end TLS encryption
* Segregated public/private networks
* Intrusion detection monitoring
* Hardware Security Modules (HSMs)
* Dedicated Trustee TSS Party-2 Server

These measures ensure a secure foundation for all applications built on Particle.


# Network Coverage
Source: https://developers.particle.network/social-logins/network-coverage

A complete list of all networks covered by Particle's Social Logins SDKs.

# Mapping network coverage

Particle's Social Logins SDKs support a significant amount of EVM networks (roughly 80) alongside Solana and Tron, although to varying degrees. The full list with details on chain-specific support across the Particle Network tech stack can be found below.

***

## Wallet-as-a-Service

| Chains         | Account Abstraction | Chain IDs                                                                  |
| :------------- | :------------------ | :------------------------------------------------------------------------- |
| Solana         | x                   | Mainnet: 101, Testnet: 102, Devnet: 103                                    |
| Tron           | x                   | Mainnet: 728126428, Testnet Shasta: 2494104990, Testnet Nile: 3448148188   |
| Ethereum       | ✓                   | Mainnet: 1, Sepolia: 11155111, Holesky: 17000                              |
| Optimism       | ✓                   | Mainnet: 10, Sepolia: 11155420                                             |
| Base           | ✓                   | Mainnet: 8453, Sepolia: 84532                                              |
| Arbitrum       | ✓                   | One: 42161, Nova: 42170, Sepolia: 421614                                   |
| Linea          | ✓                   | Mainnet: 59144, Sepolia: 59141                                             |
| BNB Chain      | ✓                   | Mainnet: 56, Testnet: 97                                                   |
| opBNB          | ✓                   | Mainnet: 204, Testnet: 5611                                                |
| Polygon        | ✓                   | Mainnet: 137, Amoy: 80002                                                  |
| Polygon zkEVM  | ✓                   | Mainnet: 1101, Cardona: 2442                                               |
| Mantle         | ✓                   | Mainnet: 5000, Sepolia: 5003                                               |
| zkSync Era     | x                   | Mainnet: 324, Sepolia: 300                                                 |
| Gnosis         | ✓                   | Mainnet: 100, Testnet: 10200                                               |
| BOB            | ✓                   | Mainnet: 60808, Testnet: 111                                               |
| Manta          | ✓                   | Mainnet: 169, Sepolia Testnet: 3441006                                     |
| Metis          | x                   | Mainnet: 1088, Testnet: 599                                                |
| Core           | ✓                   | Mainnet: 1116, Testnet: 1115                                               |
| Moonbeam       | ✓                   | Mainnet: 1284, Testnet: 1287                                               |
| Moonriver      | ✓                   | Mainnet: 1285                                                              |
| Sei            | ✓                   | Mainnet: 1329, Testnet: 1328                                               |
| BEVM           | ✓                   | Mainnet: 11501, Testnet: 11503, Canary Mainnet: 1501, Canary Testnet: 1502 |
| Kava           | x                   | Mainnet: 2222, Testnet: 2221                                               |
| Peaq           | ✓                   | Mainnet: 2241, Testnet: 9990                                               |
| AILayer        | ✓                   | Mainnet: 2649, Testnet: 2648                                               |
| GM Network     | ✓                   | Mainnet: 2777                                                              |
| ZetaChain      | ✓                   | Mainnet: 7000, Testnet: 7001                                               |
| Cyber          | ✓                   | Mainnet: 7560, Testnet: 111557560                                          |
| Kaia           | x                   | Mainnet: 8217, Testnet: 1001                                               |
| Combo          | ✓                   | Mainnet: 9980, Testnet: 91715                                              |
| ZKFair         | ✓                   | Mainnet: 42766, Testnet: 43851                                             |
| Avalanche      | ✓                   | Mainnet: 43114, Testnet: 43113                                             |
| Celo           | x                   | Mainnet: 42220                                                             |
| MAP Protocol   | x                   | Mainnet: 22776, Testnet: 212                                               |
| Zeroone        | ✓                   | Mainnet: 27827, Testnet: 56400                                             |
| Mode           | ✓                   | Mainnet: 34443, Testnet: 919                                               |
| Oasis Emerald  | x                   | Mainnet: 42262, Testnet: 42261                                             |
| Blast          | ✓                   | Mainnet: 81457, Testnet: 168587773                                         |
| Ancient8       | ✓                   | Mainnet: 888888888, Testnet: 28122024                                      |
| Aurora         | x                   | Mainnet: 1313161554, Testnet: 1313161555                                   |
| Harmony        | x                   | Mainnet: 1666600000, Testnet: 1666700000                                   |
| Taiko          | ✓                   | Mainnet: 167000, Hekla: 167009                                             |
| PlatON         | x                   | Mainnet: 210425, Testnet: 2206132                                          |
| Scroll         | ✓                   | Mainnet: 534352, Sepolia: 534351                                           |
| Merlin         | ✓                   | Mainnet: 4200, Testnet: 686868                                             |
| B² Network     | ✓                   | Mainnet: 223, Testnet: 1123                                                |
| Bitlayer       | ✓                   | Mainnet: 200901, Testnet: 200810                                           |
| Xterio         | ✓                   | Mainnet (BNB): 112358, Mainnet (ETH): 2702128, Testnet (BNB): 1637450      |
| Astar zkEVM    | ✓                   | Mainnet: 3776, Testnet: 6038361                                            |
| IoTeX          | ✓                   | Mainnet: 4689, Testnet: 4690                                               |
| Immutable      | ✓                   | Testnet: 13473                                                             |
| EOSEVM         | x                   | Mainnet: 17777, Testnet: 15557                                             |
| Lorenzo        | ✓                   | Mainnet: 8329, Testnet: 83291                                              |
| SKALE          | x                   | Mainnet: 1482601649                                                        |
| zkLink         | x                   | Mainnet: 810180                                                            |
| ThunderCore    | x                   | Mainnet: 108, Testnet: 18                                                  |
| Cronos         | x                   | Mainnet: 25, Testnet: 338                                                  |
| OKTC           | x                   | Mainnet: 66, Testnet: 65                                                   |
| Conflux eSpace | x                   | Mainnet: 1030, Testnet: 71                                                 |
| Viction        | ✓                   | Mainnet: 88, Testnet: 89                                                   |
| Fuse           | ✓                   | Mainnet: 122, Testnet: 123                                                 |
| XLayer         | ✓                   | Mainnet: 195, Testnet: 196                                                 |
| Fantom         | ✓                   | Mainnet: 250, Testnet: 4002                                                |
| KCC            | x                   | Mainnet: 321, Testnet: 322                                                 |
| AINN           | x                   | Mainnet: 2649, Testnet: 2648                                               |
| TUNA           | x                   | Testnet: 89682                                                             |
| ElastOS        | ✓                   | Mainnet: 20, Testnet: 21                                                   |
| 5ire           | ✓                   | Mainnet: 995, Testnet: 997                                                 |
| Kakarot        | ✓                   | Testnet: 1802203764                                                        |
| Zircuit        | ✓                   | Testnet: 48899                                                             |
| Aura           | ✓                   | Mainnet: 6322, Testnet: 6321                                               |
| Gravity        | ✓                   | Mainnet: 1625, Testnet: 13505                                              |
| DODOChain      | ✓                   | Testnet: 53457                                                             |
| Duckchain      | ✓                   | Mainnet: 5545, Testnet: 202105                                             |
| Story Network  | ✓                   | Testnet: 1513                                                              |
| Plume          | ✓                   | Testnet: 161221135                                                         |
| Soneium        | ✓                   | Testnet: 1946                                                              |
| Lumia          | ✓                   | Mainnet: 994873017, Testnet: 1952959480                                    |
| Movement       | ✓                   | Devnet: 30732                                                              |
| HashKey        | ✓                   | Mainnet: 177, Testnet: 133                                                 |

<Info>
  Check out the [network coverage page](/aa/network-coverage) in the Account
  abstraction section to see the list of supported smart accounts.
</Info>


# Social Logins Overview
Source: https://developers.particle.network/social-logins/overview

Overview of the Social Logins SDKs in Particle Network.

<Frame>
  <img alt="Particle Network Onboarding SDKs" />
</Frame>

## Particle’s Onboarding SDKs

Particle offers two SDKs for user onboarding:

* **Particle Connect**: A single modal for both Web3 wallets and social logins, with optional Account Abstraction (AA) built in.
* **Particle Auth**: Social login only, linking Web2 identities (Google, Apple, Twitter, etc.) to an EOA wallet, with full UI customization.

<Note>Both SDKs can work alongside the AA SDK for smart account features.</Note>

***

### Which one should I pick?

**Particle Connect**

* You want one modal that covers both wallet connections and social logins.
* Account Abstraction (AA) features available out of the box if needed.
* You’re fine with a standardized modal UI (limited customization).

**Particle Auth**

* You only need social logins and want to provide users with an instant wallet.
* You want full control over the UI and the ability to embed login directly into your app’s flow.
* You’re building a Web2-style onboarding with a branded experience.

***

### Particle Connect

<Frame>
  <img alt="Particle Connect Login Modal" />
</Frame>

Particle Connect gives you a unified login modal where users can choose between Web3 wallets or social logins. It includes a built-in viem provider with AA features, making smart account transactions possible without extra setup.

<CardGroup>
  <Card title="Particle Connect Introduction" icon="plug" href="/social-logins/connect/introduction" />

  <Card title="Quickstart (Web)" icon="rocket" href="/social-logins/connect/quickstart/web-quickstart" />

  <Card title="Web SDK Reference" icon="code" href="/social-logins/connect/desktop/web" />
</CardGroup>

***

### Particle Auth

<Frame>
  <img alt="Particle Auth Login Modal" />
</Frame>

Particle Auth focuses on social logins only, provisioning an EOA wallet for the user and abstracting key management. Unlike Connect, it allows deep UI customization so you can tailor the login flow and embed it directly in your app. Pair it with the AA SDK to enable smart accounts.

<CardGroup>
  <Card title="Particle Auth Introduction" icon="user" href="/social-logins/auth/introduction" />

  <Card title="Quickstart (Web)" icon="rocket" href="/social-logins/auth/quickstart/web-quickstart" />

  <Card title="Web SDK Reference" icon="code" href="/social-logins/auth/desktop-sdks/web" />
</CardGroup>

***

### Additional Resources

<CardGroup>
  <Card title="Customization" icon="paintbrush" href="/social-logins/configuration/appearance/auth" />

  <Card title="Dashboard" icon="table-columns" href="/social-logins/dashboard" />

  <Card title="Network Coverage" icon="map" href="/social-logins/network-coverage" />
</CardGroup>


# Chains and Primary Assets Supported by Universal Accounts
Source: https://developers.particle.network/universal-accounts/cha/chains

A list of the blockchains and Primary Assets supported by Universal Accounts.

**Universal Accounts** support a wide range of networks, enabling users to interact across them with a **single account** and a **unified balance**.

## Supported Networks

### EVM-Compatible Chains

* **Ethereum** — Chain ID: **1**
* **BNB Chain** — Chain ID: **56**
* **Mantle** — Chain ID: **5000**
* **Monad** — Chain ID: **143**
* **Plasma** — Chain ID: **9745**
* **X Layer** — Chain ID: **196**
* **Base** — Chain ID: **8453**
* **Arbitrum** — Chain ID: **42161**
* **Avalanche** — Chain ID: **43114**
* **OP (Optimism)** — Chain ID: **10**
* **Polygon** — Chain ID: **137**
* **HyperEVM** — Chain ID: **999**
* **Berachain** — Chain ID: **80094**
* **Linea** — Chain ID: **59144**
* **Sonic** — Chain ID: **146**
* **Merlin** — Chain ID: **4200**

### Non-EVM Chains

* **Solana** — Chain ID: **101**

<Note>
  This list is regularly updated as support for new chains is added. All
  supported chains can be accessed through a single Universal Account—no
  separate wallets or setups required.
</Note>

## Primary Assets

**Primary Assets** are a set of key tokens with deep liquidity **that can be used for cross-chain transactions, including gas payments**. When engaging in a cross-chain operation, they're automatically selected and used by the SDK on a per-transaction basis.

<Note>
  Currently, the list of Primary Assets includes:

  * **ETH**
  * **USDT**
  * **USDC**
  * **BTC**
  * **SOL**
  * **BNB**
</Note>

When a user sends a transaction (e.g. swapping a token), the SDK will:

* Identify the optimal Primary Asset from the user’s portfolio. For example, it may select USDC on Polygon to allow a user to purchase a memecoin on Solana.
* Route liquidity across all the chains the user holds this Primary Asset using Universal Liquidity.
* Complete the transaction on the destination chain, even if the user holds **no assets on that chain**.

### Availability by Chain

Some **Primary Assets** are only available on specific chains, depending on native sources.

* **Solana** — Available Assets: **USDC, USDT, SOL**
* **Ethereum** — Available Assets: **USDC, USDT, ETH, BTC**
* **Base** — Available Assets: **USDC, ETH, BTC**
* **BNB Chain** — Available Assets: **USDC, USDT, ETH, BTC, BNB**
* **Mantle** — Available Assets: **USDT**
* **Monad** — Available Assets: **USDC**
* **Plasma** — Available Assets: **USDT**
* **X Layer** — Available Assets: **USDC, USDT**
* **HyperEVM** — Available Assets: **USDT**
* **Sonic** — Available Assets: **USDC**
* **Berachain** — Available Assets: **USDC**
* **Avalanche** — Available Assets: **USDC, USDT, ETH, BTC**
* **Arbitrum** — Available Assets: **USDC, USDT, ETH, BTC**
* **Optimism** — Available Assets: **USDC, USDT, ETH, BTC**
* **Linea** — Available Assets: **USDC, USDT, ETH, BTC**
* **Polygon** — Available Assets: **USDC, USDT, ETH, BTC**


# Build a Balance Breakdown Widget
Source: https://developers.particle.network/universal-accounts/cha/how-to/balances

Build a visual wallet dashboard pulling data from a Universal Account.

This guide explains how to **build a balance widget** that displays an account's multi-chain asset balances and their USD value, using the Universal Accounts SDK as its data source.

<Note>
  To see a live example of this, head to the [Universal Accounts demo](https://auth-universal-accounts.vercel.app/).
</Note>

<Frame>
  <img alt="Balance Widget" />
</Frame>

You’ll learn:

* What data to fetch from a Universal Account.
* How UAs' asset structure is organized.
* How to render a portfolio overview in a React component.

<Card title="Get started with Universal Accounts" icon="rocket" href="/universal-accounts/cha/web-quickstart">
  Check out our **Quickstart guide** to learn how to build an app leveraging Universal Accounts.
</Card>

***

## Fetching Primary Assets from a Universal Account

Once a Universal Account is initialized, you can retrieve the user’s cross-chain Primary Assets balances with:

```ts theme={null}
const assets = await universalAccount.getAssets();
```

This returns a list of tokens and their aggregated balances across all supported chains.

### Primary Assets Response Structure

Each entry in the response above represents a single token type (e.g. ETH, USDT, USDC), including its price, total balance, and per-chain breakdown.

<Note>
  This unified balance only includes Primary Assets, ***across*** [*any*](/universal-accounts/cha/chains) *chain* ***the UA holds them on***. The SDK will then automatically select the most efficient payment source and route assets to execute the transaction.
</Note>

You can find an example of the `JSON` structure below:

```json JSON [expandable] theme={null}
{
  "assets": [
    {
      "tokenType": "eth",                         // Token symbol
      "price": 1583.89,                           // Current price in USD
      "amount": 0.002555304503076061,             // Total across all chains
      "amountInUSD": 4.047321249377142,           // Total USD value

      "chainAggregation": [
        {
          "token": {
            "assetId": "eth",
            "type": "eth",
            "chainId": 59144,                     
            "address": "0x000000...0000",
            "decimals": 18,
            "realDecimals": 18,
            "isMultiChain": true,
            "isMultiChainDefault": false
          },
          "amount": 0.002555304503076061,         
          "amountInUSD": 4.047321249377142,
          "rawAmount": 2555304503076061
        },
        {
          "token": {
            "assetId": "eth",
            "type": "eth",
            "chainId": 1,                        
            "address": "0x000000...0000",
            "decimals": 18,
            "realDecimals": 18,
            "isMultiChain": true,
            "isMultiChainDefault": false
          },
          "amount": 0,
          "amountInUSD": 0,
          "rawAmount": 0
        }
      ]
    }
  ],
  "totalAmountInUSD": 4.047321249377142
}
```

<Info>
  Use the `chainAggregation` field to display balances per chain.
</Info>

## Complete Example: Universal Account Balance Widget

Below is a ready-to-use React component that displays a user’s Universal Account portfolio. It aggregates balances and USD values for each supported asset, sorts them by value, and renders a modern dashboard UI.

<Info>
  Get your Universal Accounts project ID from the [Particle Dashboard](https://dashboard.particle.network/).
</Info>

This widget makes it simple to show users an at-a-glance overview of their holdings—unified across all chains and token types—with just a single API call to `universalAccount.getAssets()`.

You can use or customize this component as a starting point for a wallet dashboard or portfolio summary.

<Note>
  This example uses:

  * **ShadCN UI components** (Card, CardContent). Ensure they are [set up in your project](https://ui.shadcn.com/docs/installation).
  * **Lucide Icons**—specifically the Wallet icon.
  * **Token icons** must be available at `/public/tokens/[symbol].png` (e.g., `/tokens/eth.png`, `/tokens/usdc.png`). You can customize or replace these as needed.
</Note>

Below you will find the complete code for the `BalanceWidget` component:

```tsx BalanceWidget.tsx [expandable] theme={null}
"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Wallet } from "lucide-react";

type ChainInfo = {
  token: {
    assetId?: string;
    chainId: number;
    address: string;
  };
  amount: number;
  amountInUSD: number;
};

type Asset = {
  tokenType: string;
  price: number;
  amount: number;
  amountInUSD: number;
  chainAggregation: ChainInfo[];
};

type WalletWidgetProps = {
  assets: Asset[];
  totalAmountInUSD: number;
};

/**
 * Formats a number as currency with appropriate precision
 */
const formatCurrency = (value: number, decimals = 2): string => {
  return value.toLocaleString(undefined, {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  });
};

/**
 * Formats a crypto amount with appropriate precision
 */
const formatCryptoAmount = (value: number): string => {
  return value.toLocaleString(undefined, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 4,
  });
};

/**
 * WalletWidget component displays a user's crypto asset portfolio
 */
export default function WalletWidget({
  assets,
  totalAmountInUSD,
}: WalletWidgetProps) {
  // Filter valid assets with positive USD values
  const validAssets = assets
    .filter(
      (asset) =>
        asset &&
        typeof asset.tokenType === "string" &&
        typeof asset.amount === "number" &&
        typeof asset.amountInUSD === "number" &&
        !isNaN(asset.amount) &&
        !isNaN(asset.amountInUSD) &&
        asset.amountInUSD > 0
    )
    // Sort by USD value (highest first)
    .sort((a, b) => b.amountInUSD - a.amountInUSD);

  return (
    <div className="w-full max-w-[800px] mx-auto">
      <Card className="bg-gradient-to-br from-purple-700 to-purple-900 text-white border-none rounded-xl shadow-xl overflow-hidden relative">
        <CardContent className="p-8">
          <div className="absolute top-4 right-4 text-white/70 text-sm font-medium">
            Universal Account Overview
          </div>

          {/* Asset list in top right corner */}
          <div className="absolute top-10 right-4 w-[220px] max-h-[240px] overflow-y-auto bg-purple-800/50 backdrop-blur-sm rounded-xl p-4 space-y-2 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
            {validAssets.map((asset) => (
              <div
                key={asset.tokenType}
                className="flex items-center justify-between p-2"
              >
                <div className="flex items-center gap-3">
                  <div className="h-10 w-10 rounded-full bg-purple-700/50 flex items-center justify-center overflow-hidden">
                    <img
                      src={`/tokens/${asset.tokenType.toLowerCase()}.png`}
                      alt={`${asset.tokenType} logo`}
                      className="w-8 h-8 object-contain"
                    />
                  </div>
                  <div>
                    <div className="font-medium text-xs uppercase">
                      {asset.tokenType}
                    </div>
                    <div className="text-xs text-purple-200">
                      {formatCryptoAmount(asset.amount)}
                    </div>
                  </div>
                </div>
                <div className="text-right">
                  <div className="font-medium text-sm">
                    ${formatCurrency(asset.amountInUSD)}
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Main content */}
          <div className="max-w-xs">
            <h2 className="text-3xl font-bold mb-1">Your Universal Account</h2>
            <p className="text-purple-200 mb-6">
              Track your crypto assets across multiple chains in one place.
            </p>
            <div className="flex items-center text-3xl font-bold mt-8">
              <Wallet className="mr-2 h-6 w-6" />$
              {formatCurrency(totalAmountInUSD)}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
```

You can then pass the data from the Primary Assets response to the `WalletWidget` component:

```tsx theme={null}
const primaryAssets = await universalAccount.getPrimaryAssets();

<WalletWidget
  assets={primaryAssets.assets}
  totalAmountInUSD={primaryAssets.totalAmountInUSD}
/>
```

<Note>
  This component provides a basic summary of the user's assets. To show more details—including a full chain-by-chain breakdown—you can customize it as needed.

  For a full breakdown example, refer to the [Universal Accounts with Ethers demo](https://github.com/soos3d/ethers-universal-accounts/blob/main/ethers-universal-accounts/app/components/Portfolio.tsx), or see it [live here](https://ethers-universal-accounts.vercel.app/).
</Note>

## What's Next?

Explore the SDK reference for more advanced capabilities.

<CardGroup>
  <Card title="SDK Reference" icon="code" href="/universal-accounts/ua-reference/desktop/web">
    Learn more about the SDK APIs.
  </Card>

  <Card title="Supported Chains" icon="link" href="/universal-accounts/cha/chains">
    See the different chains supported by the SDK.
  </Card>
</CardGroup>


# Convert Assets with Universal Accounts
Source: https://developers.particle.network/universal-accounts/cha/how-to/conversions

This guide explains how to use Universal Accounts to convert existing Primary Assets across chains.

The Universal Accounts SDK supports powerful cross-chain execution through `createUniversalTransaction()`.

<Info>
  This method ensures that a specified **Primary Asset** is made available on a destination chain—by sourcing and converting any supported Primary Asset from the user’s Universal Account, regardless of where they’re held.
</Info>

In this example, we use it to convert any Primary Asset into a specific Primary Asset on any supported chain—with no bridges or manual steps, essentially creating a conversion transaction.

This is ideal for use cases like topping up gas on a new chain, funding transactions in a required token, or consolidating assets into a preferred currency.

## Creating a Custom Universal Transaction

To initiate a cross-chain transaction, use `createUniversalTransaction()` with the following parameters:

* `chainId`: the destination chain where the asset should be made available
* `expectTokens`: a list of expected tokens and amounts you want to receive on the destination chain
* `transactions` (optional): an array of follow-up actions to execute after the conversion (e.g., contract interactions). When empty, the converted tokens are sent back to the Universal Account.

<Note>
  Check out the [Quickstart](/universal-accounts/cha/web-quickstart) to learn how to set up Universal Accounts in your app.
</Note>

The following snippet shows how to create a conversion transaction:

```tsx page.tsx theme={null}
import { CHAIN_ID, SUPPORTED_TOKEN_TYPE } from "@particle-network/universal-account-sdk";

const transaction = await universalAccount.createUniversalTransaction({
  chainId: CHAIN_ID.BASE_MAINNET,
  expectTokens: [
    {
      type: SUPPORTED_TOKEN_TYPE.USDC,
      amount: "1",
    },
  ],
  transactions: [],
});
```

This method constructs a cross-chain execution plan that:

* Detects available assets across all chains within the Universal Account
* Calculates the optimal conversion path to fulfill the expectTokens requirement

<Info>
  If the user doesn’t have the expected token on the destination chain, the SDK will automatically convert and route value from other chains or tokens they hold—fully abstracted from the user.
</Info>

<Card title="Find more details about custom Universal Transactions" icon="code" href="/universal-accounts/ua-reference/desktop/web#sending-a-custom-payable-transaction">
  See full SDK reference for `createUniversalTransaction`
</Card>

### Sending the Transaction

Once the transaction object is built, the next step is to have the user sign it and submit it for execution.

The returned transaction object includes important metadata, including the **rootHash**, which the user must sign to authorize the transaction.

Here’s how you can sign and send the transaction using a browser wallet with `ethers.js`:

```tsx theme={null}
import { ethers, getBytes } from "ethers";

// Initialize the provider and signer
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();

// Sign the root hash
const signature = await signer.signMessage(
  getBytes(transaction.rootHash)
);

// Send the signed transaction
const result = await universalAccount.sendTransaction(
  transaction,
  signature
);
```

Once signed and submitted, the transaction will execute on the destination chain, completing any asset conversions. The resulting tokens will be available in the user’s Universal Account balance.

<Note>
  To learn how to display transaction previews before user confirmation, see the [Previewing Transaction Details](/universal-accounts/cha/how-to/tx-preview) guide.

  <p />

  For handling the response after sending a transaction, refer to the [Send Transaction Response Structure](/universal-accounts/ua-reference/desktop/web#sendtransaction-response-structure) in the SDK reference.
</Note>

## Full Conversion Widget

The following is a complete `TSX` component that implements the conversion flow.

This is a simple version and allows the user to convert any **Primary Asset** they hold into **USDC** on **Base** or **Arbitrum**.

```tsx SimpleConversionWidget.tsx [expandable] theme={null}
"use client";

import { useState } from "react";
import { ethers, getBytes } from "ethers";
import {
  UniversalAccount,
  CHAIN_ID,
  SUPPORTED_TOKEN_TYPE,
} from "@particle-network/universal-account-sdk";

const networks = [
  { id: "arbitrum", name: "Arbitrum" },
  { id: "base", name: "Base" },
];

// Network mapping to chain IDs
const networkToChainId = {
  arbitrum: CHAIN_ID.ARBITRUM_MAINNET_ONE,
  base: CHAIN_ID.BASE_MAINNET,
};

/**
 * SimpleConversionWidget
 *
 * A self-contained component for converting tokens to USDC using Universal Accounts
 * This component handles both UI and transaction logic
 */
export function SimpleConversionWidget({
  universalAccount,
  onSuccess,
  onError,
}: {
  universalAccount: UniversalAccount;
  onSuccess?: (txId: string) => void;
  onError?: (error: string) => void;
}) {
  // State for form inputs
  const [amount, setAmount] = useState("");
  const [selectedNetwork, setSelectedNetwork] = useState(networks[0].id);

  // Transaction states
  const [isLoading, setIsLoading] = useState(false);
  const [txHash, setTxHash] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  /**
   * Handle the conversion transaction
   */
  const handleConvert = async () => {
    if (!amount || !selectedNetwork || !universalAccount) return;

    setIsLoading(true);
    setErrorMessage("");

    try {
      // 1. Create the transaction
      const chainId =
        networkToChainId[selectedNetwork as keyof typeof networkToChainId];

      const transaction = await universalAccount.createUniversalTransaction({
        chainId: chainId,
        expectTokens: [
          {
            type: SUPPORTED_TOKEN_TYPE.USDC,
            amount: String(amount),
          },
        ],
        transactions: [],
      });

      // 2. Sign the transaction with the owner wallet
      if (!window.ethereum) {
        throw new Error("MetaMask not found");
      }

      const provider = new ethers.BrowserProvider(window.ethereum);
      const signer = await provider.getSigner();
      const signature = await signer.signMessage(
        getBytes(transaction.rootHash)
      );

      // 3. Send the transaction
      const result = await universalAccount.sendTransaction(
        transaction,
        signature
      );

      setTxHash(result.transactionId);

      // 4. Call onSuccess callback if provided
      if (onSuccess) {
        onSuccess(result.transactionId);
      }
    } catch (error) {
      console.error("Error executing transaction:", error);
      const errorMsg =
        error instanceof Error ? error.message : "Unknown error occurred";
      setErrorMessage(errorMsg);

      // Call onError callback if provided
      if (onError) {
        onError(errorMsg);
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="conversion-widget border border-gray-700 rounded-lg p-4 w-full">
      {/* Header */}
      <div className="mb-4">
        <h2 className="text-xl font-bold mb-1">Convert to USDC</h2>
        <p className="text-sm text-gray-400">
          Convert your tokens to USDC on Arbitrum or Base
        </p>
      </div>

      {/* Form Content */}
      <div className="space-y-4">
        {/* Amount Input */}
        <div>
          <label
            htmlFor="amount"
            className="block text-sm font-medium text-gray-200 mb-1"
          >
            Amount
          </label>
          <input
            id="amount"
            type="number"
            placeholder="Enter amount"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        {/* Network Select */}
        <div>
          <label
            htmlFor="network"
            className="block text-sm font-medium text-gray-200 mb-1"
          >
            Network
          </label>
          <select
            id="network"
            value={selectedNetwork}
            onChange={(e) => setSelectedNetwork(e.target.value)}
            className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            {networks.map((network) => (
              <option key={network.id} value={network.id}>
                {network.name}
              </option>
            ))}
          </select>
        </div>

        {/* Convert Button */}
        <button
          onClick={handleConvert}
          disabled={!amount || isLoading}
          className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 rounded-md text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isLoading ? "Converting..." : "Convert to USDC"}
        </button>

        {/* Transaction Result */}
        {txHash && (
          <div className="mt-4 p-3 bg-green-800 bg-opacity-20 border border-green-700 rounded-md">
            <p className="text-sm text-green-400">
              Transaction successful! ID: {txHash.substring(0, 10)}...
              {txHash.slice(-6)}
            </p>
          </div>
        )}

        {/* Error Message */}
        {errorMessage && (
          <div className="mt-4 p-3 bg-red-800 bg-opacity-20 border border-red-700 rounded-md">
            <p className="text-sm text-red-400">Error: {errorMessage}</p>
          </div>
        )}
      </div>
    </div>
  );
}
```

## What’s Next?

<CardGroup>
  <Card title="SDK Reference" icon="code" href="/universal-accounts/ua-reference/desktop/web">
    See full API for `createUniversalTransaction`
  </Card>

  <Card title="Supported Primary Assets" icon="coins" href="/universal-accounts/cha/chains#primary-assets">
    View all Primary Assets and chains supported for conversion
  </Card>
</CardGroup>


# Enabling Cross-Chain Deposits via Universal Accounts
Source: https://developers.particle.network/universal-accounts/cha/how-to/deposit-flow

Implement a cross-chain deposit flow using Universal Accounts.

## Overview

This guide demonstrates how to integrate **Universal Accounts** to facilitate cross-chain deposits in dApps that already support **EOA** wallets.

This deposit flow is ideal for applications with an existing wallet connection flow. It enables users to deposit the necessary assets to interact with your dApp (and any dApp leveraging Universal Accounts) from any supported chain, **without manually bridging.**

<Note>
  This guide is based on a demo app allowing users to turn different assets on multiple chains into BNB on BNB Chain. However, Universal Accounts users can deposit from any supported chain. To better understand this deposit flow, try out our [Live demo](https://universal-accounts-flow-demo.vercel.app/).
</Note>

<Card title="Demo App Repository" icon="wand-magic-sparkles" href="https://github.com/soos3d/universal-accounts-flow-demo">
  Explore the above Demo app's code on GitHub.
</Card>

***

## Universal Accounts' Deposit Flow

Here’s how the deposit flow works in the Demo app from a user’s perspective. Within this app, Universal Accounts are used to convert users' assets across multiple chains into BNB in BNB Chain and withdraw it:

<Steps>
  <Step title="Connect Wallet">
    The user connects an EOA wallet (e.g., MetaMask), linking it to their **Universal Account**.
  </Step>

  <Step title="Deposit Tokens into the Universal Account">
    The app then scans their EOA wallet for **USDC** and **USDT** across all [supported chains](/universal-accounts/cha/chains).

    Using the provided UI, the user selects any of those tokens to deposit into their Universal Account—no manual bridging required.

    <Note>
      The demo includes a basic UI for depositing, but users can also manually deposit any supported [Primary Asset](/universal-accounts/cha/chains#primary-assets) directly to the Universal Account address.
    </Note>
  </Step>

  <Step title="Convert to BNB and Withdraw to EOA">
    With assets now held in the Universal Account across chains, the user withdraws **BNB on BNB Chain** back into their EOA. Routing and conversion are handled automatically by the Universal Account.
  </Step>

  <Step title="Use BNB in the dApp">
    The user can now use the received BNB in their EOA.
  </Step>
</Steps>

***

## Setup Instructions

The following instructions are a high-level overview of how to implement a deposit flow using Universal Accounts. For a complete implementation, refer to the [Demo app](https://github.com/soos3d/universal-accounts-flow-demo).

<Steps>
  <Step title="Install the SDK">
    ```bash theme={null}
    npm install ethers @particle-network/universal-account-sdk
    ```
  </Step>

  <Step title="Configure Your Environment">
    Add your project ID to `.env.local`:

    ```env theme={null}
    NEXT_PUBLIC_PROJECT_ID=your_project_id
    NEXT_PUBLIC_CLIENT_KEY=your_client_key
    NEXT_PUBLIC_APP_ID=your_app_id
    ```
  </Step>
</Steps>

<Info>
  Get your **project ID**, **client key**, and **app ID** from the [Particle Dashboard](https://dashboard.particle.network/).
</Info>

***

## Implementation Details

### 1. Initialize Universal Account

The first step is to initialize the Universal Account instance using the project ID and Owner Address (the signer EOA), e.g. as follows:

```tsx page.tsx theme={null}
const ua = new UniversalAccount({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  projectClientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  projectAppUuid: process.env.NEXT_PUBLIC_APP_ID!,
  ownerAddress: walletAddress,
});
```

### 2. Create a Custom Universal Account Transfer

Once the user has deposited assets into their Universal Account, the next step is to generate a custom transfer that withdraws a specific amount of tokens back to their EOA.

This is done using a **payable** Universal Account transaction, which guarantees that the specified amount of the target token (in this case, BNB) is included in the transaction.

<Note>
  In the demo app, the `bnbAmount` is derived from the USD value the user wants to withdraw, and the `to` address is set to the user’s connected **EOA**.
</Note>

Here’s a basic example:

```tsx page.tsx theme={null}
const transaction = await ua.createUniversalTransaction({
        chainId: CHAIN_ID.BSC_MAINNET,
        expectTokens: [
          {
            type: SUPPORTED_TOKEN_TYPE.BNB,
            amount: bnbAmount,
          },
        ],
        transactions: [
          {
            to: walletAddress,
            data: "0x",
            value: toBeHex(parseEther(bnbAmount)),
          },
        ],
      });
```

You can also find the full implementation on the following repository:

<Card title="Create a Custom Universal Transaction" icon="code" href="https://github.com/soos3d/universal-accounts-flow-demo/blob/adcb62ba340691c131efa18e05a02be38d560133/app/components/DepositSection.tsx#L113">
  **Code location:** `components` → `DepositSection.tsx` → `generateTransactionPreview()`
</Card>

### 3. Sign and Execute the Transaction

With the Universal Account transaction prepared, the final step is to sign and execute it.

The user signs the transaction’s root hash using their connected EOA wallet (e.g., MetaMask). Once signed, the transaction is submitted through Universal Accounts' infrastructure.

You can see a basic example in the following snippet:

```tsx page.tsx theme={null}
// Get wallet instance for signing
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();

// Sign and send the transaction
const messageBytes = ethers.getBytes(transactionPreview.rootHash);
const signature = await signer.signMessage(messageBytes);
const sendResult = await universalAccount.sendTransaction(
    transactionPreview,
    signature
);

console.log("Transaction result:", sendResult);
```

You can also find the full implementation in the following repository:

<Card title="Sign and Execute the Transaction" icon="code" href="https://github.com/soos3d/universal-accounts-flow-demo/blob/adcb62ba340691c131efa18e05a02be38d560133/app/components/DepositSection.tsx#L158">
  **Code location:** `components` → `DepositSection.tsx` → `handleDeposit()`
</Card>

***

## How Does This Improve My App's UX?

In this guide, we've introduced a new deposit pattern powered by **Universal Accounts**, without needing to bridge, swap, or manage gas.

Some of it's key benefits are:

* **No bridges or manual swaps:** Users don’t need to know or manage source and destination chains.
* **EOA compatibility:** Works alongside existing wallet flows (e.g., MetaMask).
* **Asset flexibility:** Users can deposit from any chain using tokens they already hold.
* **Simplified UX:** One clear, predictable transaction instead of multiple approvals and steps.

## What's Next?

Explore the SDK reference for more advanced capabilities.

<CardGroup>
  <Card title="SDK Reference" icon="code" href="/universal-accounts/ua-reference/desktop/web">
    Learn more about the SDK APIs.
  </Card>

  <Card title="Supported Chains" icon="link" href="/universal-accounts/cha/chains">
    See which chains are supported.
  </Card>
</CardGroup>

<Card title="Demo App Repository" icon="wand-magic-sparkles" href="https://github.com/soos3d/universal-accounts-flow-demo">
  Explore the code on GitHub.
</Card>


# How-to Guides
Source: https://developers.particle.network/universal-accounts/cha/how-to/overview

Step-by-step guides for building with the Universal Accounts SDK.

<Note>
  Learn more about the **Universal Accounts SDK** and its role in **chain abstraction** and **cross-chain app development** in the [section intro](/universal-accounts/cha/overview).
</Note>

***

## Overview

This section provides **hands-on, task-based tutorials** for developers building with the **Particle Network Universal Accounts SDK**.\
Each guide focuses on implementing a real-world feature of **chain abstraction** — from connecting browser wallets and fetching balances to accepting **cross-chain deposits** and handling **cross-ecosystem transactions**.

These examples are ideal for teams integrating **Universal Accounts** into existing Web3 apps to enable **multi-chain interoperability**, **unified balances**, and **bridge-free asset transfers**.\
If you’ve already integrated **Particle Auth** or **ConnectKit**, these guides will help you extend functionality with **cross-chain operations** and **abstracted transaction flows**.

***

## What You’ll Learn

* **Integrate with Browser Wallets** — connect standard EOA wallets and enable hybrid login with Universal Accounts.
* **Build a Balance Widget** — fetch, aggregate, and display user balances across all supported chains in one view.
* **Use Universal Accounts as Deposit Flow** — accept deposits in stablecoins or tokens from any supported chain, automatically available on your target network without bridges.
* **Preview Transaction Details** — generate transaction previews using the SDK to verify execution parameters and simulate cross-chain actions.
* **Convert Primary Assets** — convert or swap tokens within a Universal Account, supporting **multi-chain liquidity** and **gas abstraction**.

***

## Before You Start

Before going through these guides, ensure your **Universal Accounts SDK environment** is properly configured:

1. **Get your API key** — create a project in the [Particle Dashboard](https://dashboard.particle.network/) and retrieve your SDK keys for authentication.
2. **Understand the SDK fundamentals** — read the [Universal Accounts Overview](/universal-accounts/cha/overview) to learn how it unifies user identities, balances, and transaction logic across chains.
3. **Verify supported networks** — check the [Supported Chains](/universal-accounts/cha/chains).

***

## Next Steps

Choose a guide to begin building with **chain abstraction**:

<CardGroup>
  <Card title="Quick Start Guide" icon="rocket" href="/universal-accounts/cha/web-quickstart">
    Initialize a fully chain-abstracted starter app with the Universal Accounts SDK.
  </Card>

  <Card title="Integrate with Browser Wallets" href="/universal-accounts/cha/how-to/integrate-browser-wallets" icon="computer">
    Connect browser wallets and support hybrid Universal Account logins for EOA and smart accounts.
  </Card>

  <Card title="Build a Balance Widget" href="/universal-accounts/cha/how-to/build-balance-widget" icon="wallet">
    Fetch and display real-time, multi-chain balances using the Universal Accounts SDK.
  </Card>

  <Card title="Use Universal Accounts as Deposit Flow" href="/universal-accounts/cha/how-to/deposit-flow" icon="wand-magic-sparkles">
    Accept deposits from any supported chain and eliminate manual bridging or wrapping.
  </Card>

  <Card title="Preview Transaction Details" href="/universal-accounts/cha/how-to/preview-transaction" icon="file">
    Simulate and preview cross-chain transaction data before execution.
  </Card>

  <Card title="Convert Primary Assets" href="/universal-accounts/cha/how-to/convert-assets" icon="repeat">
    Swap tokens across supported networks and handle gas abstraction seamlessly.
  </Card>
</CardGroup>


# Integrating Universal Accounts with Browser Wallets
Source: https://developers.particle.network/universal-accounts/cha/how-to/provider

Learn how to integrate Universal Accounts alongside standard EVM wallets (e.g. MetaMask).

Within this guide, you'll learn how to use **Universal Accounts** alongside browser-injected EVM wallets —such as **MetaMask** or other providers.

You’ll learn how to:

* Initialize a Universal Account from a connected EOA.
* Create and sign a transaction with MetaMask.
* Send the transaction through the Universal Accounts SDK.

<Note>
  This guide uses `window.ethereum` as the provider used via `ethers.js`.
</Note>

***

## Getting Started

To start, ensure you have an app set up with a browser-injected EVM wallet like **MetaMask** installed. Then, follow the steps below:

<Info>
  You can find a repository with a working example of this integration [on GitHub](https://github.com/soos3d/ethers-universal-accounts).
</Info>

<Steps>
  <Step title="Install the Universal Accounts SDK">
    Install the required dependencies in your project:

    <CodeGroup>
      ```bash npm theme={null}
      npm install ethers @particle-network/universal-account-sdk
      ```

      ```bash yarn theme={null}
      yarn add ethers @particle-network/universal-account-sdk
      ```
    </CodeGroup>
  </Step>

  <Step title="Set Environment Variables">
    Add your Universal Accounts project ID to `.env.local`:

    ```env .env theme={null}
    NEXT_PUBLIC_PROJECT_ID="YOUR_PROJECT_ID"
    NEXT_PUBLIC_CLIENT_KEY="YOUR_CLIENT_KEY"
    NEXT_PUBLIC_APP_ID="YOUR_APP_ID"
    ```

    <Info>
      Get your Universal project keys from the [Particle Dashboard](https://dashboard.particle.network/).

      Find a full rundown of the process on the [Universal Accounts SDK](/universal-accounts/ua-reference/desktop/web) reference page.
    </Info>
  </Step>
</Steps>

***

## Set Up a Browser Wallet

To interact with Universal Accounts using `window.ethereum`, you first need to connect to an EVM-compatible browser wallet like MetaMask.

Here’s a simple example using `ethers.js`:

```tsx theme={null}
import { ethers } from "ethers";

// Ensure MetaMask (or another injected provider) is available
if (!window.ethereum) {
  throw new Error("MetaMask is not installed");
}

const provider = new ethers.BrowserProvider(window.ethereum);

// Prompt user to connect their wallet
await provider.send("eth_requestAccounts", []);

// Retrieve the connected account
const accounts = await provider.listAccounts();
const walletAddress = accounts[0].address;
setWalletAddress(walletAddress);
```

<Note>
  This example uses `ethers.BrowserProvider`, available in **ethers v6**.
</Note>

This wallet address can now be passed into the Universal Account SDK as the `ownerAddress`.

## Initializing a Universal Account

Once the user connects their wallet and you obtain their EOA address, create a new Universal Account instance:

```ts theme={null}
import { UniversalAccount } from "@particle-network/universal-account-sdk";

const universalAccount = new UniversalAccount({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  projectClientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  projectAppUuid: process.env.NEXT_PUBLIC_APP_ID!,
  ownerAddress: address,
  // If not set it will use auto-slippage
  tradeConfig: {
    slippageBps: 100, // 1% slippage tolerance
    //usePrimaryTokens: [SUPPORTED_TOKEN_TYPE.SOL], // Specify token to use as source (only for swaps)
  },
});
```

<Info>
  You only need the EOA wallet address to initialize a Universal Account.
</Info>

***

## Sending a Transaction with a Browser Wallet

Once you have a Universal Account instance, you can use it to send transactions.

The code below shows how to set up a custom transaction using the user's browser-injected EVM wallet as a signer.

In this case, the funds will be automatically sourced from the user's [Primary Assets](/universal-accounts/cha/chains#primary-assets) and converted into **1 USDT** on **Avalanche**.

```ts theme={null}
import { ethers } from "ethers";
import { CHAIN_ID, SUPPORTED_TOKEN_TYPE } from "@particle-network/universal-account-sdk";

const transaction = await universalAccount.createUniversalTransaction({
  chainId: CHAIN_ID.AVALANCHE_MAINNET,
  expectTokens: [
    {
      type: SUPPORTED_TOKEN_TYPE.USDT,
      amount: "1",
    },
  ],
  transactions: [],
});

if (!window.ethereum) {
  throw new Error("Wallet not found");
}

const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const signature = await signer.signMessage(transaction.rootHash);

const result = await universalAccount.sendTransaction(transaction, signature);

console.log(`View on Explorer: https://universalx.app/activity/details?id=${result.transactionId}`);
```

This pattern works for all transaction types supported by the SDK.

<Card title="More Transaction Examples" icon="coin" href="/universal-accounts/ua-reference/desktop/web#sending-a-transfer-transaction">
  Check our SDK reference for more transaction examples.
</Card>

***

## What’s Next?

Explore the SDK reference for more advanced capabilities.

<CardGroup>
  <Card title="SDK Reference" icon="code" href="/universal-accounts/ua-reference/desktop/web">
    Learn more about the SDK APIs.
  </Card>

  <Card title="Supported Chains" icon="link" href="/universal-accounts/cha/chains">
    See which chains are supported.
  </Card>
</CardGroup>


# Preview Transaction Details with Universal Accounts
Source: https://developers.particle.network/universal-accounts/cha/how-to/tx-preview

Previewing transaction details before sending a transaction through Universal Accounts. 

The Universal Accounts SDK provides a complete transaction preview when you call `createBuyTransaction()` or any other transaction-related method.

You can use this preview to show users key transaction details before they confirm by including it in your transaction flow UI.

<Note>
  For a reference implementation, check the [Universal Accounts with Ethers](https://github.com/soos3d/ethers-universal-accounts/blob/main/ethers-universal-accounts/app/components/TransactionFeePreview.tsx) repository, or [live Demo](https://ethers-universal-accounts.vercel.app/).
</Note>

## Transaction Preview Overview

When you call `createBuyTransaction()` or similar methods, the SDK returns a structured preview object with key transaction details.

Here’s a breakdown of the main fields included in this preview:

```ts TypeScript [expandable] theme={null}
interface UniversalTransaction {
  type: "universal";                   
  mode: "mainnet";         // Current environment

  sender: string;                     
  receiver: string;                    

  transactionId: string;              
  smartAccountOptions: {
    name: string;                    
    version: string;                  
    ownerAddress: string;             
    smartAccountAddress: string;      
    solanaSmartAccountAddress: string; 
    senderAddress: string;           
    senderSolanaAddress: string;     
  };

  depositTokens: TokenTransfer[];     // Tokens *being deposited* (decreasing from sender)
  lendingTokens: TokenTransfer[];     // Tokens *being received* via lending or conversion
  tokenChanges: {
    from: string;                     
    fromChains: number[];            
    to: string;                      
    toChains: number[];               
    decr: TokenTransfer[];           
    incr: TokenTransfer[];           
  };

  feeQuotes: {
    fees: {
      totals: {
        feeTokenAmountInUSD: string;
        gasFeeTokenAmountInUSD: string;
        transactionFeeTokenAmountInUSD: string;
        transactionServiceFeeTokenAmountInUSD: string;
        transactionLPFeeTokenAmountInUSD: string;
        solanaRentFeeAmountInUSD: string;
      };
      feeTokens: TokenTransfer[];
      freeGasFee: boolean;
      freeServiceFee: boolean;
    };
    userOps: UserOpExecution[];
  }[];

  transactionFees: {
    freeGasFee: boolean;
    freeServiceFee: boolean;
    transactionServiceFeeAmountInUSD: string;
    transactionLPFeeAmountInUSD: string;
  };

  tag: string;                       
  gasless: boolean | null;           
  fallback: boolean;                 

  data: MerkleProof[];               
  rootHash: string;                  
  userOps: UserOpExecution[]; 
}
```

### Previewing a Transaction (Example)

To see a real example, here’s how you can create and log a buy transaction for \$1 worth of **\$PARTI**:

```tsx page.tsx theme={null}
const transaction = await universalAccount.createBuyTransaction({
  token: {
    chainId: CHAIN_ID.BSC_MAINNET,
    address: "0x59264f02D301281f3393e1385c0aEFd446Eb0F00", // PARTI token on BNB Chain
  },
  amountInUSD: "1",
});

console.log(JSON.stringify(transaction, null, 2));
```

<Info>
  This example uses `createBuyTransaction`, but the same approach will apply to any transaction method supported by the SDK.
</Info>

### Displaying Estimated Fees

The returned transaction object includes **metadata** such as **sender** and **recipient** addresses, **tokens** used, and **estimated fees**.

Here’s how to extract and display the estimated fees:

```ts page.tsx theme={null}
import { formatUnits } from "ethers";

const feeQuote = transaction.feeQuotes[0];
const fee = feeQuote.fees.totals;

console.log("Total fee (USD):", `$${formatUnits(fee.feeTokenAmountInUSD, 18)}`);
console.log("Gas fee (USD):", `$${formatUnits(fee.gasFeeTokenAmountInUSD, 18)}`);
console.log("Service fee (USD):", `$${formatUnits(fee.transactionServiceFeeTokenAmountInUSD, 18)}`);
console.log("LP fee (USD):", `$${formatUnits(fee.transactionLPFeeTokenAmountInUSD, 18)}`);
```

<Info>
  We use `formatUnits` from `ethers.js`, but feel free to use any formatting utility that fits your stack.
</Info>

### Integrating the Transaction Preview

You can integrate the transaction preview however you like in your dApp. In the demo repository below, estimated fees are shown before the user confirms the transaction.

<Card title="Demo Repository" icon="code" href="https://github.com/soos3d/ethers-universal-accounts">
  Check out the demo repository for a working example.
</Card>

## Full Transaction Preview Widget

The guide and demo app above focus on a minimal example that previews estimated fees only.

For a more complete implementation—including sender and receiver addresses, token transfers, and detailed metadata—refer to the extended widget below:

```tsx TransactionDetailsWidget.tsx [expandable] theme={null}
import { formatUnits } from "ethers";

interface Token {
  name: string;
  symbol: string;
  chainId: number;
  decimals: number;
  realDecimals: number;
  address: string;
  assetId: string;
  type: string;
  slotIndex: number;
  image: string;
  rank: number;
  price: number;
}

interface TokenAmount {
  token: Token;
  amount: bigint;
}

interface FeeToken {
  token: Token;
  amount: bigint;
}

interface FeeTotals {
  feeTokenAmountInUSD: string;
  gasFeeTokenAmountInUSD: string;
  transactionFeeTokenAmountInUSD: string;
  transactionServiceFeeTokenAmountInUSD: string;
  transactionLPFeeTokenAmountInUSD: string;
  solanaRentFeeAmountInUSD: string;
}

interface FeeQuote {
  feeTokens: FeeToken[];
  freeGasFee: boolean;
  freeServiceFee: boolean;
  totals: FeeTotals;
}

interface TransactionDetails {
  sender: string;
  receiver: string;
  depositTokens?: TokenAmount[];
  lendingTokens?: TokenAmount[];
  feeQuotes?: { fees: FeeQuote }[];
}

const TokenList = ({
  tokens,
  title,
  emoji,
}: {
  tokens: TokenAmount[];
  title: string;
  emoji: string;
}) => {
  if (!tokens?.length) return null;

  return (
    <div className="mb-4">
      <h3 className="text-lg font-semibold mb-2">
        {emoji} {title}:
      </h3>
      <div className="space-y-2 pl-4">
        {tokens.map((item, i) => {
          const t = item.token;
          return (
            <div key={i} className="bg-gray-50 p-3 rounded-lg">
              <div className="font-medium">
                [{i + 1}] {t.name} ({t.symbol})
              </div>
              <div className="text-sm text-gray-600 pl-2">
                <div>Chain ID: {t.chainId}</div>
                <div>Amount: {formatUnits(item.amount, t.decimals)}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const FeeSection = ({ feeQuote }: { feeQuote: FeeQuote }) => {
  if (!feeQuote?.feeTokens?.length) return null;
  console.log(JSON.stringify(feeQuote));
  return (
    <div className="mb-4">
      <h3 className="text-lg font-semibold mb-2">💸 Fee Tokens:</h3>
      <div className="space-y-2 pl-4">
        {feeQuote.feeTokens.map((fee, i) => {
          const t = fee.token;
          return (
            <div key={i} className="bg-gray-50 p-3 rounded-lg">
              <div className="font-medium">
                [{i + 1}] {t.name} ({t.symbol})
              </div>
              <div className="text-sm text-gray-600 pl-2">
                <div>Chain ID: {t.chainId}</div>
                <div>Amount: {formatUnits(fee.amount, t.decimals)}</div>
              </div>
            </div>
          );
        })}
        <div className="text-sm text-gray-600 mt-2 space-y-1">
          <div>Free Gas Fee: {feeQuote.freeGasFee ? "✅" : "❌"}</div>
          <div>Free Service Fee: {feeQuote.freeServiceFee ? "✅" : "❌"}</div>
          <div className="pt-2 space-y-1 border-t border-gray-200">
            <div>
              Total Fee:{" "}
              <span className="font-medium">
                ${formatUnits(BigInt(feeQuote.totals.feeTokenAmountInUSD), 18)}
              </span>
            </div>
            <div>
              Gas Fee:{" "}
              <span className="font-medium">
                ${formatUnits(BigInt(feeQuote.totals.gasFeeTokenAmountInUSD), 18)}
              </span>
            </div>
            <div>
              Transaction Fee:{" "}
              <span className="font-medium">
                ${formatUnits(BigInt(feeQuote.totals.transactionFeeTokenAmountInUSD), 18)}
              </span>
            </div>
            <div>
              Service Fee:{" "}
              <span className="font-medium">
                ${formatUnits(BigInt(feeQuote.totals.transactionServiceFeeTokenAmountInUSD), 18)}
              </span>
            </div>
            <div>
              LP Fee:{" "}
              <span className="font-medium">
                ${formatUnits(BigInt(feeQuote.totals.transactionLPFeeTokenAmountInUSD), 18)}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export function TransactionDetailsWidget({
  transaction,
}: {
  transaction: TransactionDetails;
}) {
  const feeQuotePreview = transaction.feeQuotes?.[0]?.fees;

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm border">
      <h2 className="text-xl font-bold mb-4">Transaction Details</h2>

      <div className="mb-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <span className="font-semibold">🔹 Sender: </span>
            <span className="font-mono text-sm">{transaction.sender}</span>
          </div>
          <div>
            <span className="font-semibold">🔹 Receiver: </span>
            <span className="font-mono text-sm">{transaction.receiver}</span>
          </div>
        </div>
      </div>

      <TokenList
        tokens={transaction.depositTokens || []}
        title="Deposit Tokens"
        emoji="📥"
      />

      <TokenList
        tokens={transaction.lendingTokens || []}
        title="Lending Tokens"
        emoji="📤"
      />

      {feeQuotePreview && <FeeSection feeQuote={feeQuotePreview} />}
    </div>
  );
}
```

## What’s Next?

Explore the SDK reference for more details:

<CardGroup>
  <Card title="SDK Reference" icon="code" href="/universal-accounts/ua-reference/desktop/web">
    See more methods and usage patterns.
  </Card>

  <Card title="Supported Chains" icon="link" href="/universal-accounts/cha/chains">
    View which chains are available.
  </Card>
</CardGroup>


# Using Magic's API Wallet with Universal Accounts
Source: https://developers.particle.network/universal-accounts/cha/how-to/ua-magic

Enable user wallets via Magic's API Wallet and cross-chain interactions with Universal Accounts

## Overview

This guide demonstrates how to combine **Magic’s API Wallet** with **Particle Network’s Universal Accounts** to provide users with a secure, passwordless, and chain-agnostic Web3 experience.

With Magic's API Wallet, developers can generate wallets through any JWT-based auth provider, including familiar **OAuth logins** (such as Google)  — no seed phrases or extensions required.\
When paired with Universal Accounts, those wallets automatically gain a unified balance across [multiple EVM chains and Solana](https://developers.particle.network/universal-accounts/cha/chains), enabling users to interact across chains through a unified balance and account, without the need to hold a specific gas token.

<Note>
  This guide is based on a demo app where users log in using **Google OAuth** (via Magic's API Wallet) and instantly interact with **Universal Accounts** to mint NFTs across chains — without bridges or network switching.\
  Explore the full code in the repository below.
</Note>

<Card title="Demo App Repository" icon="wand-magic-sparkles" href="https://github.com/Particle-Network/universal-accounts-magic-wallet-api">
  Explore the Magic Wallet + Universal Accounts Demo on GitHub.
</Card>

***

## Why Use Magic + Universal Accounts

Web3 onboarding and multi-chain interoperability are often complex:

* Wallet installations, seed phrases, and pop-ups hurt conversion.
* Multi-chain logic, RPCs, and bridges complicate development.

By combining **Magic’s API Wallet** and **Universal Accounts**, developers solve both challenges:

* **Magic’s API Wallet** generates secure, non-custodial wallets using JWT-based authentication, including simple OAuth logins like Google.
* **Universal Accounts** extend these wallets with a **chain-abstracted smart account**, giving users one address and one balance across chains.

Together, they deliver a Web2-like onboarding flow with Web3-level interoperability.

***

## How It Works

The integration connects **Magic’s API Wallet** (for secure wallet creation) with **Particle Network’s Universal Accounts** (for chain abstraction).\
Here’s how the flow works from login to cross-chain interaction:

<Steps>
  <Step title="1. User Logs In with OAuth">
    When the user signs in with Google, the app retrieves their **ID token** through `NextAuth` and sends it to the backend.\
    The backend calls **Magic's Express API** to either create or fetch an existing **EOA wallet** derived from that token.\
    The private key is generated and stored inside Magic’s TEE — it never leaves Magic’s secure infrastructure.

    ```ts theme={null}
    const getOrCreateWallet = async () => {
    const res = await fetch("https://tee.express.magiclabs.com/v1/wallet", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${"YOUR-AUTH-PROVIDER-JWT"}`,
      "X-Magic-Secret-Key": "YOUR-MAGIC-API-KEY",
      "X-OIDC-Provider-ID": "YOUR-MAGIC-PROVIDER-ID",
      "X-Magic-Chain": "ETH",
    },
    });

    const data = await res.json();
    return data.public_address;
    };

    ```

    **Key files:**

    * `contexts/AuthProvider.tsx` – handles login and wallet retrieval
    * `app/api/tee/wallet/route.ts` – server-side Magic API calls
    * `lib/express.ts` – configures Magic API credentials
  </Step>

  <Step title="2. Initialize the Universal Account">
    Once the Magic wallet is available, initialize the **Universal Account SDK** using the Magic EOA as the owner.

    ```ts /app/wallet/page.tsx theme={null}
    const ua = new UniversalAccount({
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
        projectClientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
        projectAppUuid: process.env.NEXT_PUBLIC_APP_ID!,
        ownerAddress: magicEOAAddress,
    });
    ```

    The Universal Account provides:

    * A single address shared across chains
    * Unified balance tracking
    * Automatic routing and gas abstraction
  </Step>

  <Step title="3. Interact Across Chains">
    Users can now interact on any supported chain — e.g., mint an NFT on Avalanche using funds from Solana.

    ```ts /app/wallet/page.tsx theme={null}
      const transaction = await universalAccount.createUniversalTransaction({
        chainId: CHAIN_ID.AVALANCHE_MAINNET,
        transactions: [
          {
            to: CONTRACT_ADDRESS,
            data: contractInterface.encodeFunctionData("mint"),
          },
        ],
      });

      const signature = await ethereumService.personalSign(transaction.rootHash);

      const result = await universalAccount.sendTransaction(
        transaction,
        signature.signature
      );
    ```

    The **Magic wallet** signs the transaction, and **Universal Accounts** handle routing, execution, and cross-chain liquidity under the hood.
  </Step>
</Steps>

<Info>
  The Universal Account SDK abstracts cross-chain routing, gas payments, and liquidity handling automatically — users interact with a single balance, regardless of the underlying network.
</Info>

***

## Developer Benefits & Key Learnings

By integrating **Magic’s API Wallet** with **Universal Accounts**, developers can provide a modern onboarding experience and eliminate multi-chain friction.

<Steps>
  <Step title="Frictionless Onboarding">
    Users log in with familiar OAuth methods (e.g., Google).\
    A secure wallet is generated via Magic’s TEE — no seed phrases or manual setup required.
  </Step>

  <Step title="Unified Multi-Chain Account">
    The Magic wallet owns a **Universal Account** that spans all supported chains, consolidating balances and activity into one address.
  </Step>

  <Step title="Gas and Liquidity Abstraction">
    Users can transact or pay gas with any supported token — even across ecosystems (e.g., use SOL or USDC on Ethereum or Avalanche).
  </Step>

  <Step title="Web2-Level UX with Web3 Interoperability">
    Together, Magic and Particle Network provide passwordless access and cross-chain usability that feels as seamless as a Web2 app.
  </Step>
</Steps>

***

## Running the App

You can explore the full integration locally with the provided demo repository.

<Steps>
  <Step title="Clone the Repository">
    ```bash theme={null}
    git clone https://github.com/Particle-Network/universal-accounts-magic-wallet-api
    cd universal-accounts-magic-wallet-api
    ```
  </Step>

  <Step title="Set Up Environment Variables">
    Create a `.env.local` file and add your Magic and Particle credentials:

    ```env theme={null}
    MAGIC_API_KEY=your_magic_api_key
    OIDC_PROVIDER_ID=your_oidc_provider_id
    NEXT_PUBLIC_PROJECT_ID=your_particle_project_id
    NEXT_PUBLIC_CLIENT_KEY=your_particle_client_key
    NEXT_PUBLIC_APP_ID=your_particle_app_id
    ```

    Get your Magic key from the [Magic Dashboard](https://dashboard.magic.link/)\
    and your Particle credentials from the [Particle Dashboard](https://dashboard.particle.network/).

    <Note>
      You must configure your [identity provider](https://docs.magic.link/api-wallets/express-api/identity-provider#overview) for OAuth login to work properly.
    </Note>
  </Step>

  <Step title="Run the App">
    ```bash theme={null}
    npm install
    npm run dev
    ```

    Visit [http://localhost:3000](http://localhost:3000) to test the demo.
  </Step>

  <Step title="Try It Out">
    Log in with Google to generate a wallet, check your **unified balance**,\
    and mint an NFT on **Avalanche** — even if your funds are on **Solana** or **Ethereum**.
  </Step>
</Steps>

<Card title="App Repository" icon="wand-magic-sparkles" href="https://github.com/Particle-Network/universal-accounts-magic-wallet-api">
  See full setup details and source code on GitHub.
</Card>

***

## Conclusion

With **Magic’s API Wallet** with **Particle Network’s Universal Accounts**, developers can onboard users with familiar OAuth flows while giving them access to a single account that works across all major blockchains — unified balance, cross-chain liquidity, and gas abstraction included.\
It’s a foundation for truly chain-agnostic applications that feel natural to both users and developers.

***

## Resources

<CardGroup>
  <Card title="Demo Repository" icon="wand-magic-sparkles" href="https://github.com/Particle-Network/universal-accounts-magic-wallet-api">
    Explore the Magic Wallet + Universal Accounts Demo on GitHub.
  </Card>

  <Card title="Magic's API Wallet Docs" icon="link" href="https://docs.magic.link/api-wallets/introduction">
    Learn how to create and manage wallets securely with Magic’s TEE-based API.
  </Card>

  <Card title="Universal Accounts Overview" icon="code" href="https://developers.particle.network/universal-accounts/cha/overview">
    Understand how chain abstraction works across EVM and non-EVM chains.
  </Card>

  <Card title="Supported Chains" icon="link" href="https://developers.particle.network/universal-accounts/cha/chains">
    See all networks compatible with Universal Accounts.
  </Card>
</CardGroup>


# Introduction
Source: https://developers.particle.network/universal-accounts/cha/overview

Learn about the Universal Accounts SDK—your entry point to integrating chain abstraction.

<Frame>
  <img alt="Universal Accounts" />

  <img alt="Universal Accounts" />
</Frame>

<Warning>
  Notice: Universal Accounts are upgrading to V2. This will require a change in account system for your app.

  We've begun the migration and need your users to withdraw all funds from the old account. The next version will be deployed shortly after and you can resume operations.

  Withdrawals will be available past this date, but you will need to migrate your users to the new account system.

  Assets can be withdrawn to any account the user controls, but only via the `createTransferTransaction` method.
</Warning>

## What is the Universal SDK?

**Universal Accounts** give your users a **single account and balance** across all [supported chains](/universal-accounts/cha/chains).

The **Universal Accounts SDK** allows you to integrate Universal Accounts into your dApp. With **UAs**, your users can interact with your dApp without bridging — regardless of your native chain or where their assets live.

***

## Integration Flow

The **Universal Accounts SDK** is designed for fast, minimum-lift integrations with common wallet connection mechanisms.

Under the hood, it utilizes any wallet provider object (e.g., social logins, MetaMask, WalletConnect) and routes all transactions through the user’s Universal Account, an ERC-4337 smart account implementation.

<Info>
  It also leverages EIP-7702 to facilitate users to spend their existing assets through their Universal Account, without migrating.
</Info>

In short, the integration flow requires you to:

1. Configure the account using a single config object.
2. Use your existing provider object (from RainbowKit or any other connection mechanism) using the SDK.
3. Push transactions throug the UA instance. A user’s balance of any token will be treated as a collective of these tokens across any chain they’re on.

Once integrated, all transacions, balance reads, and gas handling will automatically use the Universal Account—no additional code for bridging or gas logic required.

The Universal Accounts SDK leverages EIP-7702. As such, if a user creates a Universal Account by connecting an existing wallet, this wallet and its assets will be automatically upgraded to a Universal Account (as long as the target application uses a supported provider).

If the target application does not use a supported provider, developers may also make Universal Accounts an optional toggle within the dApp if they prefer to maintain EOAs as the default account mechanism. Users can transfer assets into their Universal Account from any supported chain via in-app flows.

<Note>
  Universal Accounts are **independent smart accounts** if used in *smart account mode*, not extensions of an existing wallet.

  * When a user creates a Universal Account with their existing wallet, their assets stay in the original wallet. Nothing is moved automatically.
  * Users can transfer assets into their Universal Account from any supported chain through in-app flows.
  * As a developer, you can choose whether to make Universal Accounts the default experience or keep them as an optional toggle alongside EOAs.
</Note>

***

## Quickstart: Universal Accounts

Get a live integration ready in under 5 minutes by learning the basics of Universal Accounts and implementing the SDK.

<CardGroup>
  <Card title="Introduction to Universal Accounts" icon="user" href="/intro/universal-accounts">
    What are Universal Accounts, how do they work, and what problems do they solve?
  </Card>

  <Card title="Getting Started" icon="rocket" href="/universal-accounts/cha/web-quickstart">
    A step-by-step setup guide for integrating the UAs SDK into your application.
  </Card>

  <Card title="UA SDK Reference" icon="code" href="/universal-accounts/ua-reference/desktop/web">
    SDK and API reference for the Universal Accounts SDK.
  </Card>
</CardGroup>

***

## How-To Guides

Learn to implement specific Universal Account features in your app.

<CardGroup>
  <Card title="Integrate Universal Accounts" icon="dollar-sign" href="/universal-accounts/cha/how-to/provider">
    Learn how to integrate Universal Accounts into any dApp.
  </Card>

  <Card title="Use Universal Accounts as deposit flow" icon="paper-plane-top" href="/universal-accounts/cha/how-to/deposit-flow">
    Learn how to use Universal Accounts as deposit flow.
  </Card>

  <Card title="Displaying An Assets Breakdown" icon="paper-plane-top" href="/universal-accounts/cha/how-to/balances">
    Learn how to display the assets breakdown of a Universal Account.
  </Card>
</CardGroup>

***

## Understanding Chain Abstraction

Explore the foundational concepts behind Universal Accounts and how they power chain abstraction.

<CardGroup>
  <Card title="What Is Chain Abstraction?" icon="layer-group" href="/intro/what-is-cha">
    Breakdown of chain abstraction, Universal Accounts, and Universal Liquidity.
  </Card>

  <Card title="Supported Chains" icon="network-wired" href="/universal-accounts/cha/chains">
    List of chains supported by Universal Accounts.
  </Card>
</CardGroup>


# Universal Accounts Mini Course
Source: https://developers.particle.network/universal-accounts/cha/ua-course/intro

Learn how to build Chain Abstracted applications with Universal Accounts in this comprehensive hands-on guide.

<Note>
  Build chain-agnostic applications in minutes, not months.
</Note>

The Universal Accounts SDK allows you to integrate Universal Accounts into your dApp, allowing you to onboard users from any ecosystem without requiring them to bridge—regardless of where your dApp is deployed.

<Card title="What are Universal Accounts?" icon="lightbulb" href="/intro/universal-accounts">
  **New to Universal Accounts?** Understand the core concepts behind chain abstraction.
</Card>

## What You'll Learn

In this hands-on mini course, you'll build a complete Chain Abstracted application using the **Universal Accounts SDK**. By the end, you'll understand how to:

* Create chain agnostic applications— users from multiple chains can interact with your dApp without the need to bridge
* Abstract away chain-specific complexity from your dApps
* Provide seamless user experiences regardless of blockchain choice

## Course Structure

This course is divided into three practical lessons, each building on the previous:

<CardGroup>
  <Card title="Lesson 1: Initialize a Universal Account" icon="rocket" href="./lesson-1">
    **What you'll learn:**

    * Set up and configure the Universal Accounts SDK
    * Create a new Universal Account instance

    **Duration:** \~11 minutes
  </Card>

  <Card title="Lesson 2: Fetch Addresses and Balances" icon="coins" href="./lesson-2">
    **What you'll learn:**

    * Retrieve Universal Accounts addresses
    * Display unified token balances

    **Duration:** \~15 minutes
  </Card>

  <Card title="Lesson 3: Send Transactions" icon="paper-plane" href="./lesson-3">
    **What you'll learn:**

    * Send a convert transaction from one blockchain to another

    **Duration:** \~12 minutes
  </Card>
</CardGroup>

## Prerequisites

* Understand the concept of [Chain Abstraction](/intro/what-is-cha)
* Understand the concept of [Universal Accounts](/intro/universal-accounts)
* Familiarity with React and TypeScript

<Info>
  All code samples are available in [the course's GitHub repository](https://github.com/soos3d/ua-learn-series), including a starter template and completed solutions for each lesson.
</Info>

<Tip>
  This mini course uses Next.js and TypeScript, but the concepts can be applied to any framework, even in a backend.
</Tip>

## After Completing This Course

You'll be able to:

* Implement Universal Accounts in your own projects
* Build Web3 apps on your preferred chain while users can interact with your dApp from any blockchain
* Provide users with a seamless multi-chain experience

***

<Card title="Lesson 1: Initialize a Universal Account" icon="rocket" href="./lesson-1">
  **Ready to revolutionize how you build Web3 applications?** Let's get started with [Lesson 1: Initialize a Universal Account](./lesson-1).
</Card>


# Lesson 1: Initialize the UA
Source: https://developers.particle.network/universal-accounts/cha/ua-course/lesson-1

Learn how to create and configure a Universal Account for your dApp.

In this lesson, you'll learn how to set up a Universal Account after a user connects their wallet. By the end, you'll be able to initialize a UA instance that works across multiple blockchains.

Before getting started, make sure you understand the following concepts:

<CardGroup>
  <Card title="Familarize with Chain Abstraction" icon="layer-group" href="/intro/what-is-cha"> Understand the concept of [Chain Abstraction](/intro/what-is-cha)</Card>
  <Card title="Familarize with Universal Accounts" icon="user" href="/intro/universal-accounts"> Understand the concept of [Universal Accounts](/intro/universal-accounts)</Card>
</CardGroup>

## Lesson Overview

This lesson covers:

1. Setting up wallet connection with Ethers.js
2. Importing and configuring the Universal Account SDK
3. Initializing a Universal Account instance
4. Configuring advanced features like slippage tolerance and gas abstraction

## Prerequisites

Before starting, make sure you have:

* Cloned the [starter app repository](https://github.com/soos3d/ua-learn-series)
* Basic familiarity with React and Ethers.js

The Universal Account SDK requires a Particle project credentials from the [Particle Dashboard](https://dashboard.particle.network/).

To retrieve those values for configuration within your application, follow these steps:

<AccordionGroup>
  <Accordion title="Access the Particle Dashboard">
    Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network/)

    <div>
      <img alt="Login into Particle." />

      <img alt="Login into Particle." />
    </div>
  </Accordion>

  <Accordion title="Create a new project or enter an existing project">
    <div>
      <img alt="Create Particle project." />

      <img alt="Create Particle project." />
    </div>
  </Accordion>

  <Accordion title="Create a new web application, or skip this step if you already have one">
    <div>
      <img alt="Create web app." />

      <img alt="Create web app." />
    </div>
  </Accordion>

  <Accordion title="Retrieve the project credentials (project ID, client key, app ID)">
    <div>
      <img alt="Find app's credentials." />

      <img alt="Find app's credentials." />
    </div>
  </Accordion>
</AccordionGroup>

## Lesson 1 Video

The video below walks you through the first lesson:

<iframe title="Lesson 1: Initialize the UA" />

## TL;DR

The video covers setting up a basic Web3 dApp using `ethers.js` as the provider and then initializing a Universal Account. Here's a quick recap:

You can access and import the `UniversalAccount` class in your app as follows:

```tsx theme={null}
import { UniversalAccount } from "@particle-network/universal-account-sdk";
```

Then, initialize the UA instance once a user has connected like in the following example:

```tsx theme={null}
const ua = new UniversalAccount({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  projectClientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  projectAppUuid: process.env.NEXT_PUBLIC_APP_ID!,
  ownerAddress: address,
  // If not set it will use auto-slippage
  tradeConfig: {
    slippageBps: 100, // 1% slippage tolerance
    universalGas: true, // Prioritize PARTI token to pay for gas
    //usePrimaryTokens: [SUPPORTED_TOKEN_TYPE.SOL], // Specify token to use as source (only for swaps)
  },
});
```

<Tip>
  The `slippageBps` value is in basis points: 100 = 1% slippage tolerance.
  Setting `universalGas: true` allows users to pay transaction fees with PARTI tokens on any blockchain.
</Tip>

You can find more details in the full [Universal Accounts SDK Reference](/universal-accounts/ua-reference/desktop/web).

You can now use the `ua` instance to fetch data (addresses and balances) and send transactions across multiple blockchains, which we'll cover in the next lessons.

<Card title="Lesson 2: Fetch Addresses and Balances" icon="coins" href="./lesson-2">
  **Ready to continue?** Head over to Lesson 2: Fetch Addresses and Balances.
</Card>

<Info>
  **Having issues?** Contact us via the [Support Telegram Bot](https://t.me/particle_developer_bot).
</Info>


# Lesson 2: Fetch Addresses and Balances
Source: https://developers.particle.network/universal-accounts/cha/ua-course/lesson-2

Learn how to retrieve Universal Account addresses and check balances across multiple blockchains.

In this lesson, you'll learn how to fetch addresses and balances from a Universal Account. This is a critical step in building chain-agnostic applications, as it enables users to interact with their assets across different blockchains through a single interface.

<Note>
  Before getting started, make sure you followed [Lesson 1](./lesson-1) and initialized a Universal Account instance.
</Note>

## Lesson Overview

This lesson covers:

1. Retrieving addresses associated with a Universal Account
2. Understanding the different address types (EOA, EVM UA, Solana UA)
3. Fetching Primary Asset balances across multiple chains

## Prerequisites

Before starting, make sure you have:

* Initialized a Universal Account (see [Lesson 1](./lesson-1))
* Basic familiarity with JavaScript and blockchain concepts

## Lesson 2 Video

The video below walks you through the process of fetching addresses and balances:

<iframe title="Lesson 2: Fetch Addresses and Balances" />

<Note>
  Get your Universal Accounts project ID from the [Particle Dashboard](https://dashboard.particle.network/).
</Note>

## TL;DR

This lesson covered:

* Retrieving Universal Account addresses (Owner, EVM UA, Solana UA)
* Fetching Primary Asset balances
* Understanding how assets are managed across different blockchains

### Addresses

A **Universal Account** references multiple address types:

* **Owner Address**: The EOA that owns the Universal Account and signs transactions.
* **EVM Universal Address**: The address used for interactions on EVM-compatible chains.
* **Solana Universal Address**: The address used for interactions on Solana.

You can retrieve all relevant addresses from an initialized Universal Account instance as follows:

```tsx theme={null}
const smartAccountOptions = await ua.getSmartAccountOptions();

const accountInfo = {
  ownerAddress: smartAccountOptions.ownerAddress, // EOA that owns the Universal Account
  evmUaAddress: smartAccountOptions.smartAccountAddress!, // EVM UA
  solanaUaAddress: smartAccountOptions.solanaSmartAccountAddress!, // SOL UA
};

console.log("Smart Account info:", accountInfo);
```

<Note>
  The EVM and Solana Universal Addresses are distinct due to the way deposits work on each network. EVM tokens should be sent to the EVM UA, while Solana tokens should be sent to the Solana UA. However, the SDK abstracts this complexity, providing a unified balance view.
</Note>

### Fetching Primary Assets

Universal Accounts can hold assets across multiple chains, but **Primary Assets** are the most critical as they are the assets spent across chains.

You can fetch the Primary Assets balance from a Universal Account instance with a single call:

```tsx theme={null}
const primaryAssets = await ua.getPrimaryAssets();
console.log("Primary Assets:", JSON.stringify(primaryAssets, null, 2));
```

<Note>
  Each asset includes metadata and a breakdown of holdings per chain. For a full list of supported Primary Assets, check the [Supported Chains and Primary Assets](/universal-accounts/cha/chains#primary-assets) page.

  You can find more details in the full [Universal Accounts SDK Reference](/universal-accounts/ua-reference/desktop/web).
</Note>

<Card title="Lesson 3: Send Transactions" icon="paper-plane" href="./lesson-3">
  **Ready to continue?** Head over to Lesson 3: Send Transactions.
</Card>

<Info>
  **Having issues?** Contact us via the [Support Telegram Bot](https://t.me/particle_developer_bot).
</Info>


# Lesson 3: Send Transactions
Source: https://developers.particle.network/universal-accounts/cha/ua-course/lesson-3

Learn how to send transactions using the Universal Accounts SDK.

In this lesson, you'll learn how to send transactions using the Universal Accounts SDK. This is the final step in building a fully functional chain-agnostic application, enabling seamless cross-chain transfers without the need for bridging or complex liquidity management.

<Note>
  Before getting started, make sure you followed [Lesson 2](./lesson-2) and have your Universal Account instance initialized.
</Note>

## Lesson Overview

This lesson covers:

1. Creating a convert assets across chains transaction
2. Signing the transaction
3. Broadcasting the transaction to the blockchain

## Prerequisites

Before starting, make sure you have:

* Initialized a Universal Account (see [Lesson 1](./lesson-1))
* Display the unified balance of your Universal Account (see [Lesson 2](./lesson-2))
* Basic familiarity with TypeScript and blockchain transaction concepts

## Lesson 3 Video

The video below walks you through the process of creating and sending transactions:

<iframe title="Lesson 3: Send Transactions" />

<Note>
  Get your Universal Accounts project ID from the [Particle Dashboard](https://dashboard.particle.network/).
</Note>

## TL;DR

This lesson covers:

* Creating a convert assets across chains transaction using the `createConvertTransaction()` method
* Signing the transaction using a connected wallet
* Broadcasting the transaction using `sendTransaction()`

### Creating a Convert Assets Across Chains Transaction

The Universal Accounts SDK allows you to create convert assets across chains transactions that convert any Primary Asset into a target token (e.g., USDT on Solana) without requiring the user to hold funds on the destination chain.

<Note>
  The Universal Account SDK allows for various types of transactions, find more details in the [Universal Accounts SDK reference](/universal-accounts/ua-reference/desktop/web).
</Note>

Here’s a basic example:

```tsx theme={null}
import { CHAIN_ID, UniversalAccount, SUPPORTED_TOKEN_TYPE } from "@GDdark/universal-account";

// Create a convert assets across chains transaction
const transaction = await universalAccount.createConvertTransaction({
    expectToken: { type: SUPPORTED_TOKEN_TYPE.USDC, amount: "1" },
    chainId: CHAIN_ID.SOLANA_MAINNET,
});

console.log("Transaction Payload:", transaction);
```

### Signing the Transaction

Once the transaction is created, the object returned includes a `rootHash` that must be signed by the user. Use the `signMessage()` method from your connected provider:

Here is an example:

```tsx theme={null}
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const signature = await signer.signMessage(getBytes(transaction.rootHash));
```

### Sending the Transaction

After signing the transaction, you can broadcast it to the network as follows:

```tsx theme={null}
const sendResults = await universalAccount.sendTransaction(
    transaction,
    signature
);
```

The `sendTransaction()` method returns a `TransactionResult` object, which includes the transaction ID and other metadata. You can link directly to the transaction details on **UniversalX**:

```tsx theme={null}
console.log(
  "Explorer URL:",
  `https://universalx.app/activity/details?id=${result.transactionId}`
);
```

<Note>
  This approach abstracts away the complexities of chain-specific gas fees and liquidity routing, making it possible to send transactions without requiring the user to hold funds on the destination chain.
</Note>

***

## Next Steps

This marks the end of this course on the fundamentals of developing chain agnostic applications using Universal Accounts.

You now have the foundational skills to create seamless, multi-chain dApps using the **Universal Accounts SDK**.

To level up your Chain Abstraction skills, explore the [**How-to** section](/universal-accounts/cha/how-to/provider) for more advanced use cases, including:

* How to [preview transactions details](/universal-accounts/cha/how-to/tx-preview)
* How to [use Universal Accounts as a deposit flow](/universal-accounts/cha/how-to/deposit-flow) in existing apps

<Note>
  You can also join the [ChADs (Chain Abstracted Developers) Telegram Group](https://t.me/chainabstracteddevs/1) to ask questions, share knowledge, and connect with Chain Abstracted developers.
</Note>


# Quickstart: Integrating Universal Accounts into a Web App
Source: https://developers.particle.network/universal-accounts/cha/web-quickstart

Explore how Universal Accounts are integrated into a working dApp and see the SDK in action.

This guide walks you through the process of integrating Universal Account features into a working demo app built with Particle Auth and the Universal Accounts SDK.

We’ll explain how user logins, account initialization, and balance display are handled in the code. You’ll also learn how to:

* Initialize a Universal Account after a user logs in.
* Fetch and display the user's Universal Account addresses.
* Fetch and display the user's unified balance across chains.

You can use this as a reference or base for your own app.

<Note>
  This example showcases a Next.js app using [Particle Auth](/social-logins/auth/introduction) as its login method.

  However, the same logic can be applied to any other EOA-based provider or signer.
</Note>

***

<Warning>
  Notice: Universal Accounts are upgrading to V2. This will require a change in account system for your app.

  We've begun the migration and need your users to withdraw all funds from the old account. The next version will be deployed shortly after and you can resume operations.

  Withdrawals will be available past this date, but you will need to migrate your users to the new account system.

  Assets can be withdrawn to any account the user controls, but only via the `createTransferTransaction` method.
</Warning>

## Getting Started

To start integrating Universal Accounts:

<Steps>
  <Step title="Clone the Quickstart Repository">
    This repository includes the full working demo app.

    ```bash Terminal theme={null}
    git clone https://github.com/particle-network/universal-accounts-quickstart.git
    ```
  </Step>

  <Step title="Set Environment Variables">
    First, create a project in the [Particle Dashboard](https://dashboard.particle.network/) to get the required credentials.

    <Note> The same project keys are used for both Particle Auth and Universal Accounts.</Note>

    In this example, we use **Particle Auth** for user authentication. However, you can use any EOA-compatible provider or signer.

    Regardless of your choice, you’ll still need to create a project in the **Particle Dashboard** and initialize **Universal Accounts** using the project credentials.

    Create a `.env` file in the root of the `ua-quickstart` directory with the following variables:

    ```env .env theme={null}
    NEXT_PUBLIC_PROJECT_ID=""
    NEXT_PUBLIC_CLIENT_KEY=""
    NEXT_PUBLIC_APP_ID=""
    ```
  </Step>

  <Step title="Install Dependencies">
    Install the project dependencies using your preferred package manager:

    <CodeGroup>
      ```bash yarn theme={null}
      yarn install
      ```

      ```bash npm theme={null}
      npm install
      ```
    </CodeGroup>
  </Step>

  <Step title="Run the App">
    Start the development server:

    <CodeGroup>
      ```bash yarn theme={null}
      yarn dev
      ```

      ```bash npm theme={null}
      npm run dev
      ```
    </CodeGroup>

    Once the app is running, log in with any supported method via Particle Auth. After logging in, the app will display your Universal Account addresses and unified balance.
  </Step>
</Steps>

<Note>
  Universal Accounts are standalone smart accounts. As such, to fund yours, you will need to transfer assets into it—unless you're logging into a pre-existing Universal Account, created through [UniversalX](https://universalx.app) or any other Universal Accounts-enabled app.
</Note>

***

## Features Walkthrough

### 1. Universal Account Initialization

After the user logs in, the app creates a new Universal Account instance inside a `useEffect`.

The constructor requires:

* The connected user’s address.
* Your Particle project credentials.
* Optional config settings.

Within the demo app, this looks as follows:

```tsx page.tsx theme={null}
import { useEthereum } from "@particle-network/authkit";
import { UniversalAccount } from "@particle-network/universal-account-sdk";

// In the app
const { address } = useEthereum();

const ua = new UniversalAccount({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  projectClientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  projectAppUuid: process.env.NEXT_PUBLIC_APP_ID!,
  ownerAddress: address,
  // If not set it will use auto-slippage
  tradeConfig: {
    slippageBps: 100, // 1% slippage tolerance
    universalGas: true, // Prioritize PARTI token to pay for gas
    //usePrimaryTokens: [SUPPORTED_TOKEN_TYPE.SOL], // Specify token to use as source (only for swaps)
  },
});
```

<Note>
  In this case, the user's address is retrieved directly from Particle Auth after they log in.
</Note>

<Card title="Universal Account Initialization in the Repository" icon="code" href="https://github.com/soos3d/universal-accounts-quickstart/blob/02ef3a98489248696b28ff3e922b9cc649a2da91/ua-quickstart/app/page.tsx#L47">
  **Code location:** `page.tsx` → `useEffect` watching `connected && address`
</Card>

***

### 2. Fetching a Universal Account's Addresses

The app fetches a Universal Account's EVM and Solana Universal Account addresses using `getSmartAccountOptions()`.

This returns a UA's:

* EOA/Owner Account (from Particle Auth).
* EVM Universal Account address.
* Solana Universal Account address.

```tsx page.tsx theme={null}
const smartAccountOptions = await universalAccount.getSmartAccountOptions();
```

The addresses are stored in state and rendered in the UI.

<Card title="Fetching Smart Account Addresses in the Repository" icon="code" href="https://github.com/soos3d/universal-accounts-quickstart/blob/8fbb7c3dc6cbd9d681ac7f5ebba1ffc5da56c12f/ua-quickstart/app/page.tsx#L70">
  **Code location:** `page.tsx` → `useEffect` watching `universalAccount && address`
</Card>

***

### 3. Fetching A Universal Account's Unified Balance

To show the user's total balance of [Primary Assets](/universal-accounts/cha/chains#primary-assets) across chains, the app uses `getPrimaryAssets()` from the Universal Accounts SDK.

This returns:

* `totalAmountInUSD`
* Detailed breakdown per token + chain (if needed).

<Card title="Full Primary Assets Breakdown" icon="coin" href="/universal-accounts/ua-reference/desktop/web#fetch-primary-assets">
  Learn how to retrieve a full Primary Assets breakdown on our SDK reference.
</Card>

The following code snippet shows how to retrieve the user's Primary Assets balance:

```tsx page.tsx theme={null}
const primaryAssets = await universalAccount.getPrimaryAssets();
```

The UI then displays the account's Primary Assets balance in USD:

```tsx page.tsx theme={null}
<p className="text-2xl font-bold text-green-400">
  ${primaryAssets?.totalAmountInUSD || "0.00"}
</p>
```

<Info>
  [Primary Assets](/universal-accounts/cha/chains#primary-assets) are key tokens for which Universal Accounts have deep liquidity. As such, the SDK uses them as the base assets for any cross-chain operation—including gas, swaps, and liquidity routing.
</Info>

<Card title="Fetching Unified Balance in the Repository" icon="code" href="https://github.com/soos3d/universal-accounts-quickstart/blob/8fbb7c3dc6cbd9d681ac7f5ebba1ffc5da56c12f/ua-quickstart/app/page.tsx#L88">
  **Code location:** `page.tsx` → `useEffect` watching `universalAccount && address`
</Card>

***

### 4. Sending Transactions

Within the demo app, you can find examples for two types of transactions, both using a Universal Account:

* A custom contract call with its destination on the **Base Mainnet.**
* A USDT swap on **Arbitrum.**

Both transactions use the user's Universal Account to handle asset conversion and automate liquidity routing.

Let's take a closer look into both:

***

#### Contract Call Example

To interact with a smart contract—such as calling a function like `checkIn()`—you can use `createUniversalTransaction()` with the `transactions` and `expectTokens` fields.

This method lets you define one or more contract calls while specifying which tokens the contract expects to receive or require:

```tsx page.tsx theme={null}
import { useEthereum } from "@particle-network/authkit";
const { provider } = useEthereum();
import { CHAIN_ID, SUPPORTED_TOKEN_TYPE } from "@particle-network/universal-account-sdk";


// In the app
const transaction = await universalAccount.createUniversalTransaction({
  chainId: CHAIN_ID.BASE_MAINNET,
  // This example expects 0.0000001 ETH on base mainnet
  // If your assets(USDC, USDT, SOL, etc.) are on other chains, the SDK will convert them to ETH on base mainnet
  expectTokens: [
    {
      type: SUPPORTED_TOKEN_TYPE.ETH,
      amount: "0.0000001",
    },
  ],
  transactions: [
    {
      to: contractAddress,
      data: encodedFunctionData,
      value: toBeHex(parseEther("0.0000001")),
    },
  ],
});

const signature = await provider.signMessage(transaction.rootHash);
await universalAccount.sendTransaction(transaction, signature);
```

In this case, the `provider` instance of Particle Auth is used to sign the transaction directly.

<Note>
  In this example, the transaction expects 0.0000001 ETH on Base Mainnet. Even if the user doesn't have ETH on Base, Universal Accounts will convert assets from other chains to meet this requirement.
</Note>

<Card title="Send Custom Transaction in the Repository" icon="code" href="https://github.com/soos3d/universal-accounts-quickstart/blob/8fbb7c3dc6cbd9d681ac7f5ebba1ffc5da56c12f/ua-quickstart/app/page.tsx#L102">
  **Code location:** `page.tsx` → `handleTransaction()`
</Card>

#### Token Swap Example

To swap tokens (e.g., 1 USDT on Arbitrum in this example), the demo app uses `createBuyTransaction()`.

It does so in the following way:

```tsx page.tsx theme={null}
  const transaction = await universalAccount.createBuyTransaction({
    token: {
      chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
      address: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
    },
    amountInUSD: "1",
  });

const signature = await provider.signMessage(transaction.rootHash);
await universalAccount.sendTransaction(transaction, signature);
```

<Note>
  The user can use any token on any supported chain to initiate the transfer—Universal Accounts handle conversion to the destination asset and routing automatically.
</Note>

<Card title="Send Swap Transaction in the Repository" icon="code" href="https://github.com/soos3d/universal-accounts-quickstart/blob/8fbb7c3dc6cbd9d681ac7f5ebba1ffc5da56c12f/ua-quickstart/app/page.tsx#L136">
  **Code location:** `page.tsx` → `handleTransferTransaction()`
</Card>

## Full Code Reference

Check out the complete `page.tsx` file below to see how everything fits together.

You can also copy/paste the below file into your project or use it as a base for your own integration:

```tsx page.tsx [expandable] theme={null}
"use client";

import { useConnect, useEthereum } from "@particle-network/authkit";
import {
  CHAIN_ID,
  SUPPORTED_TOKEN_TYPE,
  type IAssetsResponse,
  UniversalAccount,
} from "@particle-network/universal-account-sdk";
import { Interface, parseEther, toBeHex } from "ethers";
import { useEffect, useState } from "react";

export default function Home() {
  // Particle Auth hooks
  const { connect, disconnect, connected } = useConnect();
  const { address, provider } = useEthereum();

  // Transaction state - stores the URL of the latest transaction
  const [transactionUrl, setTransactionUrl] = useState("");

  // Universal Account instance states
  const [universalAccount, setUniversalAccount] =
    useState<UniversalAccount | null>(null);

  // Smart account addresses for different chains
  const [accountInfo, setAccountInfo] = useState({
    ownerAddress: "",
    evmSmartAccount: "", // EVM-based chains (Ethereum, Base, etc)
    solanaSmartAccount: "", // Solana chain
  });

  // Aggregated balance across all chains
  const [primaryAssets, setPrimaryAssets] = useState<IAssetsResponse | null>(
    null
  );

  // === Authentication Handlers ===
  const handleLogin = () => {
    if (!connected) connect({});
  };

  const handleDisconnect = () => {
    if (connected) disconnect();
  };

  // === Initialize UniversalAccount ===
  useEffect(() => {
    if (connected && address) {
      // Create new UA instance when user connects
      const ua = new UniversalAccount({
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
        projectClientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
        projectAppUuid: process.env.NEXT_PUBLIC_APP_ID!,
        ownerAddress: address,
        // If not set it will use auto-slippage
        tradeConfig: {
          slippageBps: 100, // 1% slippage tolerance
          universalGas: true, // Enable gas abstraction
          //usePrimaryTokens: [SUPPORTED_TOKEN_TYPE.SOL], // Specify token to use as source (only for swaps)
        },
      });
      console.log("UniversalAccount initialized:", ua);
      setUniversalAccount(ua);
    } else {
      // Reset UA when user disconnects
      setUniversalAccount(null);
    }
  }, [connected, address]);

  // === Fetch Smart Account Addresses ===
  useEffect(() => {
    if (!universalAccount || !address) return;
    const fetchSmartAccountAddresses = async () => {
      // Get smart account addresses for both EVM and Solana
      const options = await universalAccount.getSmartAccountOptions();
      setAccountInfo({
        ownerAddress: address, // EOA address
        evmSmartAccount: options.smartAccountAddress || "", // EVM smart account
        solanaSmartAccount: options.solanaSmartAccountAddress || "", // Solana smart account
      });
      console.log("Smart Account Options:", options);
    };
    fetchSmartAccountAddresses();
  }, [universalAccount, address]);

  // === Fetch Primary Assets ===
  useEffect(() => {
    if (!universalAccount || !address) return;
    const fetchPrimaryAssets = async () => {
      // Get aggregated balance across all chains
      // This includes ETH, USDC, USDT, etc. on various chains
      const assets = await universalAccount.getPrimaryAssets();
      setPrimaryAssets(assets);
    };
    fetchPrimaryAssets();
  }, [universalAccount, address]);

  // === Send Cross-chain Transaction ===
  const handleTransaction = async () => {
    // Safety check - all these are required for transactions
    if (!universalAccount || !connected || !provider) {
      console.error("Transaction prerequisites not met");
      return;
    }
    const contractAddress = "0x14dcD77D7C9DA51b83c9F0383a995c40432a4578";
    const interf = new Interface(["function checkIn() public payable"]);
    const transaction = await universalAccount.createUniversalTransaction({
      chainId: CHAIN_ID.BASE_MAINNET,
      // expect you need 0.0000001 ETH on base mainnet
      // if your money(USDC, USDT, SOL, etc.) is on other chain, will convert to ETH on base mainnet
      expectTokens: [
        {
          type: SUPPORTED_TOKEN_TYPE.ETH,
          amount: "0.0000001",
        },
      ],
      transactions: [
        {
          to: contractAddress,
          data: interf.encodeFunctionData("checkIn"),
          value: toBeHex(parseEther("0.0000001")),
        },
      ],
    });
    const signature = await provider.signMessage(transaction.rootHash);
    const sendResult = await universalAccount.sendTransaction(
      transaction,
      signature
    );
    setTransactionUrl(
      `https://universalx.app/activity/details?id=${sendResult.transactionId}`
    );
  };

  // === Send USDT Transfer Transaction ===
  const handleTransferTransaction = async () => {
    // Safety check - ensure wallet is connected and UA is initialized
    if (!universalAccount || !connected || !provider) {
      console.error("Transaction prerequisites not met");
      return;
    }
    const transaction = await universalAccount.createBuyTransaction({
      token: {
        chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
        address: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9",
      }, // USDT on Arbitrum
      amountInUSD: "1",
    });
    const signature = await provider.signMessage(transaction.rootHash);
    const sendResult = await universalAccount.sendTransaction(
      transaction,
      signature
    );
    console.log("Transaction sent:", sendResult);
    setTransactionUrl(
      `https://universalx.app/activity/details?id=${sendResult.transactionId}`
    );
  };

  return (
    <main className="min-h-screen flex items-center justify-center bg-gray-200 text-gray-900 p-4">
      <div className="w-full max-w-4xl space-y-8">
        {/* Header */}
        <div className="text-center space-y-2">
          <h1 className="text-4xl font-bold text-purple-700">
            Universal Accounts Quickstart
          </h1>
          <p className="text-lg text-gray-600">
            Particle Auth + Universal Accounts
          </p>
        </div>

        {!connected ? (
          <div className="w-full max-w-md mx-auto bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-semibold text-gray-900">
                Get Started
              </h2>
              <p className="text-gray-600 mt-2">
                Login to get started with Universal Accounts
              </p>
            </div>
            <div className="flex justify-center">
              <button
                onClick={handleLogin}
                className="w-full max-w-xs bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
              >
                Login
              </button>
            </div>
          </div>
        ) : (
          <>
            {/* Connection Status */}
            <div className="w-full bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
              <div className="space-y-1">
                <h2 className="text-lg font-semibold text-gray-700">
                  Owner Address (EOA)
                </h2>
                <p className="font-mono text-sm text-purple-700 break-all">
                  {address}
                </p>
              </div>
              <button
                onClick={handleDisconnect}
                className="shrink-0 bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
              >
                Disconnect
              </button>
            </div>

            {/* Account Summary */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Smart Accounts */}
              <div className="bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6">
                <div className="mb-4">
                  <h2 className="text-lg font-semibold text-gray-700">
                    Universal Account Addresses
                  </h2>
                </div>
                <div className="space-y-3">
                  <div>
                    <p className="text-sm text-gray-600">EVM</p>
                    <p className="font-mono text-sm text-purple-700 break-all">
                      {accountInfo.evmSmartAccount}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600">Solana</p>
                    <p className="font-mono text-sm text-purple-700 break-all">
                      {accountInfo.solanaSmartAccount}
                    </p>
                  </div>
                </div>
              </div>

              {/* Balance */}
              <div className="bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 flex flex-col justify-between">
                <div className="mb-4">
                  <h2 className="text-lg font-semibold text-gray-700">
                    Universal Balance
                  </h2>
                  <p className="text-gray-600 text-sm mt-1">
                    Aggregated{" "}
                    <a
                      className="text-purple-700 hover:underline"
                      href="https://developers.particle.network/universal-accounts/cha/chains#primary-assets"
                    >
                      primary assets
                    </a>{" "}
                    from every chain
                  </p>
                </div>
                <div>
                  <p className="text-4xl font-bold text-green-600">
                    ${primaryAssets?.totalAmountInUSD.toFixed(4) || "0.00"}
                  </p>
                </div>
              </div>
            </div>

            {/* Transaction Actions */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div className="bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6">
                <div className="mb-4">
                  <h3 className="text-lg font-semibold text-gray-700">
                    Custom Contract Call
                  </h3>
                  <p className="text-gray-600 text-sm mt-1">
                    Send a cross-chain contract call to Base.
                  </p>
                </div>
                <div>
                  <button
                    onClick={handleTransaction}
                    disabled={!universalAccount}
                    className="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Send Custom Transaction
                  </button>
                </div>
              </div>

              <div className="bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6">
                <div className="mb-4">
                  <h3 className="text-lg font-semibold text-gray-700">
                    Swap Transaction
                  </h3>
                  <p className="text-gray-600 text-sm mt-1">
                    Buy $1 USDT on Arbitrum using any token.
                  </p>
                </div>
                <div>
                  <button
                    onClick={handleTransferTransaction}
                    disabled={!universalAccount}
                    className="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Buy USDT
                  </button>
                </div>
              </div>

              <div className="bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6">
                <div className="mb-4">
                  <h3 className="text-lg font-semibold text-gray-700">
                    Demo Repo
                  </h3>
                  <p className="text-gray-600 text-sm mt-1">
                    Explore the code behind this demo on GitHub.
                  </p>
                </div>
                <div>
                  <a
                    href="https://github.com/particle-network/universal-accounts-quickstart"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 w-full bg-gray-200 hover:bg-gray-300 text-gray-800"
                  >
                    View on GitHub
                  </a>
                </div>
              </div>
            </div>

            {/* Latest Transaction - Shown Only If Exists */}
            {transactionUrl && (
              <div className="bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6">
                <p className="text-sm text-gray-600 mb-2">Latest Transaction</p>
                <a
                  href={transactionUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-purple-700 hover:underline break-all"
                >
                  {transactionUrl}
                </a>
              </div>
            )}
          </>
        )}
      </div>
    </main>
  );
}
```

***

## Additional Resources

<CardGroup>
  <Card title="SDK Reference" icon="code" href="/universal-accounts/ua-reference/desktop/web">
    Learn more about the Universal Accounts SDK.
  </Card>

  <Card title="Supported Chains" icon="link" href="/universal-accounts/cha/chains">
    Learn more about the chains supported by Universal Accounts.
  </Card>
</CardGroup>


# Comparison with Alternatives
Source: https://developers.particle.network/universal-accounts/comparison

How Universal Accounts stack up against other chain abstraction solutions.

Universal Accounts take a fundamentally different approach to chain agnostic UX. Instead of requiring developers to manage intents, quotes, or execution steps, **everything is abstracted at the account level**—one account, one balance, automatic routing.

This page compares Universal Accounts with three popular alternatives: **Relay**, **OneBalance**, and **Avail Nexus**.

***

## At a Glance

<Card title="Universal Accounts" icon="atom-simple">
  **Account-level abstraction**

  One account and one balance across chain. Cross-chain transactions, multi-token gas payments, and routing are always on by default.
</Card>

<CardGroup>
  <Card title="Avail Nexus" icon="diagram-project">
    **Intent-based interoperability**

    Coordinates cross-chain execution from user-defined intents.
  </Card>

  <Card title="Relay" icon="bridge">
    **Execution-level abstraction**

    Orchestrate cross-chain execution via quotes, steps, signatures, and status tracking.
  </Card>

  <Card title="OneBalance" icon="wallet">
    **Account abstraction + aggregation**

    Manage smart contract accounts with unified balances, requiring explicit quote requests.
  </Card>
</CardGroup>

***

## Feature Comparison

<Tabs>
  <Tab title="vs Relay">
    | Feature                       | Universal Accounts         | Relay                                                               |
    | ----------------------------- | -------------------------- | ------------------------------------------------------------------- |
    | **Abstraction layer**         | Account                    | Execution / bridging                                                |
    | **Unified balance**           | ✅ Aggregated Assets        | ✅ Aggregated Assets                                                 |
    | **One address across chains** | ✅ EVM + Solana             | ⚠️ EVM - Solana supported but with additional account configuration |
    | **Cross-chain txs**           | ✅ Same API as single-chain | ⚠️ Quote + steps                                                    |
    | **Gas abstraction**           | ✅ Automatic                | ⚠️ Via quote / sponsorship                                          |
    | **Pay gas in any token**      | ✅ Automatic                | ✅ Automatic                                                         |
    | **Liquidity routing**         | ✅ Fully automatic          | ⚠️ Explicit via quote                                               |
    | **Bridging logic**            | ✅ Hidden                   | ⚠️ Needs configuration                                              |
    | **7702 Delegation**           | ✅ Server-side and WaaS     | ⚠️ For specific use cases                                           |
    | **Setup required**            | Low                        | High configuration workload                                         |
  </Tab>

  <Tab title="vs OneBalance">
    | Feature                       | Universal Accounts         | OneBalance                     |
    | ----------------------------- | -------------------------- | ------------------------------ |
    | **Abstraction layer**         | Account                    | Account                        |
    | **Unified balance**           | ✅ Aggregated assets        | ✅ Aggregated assets            |
    | **One address across chains** | ✅ EVM + Solana             | ⚠️ Based on account type       |
    | **Cross-chain txs**           | ✅ Same API as single-chain | ⚠️ Quote + sign + execute      |
    | **Gas abstraction**           | ✅ Automatic                | ✅ Automatic                    |
    | **Pay gas in any token**      | ✅ Default                  | ✅ Default                      |
    | **Liquidity routing**         | ✅ Automatic                | ✅ Automatic                    |
    | **Bridging logic**            | ✅ Hidden                   | ⚠️ Exposed via operations      |
    | **7702 Delegation**           | ✅ Server-side and WaaS     | ⚠️ With multi-input limitation |
    | **Setup required**            | Low                        | Moderate                       |
  </Tab>

  <Tab title="vs Avail Nexus">
    | Feature                       | Universal Accounts         | Avail Nexus                          |
    | ----------------------------- | -------------------------- | ------------------------------------ |
    | **Abstraction layer**         | Account                    | Intent                               |
    | **Unified balance**           | ✅ Aggregated assets        | ✅ Aggregated assets                  |
    | **One address across chains** | ✅ EVM + Solana             | ⚠️ Provider-based, no Solana         |
    | **Cross-chain txs**           | ✅ Same API as single-chain | ⚠️ Intent creation + submission      |
    | **Gas abstraction**           | ✅ Automatic                | ✅ Automatic                          |
    | **Pay gas in any token**      | ✅ Default                  | ✅ Default but fewer assets available |
    | **Liquidity routing**         | ✅ Fully automatic          | ✅ Via solvers                        |
    | **Bridging logic**            | ✅ Hidden                   | ⚠️ Explicit via configuration        |
    | **Environment support**       | ✅ Browser + server         | ⚠️ Browser only                      |
    | **7702 Delegation**           | ✅ Server-side and WaaS     | Not needed                           |
    | **Setup required**            | Low                        | Moderate                             |
  </Tab>
</Tabs>

***

## Speed Comparison

Real-world latency measurements across common cross-chain routes:

| Route               | Universal Accounts | Relay      | OneBalance | Avail Nexus |
| ------------------- | ------------------ | ---------- | ---------- | ----------- |
| **Base → Arbitrum** | \~1,605 ms         | \~2,528 ms | \~2,982 ms | \~11899 ms  |
| **Base → Solana**   | \~578 ms           | \~3,360 ms | \~2,803 ms | N/A         |
| **Solana → Base**   | \~1,348 ms         | \~9,820 ms | \~2,803 ms | N/A         |

<Info>
  Universal Accounts achieve faster execution through a single abstracted flow, while alternatives require multiple API calls (quote → sign → execute → poll).
</Info>

***

## Integration Effort

Compare the integration complexity across all providers:

<CodeGroup>
  ```tsx Universal Accounts theme={null}
  import { CHAIN_ID, SUPPORTED_TOKEN_TYPE, UniversalAccount } from '@particle-network/universal-account-sdk';
  import { getBytes, Wallet } from 'ethers';

  const wallet = new Wallet(process.env.PRIVATE_KEY || '');
  const universalAccount = new UniversalAccount({
      projectId: process.env.PROJECT_ID || '',
      projectClientKey: process.env.PROJECT_CLIENT_KEY || '',
      projectAppUuid: process.env.PROJECT_APP_UUID || '',
      ownerAddress: wallet.address,
  });

  // Create and send a cross-chain transaction
  const transaction = await universalAccount.createConvertTransaction({
      expectToken: { type: SUPPORTED_TOKEN_TYPE.USDC, amount: '1' },
      chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
  });

  const result = await universalAccount.sendTransaction(
      transaction,
      wallet.signMessageSync(getBytes(transaction.rootHash))
  );
  ```

  ```tsx Relay theme={null}
  import { config } from 'dotenv';
  import { Wallet, ethers } from 'ethers';
  import { createClient, getClient, MAINNET_RELAY_API } from '@relayprotocol/relay-sdk';

  config();

  (async () => {
      const privateKey = process.env.PRIVATE_KEY_BASE || '';
      const walletAddress = process.env.WALLET_ADDRESS || '';

      // Create Relay SDK client
      createClient({
          baseApiUrl: MAINNET_RELAY_API,
          source: "universal-account-benchmark"
      });

      // Create ethers wallet
      const provider = new ethers.JsonRpcProvider('https://mainnet.base.org');
      const ethersWallet = new Wallet(privateKey, provider);

      const quote = await getClient()?.actions.getQuote({
          chainId: 8453, // Base
          toChainId: 42161, // Arbitrum
          currency: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', // USDC on Base
          toCurrency: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831', // USDC on Arbitrum
          amount: '100000', // $0.1 USDC (6 decimals)
          user: walletAddress,
          recipient: walletAddress,
          tradeType: 'EXACT_INPUT'
      });

      if (!quote) {
          console.error('Failed to get quote');
          return;
      }

      for (const step of quote.steps || []) {
          const item = step.items?.[0];
          if (step.kind === 'transaction' && item?.data) {
              const tx = await ethersWallet.sendTransaction({
                  to: item.data.to,
                  data: item.data.data,
                  value: BigInt(item.data.value || '0')
              });
              
              await tx.wait();
              
              if (step.requestId) {
                  console.log('explorer url', `https://relay.link/bridge/${step.requestId}`);
              }
          }
      }
  })();

  ```

  ```tsx OneBalance theme={null}
  import { config } from 'dotenv';
  import { privateKeyToAccount } from 'viem/accounts';
  import { parseUnits } from 'viem';
  import { entryPoint07Address, getUserOperationHash } from 'viem/account-abstraction';

  config();

  (async () => {
      const API_KEY = process.env.ONEBALANCE_API_KEY!;
      const privateKey = process.env.PRIVATE_KEY_BASE as `0x${string}`;
      const signer = privateKeyToAccount(privateKey);

      // Predict account address
      const predictResponse = await fetch('<https://be.onebalance.io/api/account/predict-address>', {
          method: 'POST',
          headers: { 'x-api-key': API_KEY, 'Content-Type': 'application/json' },
          body: JSON.stringify({
              type: 'kernel-v3.1-ecdsa',
              signerAddress: signer.address,
          })
      });
      const { predictedAddress } = await predictResponse.json() as { predictedAddress: string };

      // Get quote for USDC → ETH swap
      const quoteResponse = await fetch('<https://be.onebalance.io/api/v3/quote>', {
          method: 'POST',
          headers: { 'x-api-key': API_KEY, 'Content-Type': 'application/json' },
          body: JSON.stringify({
              from: {
                  accounts: [{
                      type: 'kernel-v3.1-ecdsa',
                      signerAddress: signer.address,
                      accountAddress: predictedAddress,
                  }],
                  asset: { assetId: 'ob:usdc' },
                  amount: parseUnits('0.5', 6).toString(),
              },
              to: {
                  asset: { assetId: 'ob:eth' },
              },
          })
      });
      const quote = await quoteResponse.json() as any;

      // Sign operation (Kernel v3.1 requires signing UserOp hash)
      const operation = quote.originChainsOperations[0];
      const userOp = {
          sender: operation.userOp.sender,
          nonce: BigInt(operation.userOp.nonce),
          factory: operation.userOp.factory,
          factoryData: operation.userOp.factoryData,
          callData: operation.userOp.callData,
          callGasLimit: BigInt(operation.userOp.callGasLimit),
          verificationGasLimit: BigInt(operation.userOp.verificationGasLimit),
          preVerificationGas: BigInt(operation.userOp.preVerificationGas),
          maxFeePerGas: BigInt(operation.userOp.maxFeePerGas),
          maxPriorityFeePerGas: BigInt(operation.userOp.maxPriorityFeePerGas),
          paymaster: operation.userOp.paymaster,
          paymasterVerificationGasLimit: operation.userOp.paymasterVerificationGasLimit
              ? BigInt(operation.userOp.paymasterVerificationGasLimit) : undefined,
          paymasterPostOpGasLimit: operation.userOp.paymasterPostOpGasLimit
              ? BigInt(operation.userOp.paymasterPostOpGasLimit) : undefined,
          paymasterData: operation.userOp.paymasterData,
          signature: operation.userOp.signature,
      };
      const userOpHash = getUserOperationHash({
          userOperation: userOp,
          entryPointAddress: entryPoint07Address,
          entryPointVersion: '0.7',
          chainId: Number(operation.typedDataToSign.domain.chainId),
      });
      const signature = await signer.signMessage({ message: { raw: userOpHash } });
      quote.originChainsOperations[0].userOp.signature = signature;

      // Execute swap
      const executeResponse = await fetch('<https://be.onebalance.io/api/v3/quote/execute-quote>', {
          method: 'POST',
          headers: { 'x-api-key': API_KEY, 'Content-Type': 'application/json' },
          body: JSON.stringify(quote)
      });
      const result = await executeResponse.json() as any;
  })();

  ```

  ```tsx Avail Nexus theme={null}
  import { NexusSDK, NEXUS_EVENTS } from '@avail-project/nexus-core';

  // Initialize SDK
  const sdk = new NexusSDK({ network: 'mainnet' });
  await sdk.initialize(provider); // Your EVM-compatible wallet provider

  // ---------------------------
  // 1️⃣ Get unified balances
  // ---------------------------
  const balances = await sdk.getUnifiedBalances(false); // false = CA balances only
  console.log('Balances:', balances);

  // ---------------------------
  // 2️⃣ Bridge tokens
  // ---------------------------
  const bridgeResult = await sdk.bridge(
    {
      token: 'USDC',
      amount: 1_500_000n,
      recipient: '0x...' // Optional
      toChainId: 137, // Polygon
    },
    {
      onEvent: (event) => {
        if (event.name === NEXUS_EVENTS.STEPS_LIST) console.log('Bridge steps:', event.args);
        if (event.name === NEXUS_EVENTS.STEP_COMPLETE) console.log('Step completed:', event.args);
      },
    },
  );
  ```
</CodeGroup>

***

## Summary

<CardGroup>
  <Card title="Choose Universal Accounts if you want..." icon="check">
    * **Zero configuration** for chain agnostic UX
    * **Fastest execution** times
    * **EVM + Solana** support
    * **Server-side** compatibility
    * **Simplest integration** (2 API calls)
  </Card>

  <Card title="Consider alternatives if you need..." icon="circle-info">
    * **Relay**: Fine-grained control over bridging steps
    * **OneBalance**: Bridging driven by resource locks
    * **Avail Nexus**: Intent-based transaction construction & execution
  </Card>
</CardGroup>

<Card title="Ready to integrate?" icon="rocket" href="/universal-accounts/cha/web-quickstart">
  Get started with Universal Accounts in minutes →
</Card>


# Live Integrations
Source: https://developers.particle.network/universal-accounts/live-integrations

Explore dApps and projects powered by Universal Accounts.

Multiple live projects have integrated **Universal Accounts** to become chain-agnostic. From DeFi platforms to prediction markets, these integrations showcase chain abstraction in action.

## DeFi & Trading

<CardGroup>
  <Card title="UniversalX" icon="chart-line" href="https://universalx.app">
    A high volume decentralized trading terminal. *Uses Particle's social logins.*
  </Card>

  <Card title="MYX Finance" icon="arrow-right-arrow-left" href="https://www.myx.finance/">
    A decentralized exchange (DEX) for perpetuals. *Uses Particle's social logins.*
  </Card>

  <Card title="CDEX" icon="chart-candlestick" href="https://cdex.me">
    Perp DEX built on top of Orderly.
  </Card>

  <Card title="Aark" icon="gamepad" href="https://aark.digital">
    Gamified crypto futures with chain-abstracted deposits. *Uses Particle's social logins.*
  </Card>

  <Card title="HoneyPot Finance" icon="honey-pot" href="https://honeypotfinance.xyz">
    A DeFi yield platform on Berachain.
  </Card>

  <Card title="Wagmi" icon="chart-line" href="https://x.com/wagmitradebot">
    A Telegram trading bot powered by Universal Accounts.
  </Card>
</CardGroup>

## AI Agents

<CardGroup>
  <Card title="Minara AI" icon="robot" href="https://minara.ai">
    An AI powered DeFi platform. *Uses Particle's social logins.*
  </Card>

  <Card title="ChimpX" icon="robot" href="https://bnb.chimpx.ai/">
    An AI-powered DeFi assistant on BNB Chain for trading and asset management.
  </Card>
</CardGroup>

## Prediction Markets

<CardGroup>
  <Card title="Overtime Markets" icon="futbol" href="https://overtimemarkets.xyz">
    A sports prediction market platform. *Uses Particle's social logins.*
  </Card>

  <Card title="Clutch" icon="chart-pie" href="https://clutch.market/">
    A Polymarket powered app for parlay predictions.
  </Card>
</CardGroup>

## Payments

<CardGroup>
  <Card title="Flipstable" icon="money-bill-transfer" href="https://flipstable.xyz">
    Send and receive USDC/USDT payments across chains. *Uses Particle's social logins.*
  </Card>
</CardGroup>

## Communities & Creator Tools

<CardGroup>
  <Card title="Galaxis" icon="users" href="https://galaxis.xyz/">
    A plug-and-play toolkit for creating and running decentralized communities.
  </Card>
</CardGroup>

***

## Want to be featured?

If you're building with Universal Accounts and want your project listed here, reach out to us on [Slack](https://join.slack.com/t/particlenetworkhq/shared_invite/zt-3blxdzcd2-7skD8MNWUn_20eOrp9SICA) or [Telegram Support Channel](https://t.me/particle_developer_bot).


# Universal Accounts API
Source: https://developers.particle.network/universal-accounts/ua-reference/apis/ua

Access Universal Accounts functionality through RESTful APIs.

## Universal Accounts API

The **Universal Accounts API** provides direct, low-level access to Particle Network’s Chain Abstraction infrastructure. It’s designed for developers who want to integrate Universal Account functionality into custom backends, services, or non-JavaScript environments.

Through the API, you can:

These endpoints are ideal for server-side use cases, backend orchestration, or alternative client implementations where using the SDK is not viable.


# EIP-7702 Compatible Embedded Wallets
Source: https://developers.particle.network/universal-accounts/ua-reference/desktop/eip7702-wallets

Which embedded wallet providers support EIP-7702 delegation with Universal Accounts.

EIP-7702 mode is the default and recommended way to use Universal Accounts. It upgrades a user's existing EOA in-place—no new address, no asset migration—by delegating execution to Particle's Universal Account contract via a Type-4 transaction.

However, **not all wallets can produce the authorization signature** required for this delegation. Type-4 transactions carry an `authorizationList` field that must be signed by the EOA's private key. Standard JSON-RPC wallets (MetaMask, Rabby, etc.) do not expose this primitive, so they cannot be used in 7702 mode.

<Warning>
  **EIP-7702 mode requires an embedded (WaaS) wallet.**

  JSON-RPC wallets do not support the `signAuthorization` call needed to create Type-4 transactions. If you need to support those wallets, use [Smart Account mode](/universal-accounts/ua-reference/desktop/web#smart-account-mode-json-rpc-wallets) instead.
</Warning>

The following embedded wallet providers have been verified to work with Particle's EIP-7702 Universal Account implementation:

| Provider       | Signing API                            | Auth method                                               |
| -------------- | -------------------------------------- | --------------------------------------------------------- |
| Dynamic (WaaS) | `waasConnector.signAuthorization()`    | `isDynamicWaasConnector()` guard required                 |
| Magic          | `magic.wallet.sign7702Authorization()` | `magic.wallet.send7702Transaction()` handles Type-4 tx    |
| Privy          | `signAuthorization()` hook             | Returns `r, s, yParity`; serialize via `ethers.Signature` |

***

## How Delegation Works (Any Provider)

Regardless of the embedded wallet you use, the delegation flow follows the same structure:

```
1. Check delegation status
   → universalAccount.getEIP7702Deployments()

2. Get the authorization parameters for each chain that needs delegation
   → universalAccount.getEIP7702Auth([chainId])

3. Sign the authorization with the embedded wallet's 7702 API
   → provider.signAuthorization({ address, chainId, nonce })

4. Send a Type-4 transaction carrying the authorizationList
   → walletClient.sendTransaction({ authorizationList: [...] })

5. Sign the transaction rootHash (standard personal_sign)
   → provider.signMessage(rootHash)

6. Broadcast via the Universal Account SDK
   → universalAccount.sendTransaction(transaction, signature)
```

Steps 3 and 4 are provider-specific. Each demo below shows the exact implementation for its wallet.

***

## Demos

<CardGroup>
  <Card title="Magic" icon="github" href="https://github.com/soos3d/ua-7702-magic-demo">
    Next.js demo showing Magic email-OTP login, EIP-7702 delegation on Arbitrum, and a cross-chain ETH → USDC (Solana) conversion.

    **Key packages:** `magic-sdk`, `@magic-ext/evm`
  </Card>

  <Card title="Dynamic (WaaS)" icon="github" href="https://github.com/soos3d/ua-dynamic-7702">
    Next.js demo showing Dynamic WaaS login, EIP-7702 delegation on Arbitrum, and a cross-chain ETH → USDC (Solana) conversion.

    **Key packages:** `@dynamic-labs/sdk-react-core`, `@dynamic-labs/ethereum-aa`
  </Card>

  <Card title="Privy" icon="github" href="https://github.com/Particle-Network/universal-accounts-7702">
    Next.js demo showing Privy social login, EIP-7702 delegation, unified balance view, and cross-chain swaps.

    **Key packages:** `@privy-io/react-auth`, `@privy-io/wagmi`
  </Card>
</CardGroup>

***

## Inline Delegation During Transactions

For chains where delegation hasn't happened yet, the Universal Account SDK can request inline authorizations as part of a regular transaction. You don't need a separate delegation step—iterate over the `userOps` in the transaction and sign any pending `eip7702Auth` entries before calling `sendTransaction()`:

```ts theme={null}
const transaction = await universalAccount.createConvertTransaction({ ... });

const authorizations: EIP7702Authorization[] = [];
const nonceMap = new Map<number, string>();

for (const userOp of transaction.userOps) {
  if (userOp.eip7702Auth && !userOp.eip7702Delegated) {
    let signature = nonceMap.get(userOp.eip7702Auth.nonce);
    if (!signature) {
      // Use your provider's signAuthorization here
      const rawAuth = await provider.signAuthorization(userOp.eip7702Auth);
      signature = Signature.from(rawAuth).serialized;
      nonceMap.set(userOp.eip7702Auth.nonce, signature);
    }
    authorizations.push({
      userOpHash: userOp.userOpHash,
      signature,
    });
  }
}

const rootHashSignature = await walletClient.signMessage({
  account: userAddress,
  message: { raw: transaction.rootHash },
});

const result = await universalAccount.sendTransaction(
  transaction,
  rootHashSignature,
  authorizations,
);
```

This pattern works with any of the providers above—swap in their respective `signAuthorization` call.


# Web (JS/TS): Universal Accounts SDK
Source: https://developers.particle.network/universal-accounts/ua-reference/desktop/web

Implementing Universal Accounts in your application.

<Warning>
  Notice: Universal Accounts are upgrading to V2. This will require a change in account system for your app.

  We've begun the migration and need your users to withdraw all funds from the old account. The next version will be deployed shortly after and you can resume operations.

  Withdrawals will be available past this date, but you will need to migrate your users to the new account system.

  Assets can be withdrawn to any account the user controls, but only via the `createTransferTransaction` method.

  This does not apply to 7702-based Universal Accounts.
</Warning>

The **Universal Accounts SDK** provides **chain abstraction** for your app by integrating Universal Accounts. These offer your users a single account, balance, and interaction point across **EVM chains** and **Solana**.

Our SDK integrates with existing connection flows with minimal setup.

<Card title="Learn More About Universal Accounts" icon="user" href="/intro/universal-accounts">
  What are Universal Accounts, how do they work, and what problems do they solve?
</Card>

<button>
  Try Interactive Demo
</button>

To integrate Universal Accounts:

<Info>
  The following examples use a React-based app alongside [**Particle Auth**](/social-logins/auth/introduction) for authentication and wallet connection.

  However, the **Universal Accounts SDK is provider-agnostic**. You can also use [**Particle Connect**](/social-logins/connect/introduction), **Web3Modal**, **RainbowKit**, or any signer.

  The SDK can also be used server-side to construct and sign transactions programmatically.
</Info>

<Steps>
  <Step title="Connect a user's account">
    A user logs in by connecting a wallet or via a social login.
  </Step>

  <Step title="Understand account modes">
    Universal Accounts support two execution modes. Choosing the right one determines how the user’s account behaves.
  </Step>

  <Step title="Initialize Universal Accounts">
    Once connected, pass the user's EOA address to the SDK and configure your project details.
  </Step>

  <Step title="Use the UA instance">
    Use the returned Universal Account instance to fetch data and send transactions across chains.

    When sending a transaction, the SDK creates a **UserOperation** and returns a `rootHash`.\
    This hash must be **signed by the connected EOA**, then passed back into `sendTransaction()` to broadcast.
  </Step>
</Steps>

Under the hood, all routing, bridging, and gas abstraction are handled by Particle Network's infrastructure.

## Getting Started

### Installation

Once your app is set up, install the **Universal Accounts SDK**:

<Info>
  The SDK depends on `ethers.js` internally, but you are not required to use it directly. You can use any provider or signer that fits your setup.
</Info>

<CodeGroup>
  ```bash yarn theme={null}
  yarn add @particle-network/universal-account-sdk ethers
  ```

  ```bash npm theme={null}
  npm install @particle-network/universal-account-sdk ethers
  ```
</CodeGroup>

## Account Modes

Universal Accounts can operate in two modes, depending on your wallet setup and execution environment:

### 7702 Mode (Default)

Within this mode:

* Your user’s existing EOA is upgraded to act directly as a Universal Account.
* The EOA address and Universal Account address are the same.
* Assets already held at the user's EOA are immediately usable on their Universal Account—without transferring assets.
* No smart account deployments needed.

This mode provides the lowest friction and is recommended for most applications.

### Smart Account Mode

Within this mode:

* A separate smart account is attached to your user's EOA.
* The smart account has its own address, separate from the EOA.
* Users must transfer assets to the smart account before using it.

This mode exists primarily for compatibility with JSON-RPC wallets.

## Initializing and Configuring Universal Accounts

To configure Universal Accounts:

1. Import the UniversalAccount class in your app:

```ts theme={null}
import {
  UniversalAccount,
  UNIVERSAL_ACCOUNT_VERSION,
} from "@particle-network/universal-account-sdk";
```

2. The Universal Accounts SDK requires Particle project credentials from the [Particle Dashboard](https://dashboard.particle.network/). To retrieve your project credentials:

<AccordionGroup>
  <Accordion title="Access the Particle Dashboard">
    <div>
      <img alt="Login into Particle." />

      <img alt="Login into Particle." />
    </div>
  </Accordion>

  <Accordion title="Create or open a project">
    <div>
      <img alt="Create Particle project." />

      <img alt="Create Particle project." />
    </div>
  </Accordion>

  <Accordion title="Create a web application (or skip if already created)">
    <div>
      <img alt="Create web app." />

      <img alt="Create web app." />
    </div>
  </Accordion>

  <Accordion title="Retrieve project credentials">
    <div>
      <img alt="Find app credentials." />

      <img alt="Find app credentials." />
    </div>
  </Accordion>
</AccordionGroup>

3. Then, initialize Universal Accounts using your preferred mode:

<Note>
  **EIP-7702 is the default mode for Universal Accounts.**\
  In this mode, the EOA used for authentication is upgraded to act directly as the Universal Account. However, if you wish to use Smart Account mode, simply set "useEIP7702" to "false".\
  \
  The section below dives deeper into the differences between both modes.
</Note>

```ts theme={null}
const ua = new UniversalAccount({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  projectClientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  projectAppUuid: process.env.NEXT_PUBLIC_APP_ID!,
  smartAccountOptions: {
    // 7702 mode: the EOA address itself becomes the Universal Account
    useEIP7702: true,
    name: "UNIVERSAL",
    version: UNIVERSAL_ACCOUNT_VERSION,
    ownerAddress: wallet.address,
  },
  // Optional: defaults to auto-slippage
  tradeConfig: {
    slippageBps: 100, // 1% slippage tolerance
    // usePrimaryTokens: [SUPPORTED_TOKEN_TYPE.SOL], // Only for swaps
  },
});
```

4. You can now use the `ua` instance to fetch Universal Account data (addresses and unified balances) and to send transactions across supported chains.

### About 7702 Mode (Default)

In 7702 mode, the EOA address used for authentication is the Universal Account.

All Universal Account features—such as chain abstraction, unified balances, and gas abstraction—are applied directly to the user’s original EOA.

<Warning>
  **Current limitation:**

  * 7702 mode is only available in server-side environments and embedded wallets that support the authorization methods.
  * JSON-RPC wallets are not supported at the moment.
</Warning>

Using 7702 mode requires you to authorize the user's EOA to act as the Universal Account on the specified chain before transacting.

Once this delegation is successful, all subsequent transactions will automatically execute on that chain.\
\
To authorize the 7702 mode automatically on new chains, run the below pattern when sending transactions:

```ts theme={null}
const universalAccount = new UniversalAccount(universalAccountConfig);

const transaction = await universalAccount.createConvertTransaction({
    expectToken: { type: SUPPORTED_TOKEN_TYPE.USDT, amount: '0.0001' },
    chainId: CHAIN_ID.BSC_MAINNET,
});

// Handle 7702 Authorization
const authorizations: EIP7702Authorization[] = [];
const nonceMap = new Map<number, string>();
for (const userOp of transaction.userOps) {
    if (!!userOp.eip7702Auth && !userOp.eip7702Delegated) {
        let signature = nonceMap.get(userOp.eip7702Auth.nonce);
        if (!signature) {
            const authorization = wallet.authorizeSync(userOp.eip7702Auth);
            signature = authorization.signature.serialized;
            nonceMap.set(userOp.eip7702Auth.nonce, signature);
        }
        authorizations.push({
            userOpHash: userOp.userOpHash,
            signature: signature,
        });
    }
}
```

<CardGroup>
  <Card title="Serverside examples using EIP-7702" icon="binary" href="https://github.com/Particle-Network/universal-account-example/blob/main/examples/7702-convert-evm.ts">
    Find serverside examples using Universal Accounts in EIP-7702 mode.
  </Card>

  <Card title="EIP-7702 compatible embedded wallets" icon="wallet" href="/universal-accounts/ua-reference/desktop/eip7702-wallets">
    Demos and integration notes for Dynamic, Magic, and Privy embedded wallets with 7702 mode.
  </Card>
</CardGroup>

### Verifying EIP-7702 delegation

To check whether EIP-7702 delegation is active for a Universal Account, query the registered deployments:

```ts theme={null}
const deployments = await universalAccount.getEIP7702Deployments();
console.log(deployments);
```

This call returns an array of EIP-7702 deployment records, including the delegated contract addresses and their current status for each chain.

### Smart Account Mode (JSON-RPC wallets)

This mode exists for compatibility with JSON-RPC wallets, but does not provide the same zero-friction experience as 7702 mode.\
\
As mentioned above, if you need to support Smart Account mode, simply change the following variable upon initialization:

```ts theme={null}
useEIP7702: false
```

In this mode:

* A separate smart account is created and attached to the EOA.
* The smart account has its own address.
* Users must transfer assets to the smart account before use.

### Mode Comparison

| Mode           | Account Address | Asset Transfer Required | JSON-RPC Support |
| -------------- | --------------- | ----------------------- | ---------------- |
| 7702 (default) | Same as EOA     | No                      | No               |
| Smart Account  | Separate        | Yes                     | Yes              |

## Check Out UA Initialization in This Sample Repository

<Card title="Check Out UA Initialization in This Sample Repository" icon="link" href="https://github.com/soos3d/auth-universal-accounts/blob/117dc53daea1b2bc9017e595bc5337e204171f69/auth-universal-demo/app/page.tsx#L43">
  Sample Next.js app using Particle Auth with Universal Accounts.
</Card>

#### Control which tokens are used for swaps

When initializing a **Universal Account**, you can control which tokens are eligible to be used as the source for swap operations.

To do this, set the `usePrimaryTokens` field inside the `tradeConfig` object. This lets you restrict swap logic to specific tokens (e.g. only allow SOL to be spent, not USDT or ETH).

Example:

```ts theme={null}
tradeConfig: {
  usePrimaryTokens: [SUPPORTED_TOKEN_TYPE.SOL],
}
```

This is useful if you want to:

* Ensure predictable token usage during swaps.
* Prevent certain tokens from being auto-selected as swap input.
* Customize the user experience around token prioritization.

## Fetching a Universal Account's Addresses

A **Universal Account** is composed of multiple addresses, each relevant to a specific interaction layer:

1. **Owner Address**: The EOA that owns the Universal Account and signs transactions (e.g., from MetaMask or via a social login).
2. **EVM Universal Address**: The **UA** address used on EVM-compatible chains.
3. **Solana Universal Address**: The **UA** address used on Solana.

<Note>
  The EVM and Solana Universal Addresses are distinct due to the way deposits work on each network.

  You can deposit any **EVM token** to the **EVM Universal Address**, and any **Solana token** to the **Solana Universal Address**. EVM and Solana assets will be accessible through the **same UA instance**, and balance lookups and transactions will remain unified at the SDK level.
</Note>

You can retrieve all relevant addresses from an initialized Universal Account instance as follows:

```ts theme={null}
const smartAccountOptions = await ua.getSmartAccountOptions();

const accountInfo = {
  ownerAddress: smartAccountOptions.ownerAddress, // EOA that owns the Universal Account
  evmUaAddress: smartAccountOptions.smartAccountAddress!, // EVM UA
  solanaUaAddress: smartAccountOptions.solanaSmartAccountAddress!, // SOL UA
};

console.log("Smart Account info:", accountInfo);
```

<Card title="UA Info Management" icon="file-user" href="https://github.com/soos3d/auth-universal-accounts/blob/117dc53daea1b2bc9017e595bc5337e204171f69/auth-universal-demo/app/page.tsx#L70">
  This repository includes a sample Next.js app with social logins via Particle Auth alongside Universal Accounts.
</Card>

## Primary Assets & Unified Balance

Universal Accounts can hold all assets across supported chains.\
Among these, **Primary Assets** are special: they have the deepest liquidity and can be used as the basis for **cross-chain swaps, liquidity routing, and gas payments**.

> **Why this matters:** You can give users a *single, unified balance* of these spendable assets—regardless of which chain they're actually on.

<Note>
  The full list of supported Primary Assets is available on the [Supported chains and Primary Assets](/universal-accounts/cha/chains#primary-assets) page.
</Note>

### Fetch Unified Balance (quick way)

The easiest way to display the maximum amount a user can spend in one go (the sum of their Primary Assets across chains) is by fetching their **Unified Balance**:

```ts theme={null}
const primaryAssets = await ua.getPrimaryAssets();
console.log("Unified Balance:", primaryAssets.totalAmountInUSD);
```

This gives you a single number (totalAmountInUSD) that represents the cross-chain total balance of Primary Assets in USD.

### Inspect Primary Assets in Detail

If you need more than just the total, `getPrimaryAssets()` also returns a detailed list of assets:

```ts theme={null}
const primaryAssets = await ua.getPrimaryAssets();
console.log("Primary Assets:", JSON.stringify(primaryAssets, null, 2));
```

The following is the structure of the response:

```ts theme={null}
{
  assets: AssetInfo[],       // assets breakdown (per-token and chain)
  totalAmountInUSD: number   // unified total
}
```

Each `AssetInfo` entry aggregates a token across chains, including per-chain breakdowns.

<Accordion title="Expand to see the full structure">
  | Field              | Description                                 |
  | ------------------ | ------------------------------------------- |
  | `tokenType`        | Token identifier (e.g., "eth", "usdt")      |
  | `price`            | Current USD price                           |
  | `amount`           | Total amount across chains (human-readable) |
  | `amountInUSD`      | Total USD value                             |
  | `chainAggregation` | Per-chain balance breakdowns                |
</Accordion>

#### `chainAggregation` format

Each `chainAggregation` entry details the balance and metadata of the token on a specific chain:

<Accordion title="Expand to see the full structure">
  | Field                       | Description                                      |
  | --------------------------- | ------------------------------------------------ |
  | `token.chainId`             | Chain ID                                         |
  | `token.address`             | Token contract address                           |
  | `amount`                    | Token amount (human-readable float)              |
  | `amountInUSD`               | USD value                                        |
  | `rawAmount`                 | Token amount in raw units (integer, stringified) |
  | `token.decimals`            | ERC-20 decimals                                  |
  | `token.realDecimals`        | Adjusted decimals for display                    |
  | `token.isMultiChain`        | Part of multi-chain registry                     |
  | `token.isMultiChainDefault` | Default canonical version across chains          |
</Accordion>

<Note>
  For native assets like `ETH`, the `token.address` field will be `0x0000000000000000000000000000000000000000`.
</Note>

<CardGroup>
  <Card title="Fetch Primary Assets in a Sample App" icon="binary" href="https://github.com/soos3d/auth-universal-accounts/blob/117dc53daea1b2bc9017e595bc5337e204171f69/auth-universal-demo/app/page.tsx#L99">
    See how to call `getPrimaryAssets()` in a real Next.js app using Particle Auth and Universal Accounts.
  </Card>

  <Card title="Parse and Display Asset Balances" icon="brackets-curly" href="https://github.com/soos3d/auth-universal-accounts/blob/main/auth-universal-demo/app/components/BalanceCard.tsx">
    Check out how Primary Asset data is parsed and rendered in this sample app.
  </Card>
</CardGroup>

## Sending a Transfer Transaction

The `Universal Accounts SDK` lets you send tokens to any address across supported chains using the `createTransferTransaction()` method. Like other transactions, transfers don’t require the user to hold assets or gas tokens on the destination chain—**liquidity and gas are abstracted** behind the scenes.

Once you construct the transfer, the SDK returns a `rootHash` to sign. You sign it with the connected EOA (e.g., from Particle Auth), then call `sendTransaction()` to broadcast:

```ts theme={null}
import { CHAIN_ID, UniversalAccount } from "@particle-network/universal-account-sdk";
import { useEthereum } from "@particle-network/authkit";

const { provider } = useEthereum();

const transaction = await ua.createTransferTransaction({
  token: {
    chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
    address: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
  },
  amount: "0.1", // Amount to send (human-readable string)
  receiver: receiverAddress, // Target address
});

const signature = await provider.signMessage(transaction.rootHash);
const result = await ua.sendTransaction(transaction, signature);

console.log("Explorer URL:", `https://universalx.app/activity/details?id=${result.transactionId}`);
```

<Info>
  For native assets like `ETH`, the token address will be `0x0000000000000000000000000000000000000000`.
</Info>

The returned `TransactionResult` will include the transaction ID, as well as metadata like token movements and fee breakdowns. You can find more details about this in the [TransactionResult](/universal-accounts/ua-reference/desktop/web#transactionresult) section below.

<Card title="View a Sample Transfer Transaction" icon="arrows-turn-right" href="https://github.com/soos3d/auth-universal-accounts/blob/f026f3e3af14ce0ca2c7904e916307b1277b8158/auth-universal-demo/app/components/SendTransactionCard.tsx#L90">
  See how to send cross-chain transfers in a demo Next.js app leveraging Universal Accounts and Particle Auth.
</Card>

## Sending a Custom Payable Transaction

The **Universal Accounts SDK** supports sending contract interactions, including payable transactions, through the `createUniversalTransaction()` method. In this example, we interact with a smart contract on the **Base Mainnet** that requires exactly 0.0000001 ETH to execute a `checkIn()` function.

By specifying an `expectTokens` array, the SDK ensures the account has the necessary **ETH** on Base—even if the user’s assets are on other chains or in different tokens (e.g., USDC, USDT). The SDK will handle all additional required cross-chain routing and token conversion under the hood.

Once the transaction is created, it will return a `rootHash` value representing the payload to be signed. You can then use a signer (e.g., Particle Auth) to sign this hash and broadcast it using `sendTransaction()`.

The following code snippet shows how to use the **Universal Accounts SDK** to send a payable transaction:

```tsx theme={null}
import { CHAIN_ID, SUPPORTED_TOKEN_TYPE } from "@particle-network/universal-account-sdk";
import { Interface, parseEther, toBeHex } from "ethers";
import { useEthereum } from "@particle-network/authkit";

// Extract the provider from Particle Auth
const { provider } = useEthereum();

const contractAddress = "0x14dcD77D7C9DA51b83c9F0383a995c40432a4578";
const interf = new Interface(["function checkIn() public payable"]);

const transaction = await ua.createUniversalTransaction({
  chainId: CHAIN_ID.BASE_MAINNET,
  expectTokens: [
    {
      type: SUPPORTED_TOKEN_TYPE.ETH,
      amount: "0.0000001",
    },
  ],
  transactions: [
    {
      to: contractAddress,
      data: interf.encodeFunctionData("checkIn"),
      value: toBeHex(parseEther("0.0000001")),
    },
  ],
});

const signature = await provider.signMessage(transaction.rootHash);
const result = await ua.sendTransaction(transaction, signature);

console.log("Explorer URL:", `https://universalx.app/activity/details?id=${result.transactionId}`);
```

The returned `TransactionResult` will include the transaction's ID and metadata like token movements and fee breakdowns.

## Sending a Buy Transaction

The Universal Accounts SDK supports **buy/swap transactions** directly through the `createBuyTransaction()` method. This allows you to programmatically route an amount in **USD** into a target token (e.g., USDT on Arbitrum), without requiring the user to hold funds on the destination chain.

Once the transaction is created, it returns a `rootHash` value representing the payload to be signed. You then use your **signer** (in this case, Particle Auth) to sign the message, and pass the result into sendTransaction() to broadcast it:

<Note>
  You can specify the specific tokens you want to use as source for the swap by setting the `usePrimaryTokens` property in the `tradeConfig` object when initializing the Universal Account.

  ```ts theme={null}
  tradeConfig: {
      usePrimaryTokens: [SUPPORTED_TOKEN_TYPE.SOL],
    },
  ```
</Note>

```ts theme={null}
import { CHAIN_ID, UniversalAccount } from "@particle-network/universal-account-sdk";
import { useEthereum } from "@particle-network/authkit";

// extract the provider from Particle Auth
const { provider } = useEthereum();

// In your app
const transaction = await ua.createBuyTransaction({
  token: {
    chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
    address: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
  },
  amountInUSD: "10", // Target amount in USD sourced from primary assets held
});

const signature = await provider.signMessage(transaction.rootHash);
const result = await ua.sendTransaction(transaction, signature);

console.log("Explorer URL:", `https://universalx.app/activity/details?id=${result.transactionId}`);
```

The `sendTransaction` method will then return a `TransactionResult` object, which includes the transaction ID and other metadata.

<Card title="Sample Swap Transaction" icon="coin-front" href="https://github.com/soos3d/auth-universal-accounts/blob/main/auth-universal-demo/app/components/SendTransactionCard.tsx">
  See how to initiate a swap transaction in a demo Next.js app using both Particle Auth and Universal Accounts.
</Card>

## Sending a Sell Transaction

The **Universal Accounts SDK** supports **sell/swap transactions** through the `createSellTransaction()` method. This allows you to programmatically sell a token (e.g., ARB on Arbitrum) into a target primary asset, with the transaction routed through Particle’s Chain Abstraction layer.

Once the transaction is created, it returns a `rootHash` payload that needs to be signed. You then use your signer (e.g., Particle Auth) to sign and pass it into `sendTransaction()` to broadcast.

<Note>
  The amount you specify is the raw token amount to be sold (no decimals adjustment needed). Ensure the **Universal Account** has a sufficient balance of the token before calling `createSellTransaction()`.
</Note>

```ts theme={null}
import { CHAIN_ID, UniversalAccount } from "@particle-network/universal-account-sdk";
import { useEthereum } from "@particle-network/authkit";

// extract the provider from Particle Auth
const { provider } = useEthereum();

// In your app
const transaction = await ua.createSellTransaction({
  token: {
    chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
    address: "0x912CE59144191C1204E64559FE8253a0e49E6548", // ARB on Arbitrum
  },
  amount: "0.1", // Amount of token to sell
});

const signature = await provider.signMessage(transaction.rootHash);
const result = await ua.sendTransaction(transaction, signature);

console.log("Explorer URL:", `https://universalx.app/activity/details?id=${result.transactionId}`);
```

The `sendTransaction(`) method returns a `TransactionResult` object with the transaction ID and other metadata.

### Specifying the Output Token Type

By default, `createSellTransaction()` accepts an optional second argument, `tradeConfig`, which lets you control what token you receive as proceeds from the sell.

The `preferTokenType` field inside `tradeConfig` accepts either a numeric literal or the named `PREFER_TOKEN_TYPE` enum member — both are equivalent since `PREFER_TOKEN_TYPE` is a numeric TypeScript enum.

| Value | Enum                       | Meaning                                          |
| ----- | -------------------------- | ------------------------------------------------ |
| `0`   | `PREFER_TOKEN_TYPE.USD`    | Receive a USD-pegged stablecoin (USDC)           |
| `1`   | `PREFER_TOKEN_TYPE.NATIVE` | Receive the chain's native token (e.g. ETH, BNB) |

<Note>
  If `tradeConfig` is omitted entirely, the SDK uses its own default output token.
</Note>

```ts theme={null}
import { CHAIN_ID, PREFER_TOKEN_TYPE, UniversalAccount } from "@particle-network/universal-account-sdk";
import { useEthereum } from "@particle-network/authkit";

const { provider } = useEthereum();

const transaction = await universalAccount.createSellTransaction(
  {
    token: {
      chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
      address: "0x912CE59144191C1204E64559FE8253a0e49E6548", // ARB on Arbitrum
    },
    amount: "1",
  },
  {
    preferTokenType: PREFER_TOKEN_TYPE.USD, // 0 = USDC, 1 = native token
  },
);

const signature = await provider.signMessage(transaction.rootHash);
const result = await universalAccount.sendTransaction(transaction, signature);

console.log("Explorer URL:", `https://universalx.app/activity/details?id=${result.transactionId}`);
```

## Sending a Conversion Transaction

You can convert [Primary Assets](/universal-accounts/cha/chains#primary-assets) with the `createConvertTransaction` method.

The example below demonstrates how to convert any primary asset into another—USDC on Arbitrum, in this case:

```ts theme={null}
import { CHAIN_ID, SUPPORTED_TOKEN_TYPE, UniversalAccount } from "@particle-network/universal-account-sdk";
import { useEthereum } from "@particle-network/authkit";

// extract the provider from Particle Auth
const { provider } = useEthereum();

// In your app
const transaction = await ua.createConvertTransaction({
    expectToken: { type: SUPPORTED_TOKEN_TYPE.USDC, amount: '1' },
    chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
});

const signature = await provider.signMessage(transaction.rootHash);
const result = await ua.sendTransaction(transaction, signature);

console.log("Explorer URL:", `https://universalx.app/activity/details?id=${result.transactionId}`);
```

This method is useful to convert assets directly to your target chain (for example, upon deposit).

## Solana Transactions

Universal Accounts support **Solana** as well.

You can swap any token to and from SOL using the `createTransferTransaction()` method, even without assets on Solana.

Here is an example:

```ts theme={null}
import { CHAIN_ID } from "@particle-network/universal-account-sdk";
import { useEthereum } from "@particle-network/authkit";

// extract the provider from Particle Auth
const { provider } = useEthereum();

// In your app
const transaction = await ua.createBuyTransaction({
    // Buy sol
    // token: { chainId: CHAIN_ID.SOLANA_MAINNET, address: "0x0000000000000000000000000000000000000000" },
    
    // Buy a token
    token: { chainId: CHAIN_ID.SOLANA_MAINNET, address: "6p6xgHyF7AeE6TZkSmFsko444wqoP15icUSqi2jfGiPN" },
    // buy $0.001 of trump
    amountInUSD: "0.001",
});

const signature = await provider.signMessage(transaction.rootHash);
const result = await universalAccount.sendTransaction(transaction, signature);

console.log("Explorer URL:", `https://universalx.app/activity/details?id=${result.transactionId}`);
```

<Note>
  Even if your Universal Account doesn’t hold SOL for gas, you can still purchase SOL or any other Solana token. Universal Accounts will automatically handle routing and liquidity across chains to cover gas fees.
</Note>

Solana transactions can be signed with any provider compatible with the Universal Accounts SDK. In this case, Particle Auth is used to sign the `rootHash`.

You can combine this swap transaction with a SOL transfer to automatically convert EVM-based assets to SOL and send them to another account in a single flow.

## Transaction Preview

The transaction object returned by methods like `createTransferTransaction()` provides a full preview of the transaction before it’s executed. This includes key details such as estimated fees, token transfers, and other relevant metadata—allowing you to display clear, actionable information to users before confirmation.

For example:

```tsx page.tsx theme={null}
const transaction = await universalAccount.createBuyTransaction({
  token: {
    chainId: CHAIN_ID.BSC_MAINNET,
    address: "0x59264f02D301281f3393e1385c0aEFd446Eb0F00", // PARTI token on BNB Chain
  },
  amountInUSD: "1",
});
```

The returned transaction object includes **metadata** such as **sender** and **recipient** addresses, **tokens** used, and **estimated fees**.

Here’s how to extract and display the estimated fees:

```ts page.tsx theme={null}
import { formatUnits } from "ethers";

const feeQuote = transaction.feeQuotes[0];
const fee = feeQuote.fees.totals;

console.log("Total fee (USD):", `$${formatUnits(fee.feeTokenAmountInUSD, 18)}`);
console.log("Gas fee (USD):", `$${formatUnits(fee.gasFeeTokenAmountInUSD, 18)}`);
console.log("Service fee (USD):", `$${formatUnits(fee.transactionServiceFeeTokenAmountInUSD, 18)}`);
console.log("LP fee (USD):", `$${formatUnits(fee.transactionLPFeeTokenAmountInUSD, 18)}`);
```

<Info>
  For a full breakdown of the preview structure and practical usage examples, see the [Preview Transaction Details with Universal Accounts](/universal-accounts/cha/how-to/tx-preview) guide.
</Info>

## `sendTransaction()` Response Structure

After broadcasting a transaction with `sendTransaction()`, the SDK will return a detailed object containing its execution status, fee breakdowns, token flows, and analytics.

Below is a breakdown of the key fields within this object:

<Accordion title="Top-Level Fields">
  | Field                       | Description                                                             |
  | --------------------------- | ----------------------------------------------------------------------- |
  | `transactionId`             | Unique ID of the transaction (used to query status or activity details) |
  | `mode`                      | Network mode, typically `"mainnet"` or `"testnet"`                      |
  | `sender` / `receiver`       | Address that initiated and received the transaction (usually same)      |
  | `type`                      | Transaction type (e.g. `"universal"`)                                   |
  | `status`                    | Execution status code (internal enum)                                   |
  | `tag`                       | Transaction tag (e.g., `"buy"` or `"swap"`)                             |
  | `created_at` / `updated_at` | ISO timestamps for lifecycle tracking                                   |
</Accordion>

<Accordion title="`fees` (Cost Breakdown)">
  | Field                           | Description                                                  |
  | ------------------------------- | ------------------------------------------------------------ |
  | `totals.feeTokenAmountInUSD`    | Total fee in USD                                             |
  | `feeTokens[]`                   | List of tokens used to pay fees, with symbols and USD values |
  | `freeGasFee` / `freeServiceFee` | Whether any component was waived                             |
</Accordion>

<Accordion title="`depositTokens` / `lendingTokens`">
  Tokens deducted from the user's account to fund the transaction. Each entry includes:

  * `token.symbol`
  * `token.chainId`
  * `amount` and `amountInUSD`
  * Full metadata (decimals, icon, etc.)
</Accordion>

<Accordion title="tokenChanges (Before/After Effects)">
  Provides the most useful high-level insight into what changed:

  | Field             | Description                                          |
  | ----------------- | ---------------------------------------------------- |
  | `decr[]`          | Tokens deducted from the user (chain, token, amount) |
  | `incr[]`          | Tokens received by the user                          |
  | `swaps[]`         | Swap routes (e.g. from USDC to USDT via 1inch)       |
  | `tokenBalances[]` | Final post-transaction token balances                |
</Accordion>

<Accordion title="Analytics & Valuation">
  | Field                   | Description                                                    |
  | ----------------------- | -------------------------------------------------------------- |
  | `slippage`              | Slippage used for the route (in basis points)                  |
  | `totalFeeInUSD`         | Final USD fee value                                            |
  | `totalDecrAmountInUSD`  | Total USD value deducted                                       |
  | `totalIncrAmountInUSD`  | Total USD value received                                       |
  | `priceImpact`           | Estimated price impact (0 if none)                             |
  | `minReceiveAmountInUSD` | Minimum expected amount (to be received, post-slippage) in USD |
  | `minReceiveToken`       | Token  targeted by the buy/swap action                         |
</Accordion>

<Accordion title="`Explorer / Activity Link`">
  You can construct a link to see the activity on UniversalX:

  ```ts theme={null}
  const url = `https://universalx.app/activity/details?id=${transactionId}`;
  ```
</Accordion>

## Fetching Transaction History

The **Universal Accounts SDK** allows you to retrieve a user's transaction history directly from their **Universal Account**.\
You can query both **general transactions** (all activity) and **token-specific transactions** (activity related to a specific token).

This is useful for displaying activity feeds, wallet histories, or user analytics dashboards.

### Fetch All Transactions

To retrieve the complete transaction history of a Universal Account, use the `getTransactions(page, pageSize)` method:

```ts theme={null}
const transactions = await universalAccount.getTransactions(1, 20);
console.log("transactions", transactions);
```

This call will return a paginated list of transactions ordered by most recent. Each page includes up to the number of records you specify in the `pageSize` argument.

### Fetch Token-Specific Transactions

To filter the transaction history by a specific token and chain, use the `getTokenTransactions()` method:

```tsx theme={null}
const tokenTransactions = await universalAccount.getTokenTransactions({
  chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
  address: "0x912CE59144191C1204E64559FE8253a0e49E6548", // ARB token on Arbitrum
});

console.log("tokenTransactions", tokenTransactions);
```

This will return a list of transactions where the specified token was involved.

Each response includes a `nextPageToken` you can use to fetch additional results.

#### Pagination Example

To retrieve the next page of token-specific transactions, simply pass the returned `nextPageToken`:

```tsx theme={null}
const tokenTransactions2 = await universalAccount.getTokenTransactions(
  {
    chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
    address: "0x912CE59144191C1204E64559FE8253a0e49E6548",
  },
  tokenTransactions.nextPageToken
);

console.log("tokenTransactions2", tokenTransactions2);
```

<Note>
  Both `getTransactions()` and `getTokenTransactions()` support pagination.\
  Always check for the `nextPageToken` field in the response to determine if more results are available.
</Note>

## Fetching Transaction Details

To retrieve the details of a specific transaction, use the `getTransaction(transactionId)` method:

<Note>
  The `transactionId` is the transaction's unique identifier; you can retrieve it from the transaction history.
</Note>

```ts theme={null}
const txDetails = await universalAccountInstance.getTransaction(transactionId);
console.log("txDetails", txDetails);
```

This will return a `TransactionDetails` object containing detailed information about the transaction. You can then use this object to display transaction details in your application.

## Using Particle Connect with Universal Accounts

<Note>
  The following example uses **Particle Connect** instead of Particle Auth. It shows how to sign and send a Universal Account transaction using a connected wallet.
</Note>

When using **Particle Connect**, you can access the connected wallet through the `useWallets()` hook. The `primaryWallet` object exposes a `walletClient`, which acts as the signer.

This lets you sign the **Universal Account transaction** payload (rootHash) using any **wallet** connected via **Particle Connect**.

The following code snippet shows how to use the **Universal Accounts SDK** to sign a transaction with Particle Connect:

```tsx theme={null}
import { useWallets, useAccount } from "@particle-network/connectkit";
import { CHAIN_ID } from "@particle-network/universal-account-sdk";

// Get wallet from Particle Connect
const [primaryWallet] = useWallets();
const walletClient = primaryWallet?.getWalletClient();
const { address } = useAccount();

// Create a cross-chain transfer transaction via Universal Accounts
const transaction = await ua.createTransferTransaction({
  token: {
    chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
    address: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
  },
  amount: "0.1", // Amount to send (human-readable string)
  receiver: receiverAddress, // Target address
});

// Sign the transaction's root hash using connected wallet
const signature = await walletClient?.signMessage({
  account: address as `0x${string}`,
  message: { raw: transaction.rootHash },
});

// Send the signed transaction via Universal Account SDK
const sendResult = await universalAccount.sendTransaction(
  transaction,
  signature
);

// Log UniversalX explorer link
console.log(
  "Explorer URL:",
  `https://universalx.app/activity/details?id=${sendResult.transactionId}`
);
```

## Using Universal Accounts in the backend

The **Universal Accounts SDK** can also be used in backend environments to construct and sign transactions programmatically.

The example below demonstrates usage with ethers.js and a private key in Node.js:

```ts theme={null}
import { UniversalAccount, CHAIN_ID } from "@particle-network/universal-account-sdk";
import { Wallet, getBytes } from "ethers";

// Initialize wallet
const wallet = new Wallet("PRIVATE_KEY_OR_MNEMONIC");

// Create a Universal Account instance
const ua = new UniversalAccount({
  projectId: "UA_PROJECT_ID",
  ownerAddress: wallet.address,
  tradeConfig: {
    slippageBps: 100,      // Set slippage to 1% (100 basis points)
    universalGas: true     // Use PARTI tokens to cover gas fees
  }
});

// Create a transaction to buy $0.1 worth of ARB on Arbitrum
const tx = await ua.createBuyTransaction({
  token: {
    chainId: CHAIN_ID.ARBITRUM_MAINNET_ONE,
    address: "0x912CE59144191C1204E64559FE8253a0e49E6548" // ARB token contract
  },
  amountInUSD: "0.1"
});

// Sign and send the transaction
const result = await ua.sendTransaction(tx, wallet.signMessageSync(getBytes(tx.rootHash)));

// Log the transaction result and link to explorer
console.log("Transaction ID:", result.transactionId);
console.log("View on Explorer:", `https://universalx.app/activity/details?id=${result.transactionId}`);
```

## Registering a UniversalX Account

The **Universal Accounts SDK** also allows you to register an account on [UniversalX](https://universalx.app), a chain-abstracted trading platform built upon **Universal Accounts**.

This can automatically onboard your users into **UniversalX** when they create or initialize a Universal Account. UniversalX registration is optional and only needs to be done **once per UA**.

```ts theme={null}
import { UniversalAccount, createUnsignedMessage } from "@particle-network/universal-account-sdk";
import { randomUUID } from "crypto";

const ua = new UniversalAccount({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  projectClientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  projectAppUuid: process.env.NEXT_PUBLIC_APP_ID!,
  ownerAddress: 'USER_ADDRESS',
});

// Fetch smart account info to get the UA address
const smartAccountOptions = await ua.getSmartAccountOptions();

// Optional invite code
const inviteCode = "000000";

// Prepare registration payload
const deviceId = randomUUID();
const timestamp = Date.now();

const unsignedMessage = createUnsignedMessage(
  smartAccountOptions.smartAccountAddress!,
  deviceId,
  timestamp
);

// Sign message using EOA (can be a backend wallet)
const signature = provider.signMessage(unsignedMessage);

// Register the UniversalX account
const result = await ua.register(inviteCode, deviceId, timestamp, signature);

if (!!result.token) {
  console.log("Registration successful.");
} else {
  console.error("Registration failed:", result);
}
```

<Info>
  You can also pass an invite code (`"000000"` by default) if you have one.
</Info>


# Universal Accounts SDK FAQ
Source: https://developers.particle.network/universal-accounts/ua-reference/faq

Frequently Asked Questions about the Universal Accounts SDK.

<AccordionGroup>
  <Accordion title="What is the Universal Accounts SDK?" icon="browser">
    The Universal Accounts SDK lets you integrate Particle Network's chain abstraction into your dApp. It provides your users with a unified address and balance across EVM chains and Solana.

    You can use this SDK to:

    * Allow users with assets on any chain to access your dApp.
    * Give your users a unified assets balance and identity across chains and ecosystems.
    * Execute transactions across chains without bridging or transferring assets.
  </Accordion>

  <Accordion title="Which platforms are supported by the SDK?" icon="desktop">
    The SDK is currently only available for Web.

    <Tip>
      Check out our [SDK Reference](/universal-accounts/ua-reference/desktop/web) for detailed platform-specific docs.
    </Tip>
  </Accordion>

  <Accordion title="What are Primary Assets, and how do they work?" icon="coins">
    Primary Assets are tokens with deep liquidity, used by the Universal Accounts SDK as sources for cross-chain transactions. These assets are used for gas, swaps, and liquidity routing across chains.

    <Info>
      Find a list of the supported Primary Assets in the [Supported Chains & Primary Assets](/universal-accounts/cha/chains#primary-assets) page.
    </Info>

    Users can hold Primary assets on any [supported chain](/universal-accounts/cha/chains). When a transaction (like a swap or transfer) is initiated, the SDK will:

    * Identify the most optimal Primary Asset from the user’s portfolio. For example, it may select USD on Polygon to allow a user to purchase a memecoin on Solana.
    * Route liquidity across all the chains the user holds this Primary Asset using Universal Liquidity.
    * Complete the transaction on the destination chain, even if the user holds **no assets on that chain.**
  </Accordion>

  <Accordion title="Do users need to deposit assets into their Universal Account?" icon="vault">
    Yes. Universal Accounts are ERC-4337 smart account implementations, which means users must deposit assets into them before they can be used.

    However, if a user already holds funds on another app leveraging Universal Accounts, like [UniversalX](https://universalx.app), those balances will be already available and usable within your dApp

    To enable swaps, transfers, or contract calls:

    * Users must hold **at least one [Primary Asset](/universal-accounts/cha/chains#primary-assets)** on their Universal Account.
    * Once deposited, the SDK can route liquidity across supported chains.
  </Accordion>

  <Accordion title="Do Universal Accounts have private keys?" icon="lock-open">
    No. Universal Accounts are ERC-4337 smart accounts—they don’t have private keys like traditional EOAs (Externally Owned Accounts).

    Instead, ownership and permissions are managed via a signer (such as a user's wallet or social login) that authorizes transactions.
  </Accordion>

  <Accordion title="What are the transaction fees?" icon="file-invoice-dollar">
    Particle Network applies fees to **buy** and **sell** transactions executed through **Universal Accounts**.

    Fee structures are not fixed and are defined **per project**, based on factors such as use case, volume, and integration requirements.

    For detailed pricing or to discuss a custom fee model, contact\
    [Particle Support](https://t.me/particle_developer_bot).
  </Accordion>

  <Accordion title="How to fix the 'Buffer is not defined' error in Vite" icon="bug">
    This error happens because Vite doesn't polyfill Node.js globals like `Buffer` in the browser. However, some SDK dependencies (like `ethers`) may expect it to be available.

    To fix this, follow these steps:

    ### 1. Install required packages

    ```bash theme={null}
    npm install buffer
    npm install --save-dev @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill
    ```

    1. Update your `vite.config.ts`

    ```ts vite.config.ts theme={null}
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
    import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'

    export default defineConfig({
      plugins: [react()],
      optimizeDeps: {
        esbuildOptions: {
          define: {
            global: 'globalThis'
          },
          plugins: [
            NodeGlobalsPolyfillPlugin({
              buffer: true
            }),
            NodeModulesPolyfillPlugin()
          ]
        }
      },
      resolve: {
        alias: {
          buffer: 'buffer'
        }
      }
    })
    ```
  </Accordion>

  <Accordion title="Could not find a declaration file for module '@particle-network/universal-account-sdk'." icon="file">
    You might get this error when using TypeScript. To fix it, you can add a declaration in `tsconfig.json`.

    Add `./node_modules/@particle-network/universal-account-sdk/dist/index.d.ts` to the `paths` property in `tsconfig.json`.

    ```json theme={null}
    {
      "paths": {
        "@/*": ["./*"],
        "@particle-network/universal-account-sdk": ["./node_modules/@particle-network/universal-account-sdk/dist/index.d.ts"]
      }
    }
    ```

    This will solve the declaration error.
  </Accordion>
</AccordionGroup>

<Note>
  **Still need help?** \ Reach out via our[
  Telegram](https://t.me/particle_developer_bot) **support channel** to get
  direct help from Particle’s Developer Relations team.
</Note>


# Universal Deposit SDK — Core API
Source: https://developers.particle.network/universal-accounts/ua-reference/universal-deposit/core-sdk

Headless Core API reference for the Universal Deposit SDK: DepositClient constructor, methods, and events.

The `DepositClient` provides full deposit functionality without React. Use it for server-side scripts, Node.js backends, or custom UI frameworks.

## DepositClient

```typescript theme={null}
import { DepositClient, CHAIN } from '@particle-network/universal-deposit';

const client = new DepositClient({
  ownerAddress: '0x...',
  intermediaryAddress: '0x...',
  authCoreProvider: provider,
  destination: { chainId: CHAIN.BASE },
});

await client.initialize();
client.startWatching();
```

### Constructor Config

| Property              | Type                | Required | Default              | Description                                  |
| --------------------- | ------------------- | -------- | -------------------- | -------------------------------------------- |
| `ownerAddress`        | `string`            | Yes      | —                    | User's wallet address.                       |
| `intermediaryAddress` | `string`            | Yes      | —                    | JWT wallet from Auth Core.                   |
| `authCoreProvider`    | `AuthCoreProvider`  | No\*     | —                    | Provider for signing. \*Required for sweeps. |
| `destination`         | `DestinationConfig` | Yes      | —                    | Where swept funds go (`chainId` required).   |
| `supportedTokens`     | `TokenType[]`       | No       | All                  | Tokens to watch.                             |
| `supportedChains`     | `number[]`          | No       | All 17               | Chains to watch.                             |
| `autoSweep`           | `boolean`           | No       | `true`               | Auto-sweep on detection.                     |
| `minValueUSD`         | `number`            | No       | `0.50`               | Minimum USD threshold.                       |
| `pollingIntervalMs`   | `number`            | No       | `3000`               | Polling interval (ms).                       |
| `recovery`            | `RecoveryConfig`    | No       | —                    | Recovery behavior.                           |
| `refund`              | `RefundConfig`      | No       | `{ enabled: false }` | Auto-refund (experimental).                  |
| `uaProjectId`         | `string`            | No       | SDK default          | Particle project ID for UA operations only.  |

***

## Methods

| Method                                  | Parameters                        | Returns                              | Description                             |
| --------------------------------------- | --------------------------------- | ------------------------------------ | --------------------------------------- |
| `initialize()`                          | —                                 | `Promise<void>`                      | Initialize client (call first).         |
| `destroy()`                             | —                                 | `void`                               | Cleanup resources.                      |
| `getDepositAddresses()`                 | —                                 | `Promise<DepositAddresses>`          | Get EVM + Solana addresses.             |
| `startWatching()`                       | —                                 | `void`                               | Start balance polling.                  |
| `stopWatching()`                        | —                                 | `void`                               | Stop balance polling.                   |
| `checkBalances()`                       | —                                 | `Promise<DetectedDeposit[]>`         | Get current balances (above threshold). |
| `sweep(depositId?)`                     | `string?`                         | `Promise<SweepResult[]>`             | Sweep specific or all deposits.         |
| `getStatus()`                           | —                                 | `ClientStatus`                       | Current status.                         |
| `getPendingDeposits()`                  | —                                 | `DetectedDeposit[]`                  | Unsent deposits.                        |
| `getConfig()`                           | —                                 | `ResolvedConfig`                     | Resolved config.                        |
| `setDestination(dest)`                  | `Partial<DestinationConfig>`      | `void`                               | Change destination at runtime.          |
| `getDestination()`                      | —                                 | `{ address, chainId }`               | Current destination.                    |
| `getStuckFunds()`                       | —                                 | `Promise<DetectedDeposit[]>`         | All non-zero balances (no threshold).   |
| `recoverAllFunds()`                     | —                                 | `Promise<RecoveryResult[]>`          | Sweep all stuck funds.                  |
| `refund(id, reason?)`                   | `string, RefundReason?`           | `Promise<RefundResult>`              | Refund specific deposit.                |
| `refundAll(reason?)`                    | `RefundReason?`                   | `Promise<RefundResult[]>`            | Refund all pending.                     |
| `canRefund(id)`                         | `string`                          | `Promise<{ eligible, reason? }>`     | Check refund eligibility.               |
| `getRefundConfig()`                     | —                                 | `RefundConfig`                       | Current refund config.                  |
| `getTransactions(page, pageSize)`       | `number, number`                  | `Promise<TransactionsResponse>`      | Page-based transaction history.         |
| `getTokenTransactions(filter, cursor?)` | `TokenTransactionFilter, string?` | `Promise<TokenTransactionsResponse>` | Cursor-based filtered transactions.     |
| `getTransaction(id)`                    | `string`                          | `Promise<UATransaction>`             | Single transaction lookup.              |

***

## Transaction History

Query the Universal Account's transaction history. Results are cached (30s TTL, LRU) to avoid redundant API calls when paginating.

### Page-Based Pagination

```typescript theme={null}
const { transactions, page, pageSize } = await client.getTransactions(1, 10);

for (const tx of transactions) {
  console.log(tx.transactionId, tx.targetToken.symbol, tx.change.amountInUSD);
}

// Next page
const page2 = await client.getTransactions(2, 10);
```

### Filter by Token and Chain (Cursor-Based)

```typescript theme={null}
import { CHAIN } from '@particle-network/universal-deposit';

// Get USDC transactions on Ethereum
const result = await client.getTokenTransactions({
  chainId: CHAIN.ETHEREUM,
  address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC contract
});

// Paginate with cursor
if (result.nextPageToken) {
  const nextPage = await client.getTokenTransactions(
    { chainId: CHAIN.ETHEREUM, address: '0xA0b8...' },
    result.nextPageToken,
  );
}
```

### Single Transaction Lookup

```typescript theme={null}
const tx = await client.getTransaction('tx_abc123');
console.log(tx.status, tx.change.amount, tx.fromChains, tx.toChains);
```

***

## Events

Subscribe to events using `on` / `off`:

```typescript theme={null}
client.on('deposit:detected', (deposit: DetectedDeposit) => {
  console.log(`New deposit: ${deposit.token} on chain ${deposit.chainId}`);
});

client.on('deposit:complete', (result: SweepResult) => {
  console.log(`Sweep complete: ${result.explorerUrl}`);
});

// Remove a specific listener
client.off('deposit:detected', handler);
```

### Event Reference

| Event                | Payload                             | Description             |
| -------------------- | ----------------------------------- | ----------------------- |
| `deposit:detected`   | `DetectedDeposit`                   | New deposit found.      |
| `deposit:processing` | `DetectedDeposit`                   | Sweep started.          |
| `deposit:complete`   | `SweepResult`                       | Sweep succeeded.        |
| `deposit:error`      | `Error, DetectedDeposit?`           | Sweep failed.           |
| `recovery:started`   | —                                   | Recovery started.       |
| `recovery:complete`  | `RecoveryResult[]`                  | Recovery finished.      |
| `recovery:failed`    | `DetectedDeposit, Error`            | Single recovery failed. |
| `refund:started`     | `DetectedDeposit, RefundReason`     | Refund initiated.       |
| `refund:processing`  | `DetectedDeposit, attempt`          | Refund attempt.         |
| `refund:complete`    | `RefundResult`                      | Refund succeeded.       |
| `refund:failed`      | `DetectedDeposit, Error, exhausted` | Refund failed.          |
| `status:change`      | `ClientStatus`                      | Status changed.         |

***

## Next Steps

<CardGroup>
  <Card title="React SDK" icon="react" href="/universal-accounts/ua-reference/universal-deposit/react-sdk">
    DepositProvider, hooks, and UI components.
  </Card>

  <Card title="Reference" icon="book" href="/universal-accounts/ua-reference/universal-deposit/reference">
    Types, constants, and advanced topics.
  </Card>
</CardGroup>


# Universal Deposit SDK
Source: https://developers.particle.network/universal-accounts/ua-reference/universal-deposit/overview

Accept deposits from any chain. Funds are automatically detected and bridged to your desired destination.

The **Universal Deposit SDK** (`@particle-network/universal-deposit`) lets your app accept deposits from any chain. It gives your users deposit addresses for every chain supported by Universal Accounts, with funds automatically detected and bridged to your configured destination chain in **USDC**.

<Card title="Learn More About Universal Accounts" icon="user" href="/intro/universal-accounts">
  Universal Deposit leverages Universal Accounts. Learn what they are and how they work.
</Card>

<Note>
  Universal Deposit uses **USDC** as the bridged asset. All deposits are automatically converted to USDC and sent to your configured destination chain.
</Note>

<Warning>
  Due to the architecture of Universal Deposit, it is not compatible with Particle **Connectkit** or **Authkit**.
</Warning>

## Try Live Demo

You can try the Universal Deposit SDK in action by visiting the [Universal Deposit Demo](https://universal-deposit.vercel.app/).

<Card title="Try Live Demo" icon="play" href="https://universal-deposit.vercel.app/">
  Try the Universal Deposit SDK in action.
</Card>

## Widget UI overview

The Universal Deposit SDK provides a modal UI that allows users to deposit funds from any chain to your configured destination chain.

<Frame>
  <img alt="Universal Deposit Widget UI" />

  <img alt="Universal Deposit Widget UI" />
</Frame>

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @particle-network/universal-deposit
  ```

  ```bash yarn theme={null}
  yarn add @particle-network/universal-deposit
  ```
</CodeGroup>

## Quick Start

### 1. Import styles

The React components (`DepositWidget`, `DepositModal`, `RecoveryWidget`, `RecoveryModal`) use Tailwind utility classes. The SDK ships a pre-built CSS file that you must import in your app:

```css theme={null}
/* In your global CSS file */
@import "@particle-network/universal-deposit/styles.css";
```

Or in a JS/TS entry point:

```ts theme={null}
import '@particle-network/universal-deposit/styles.css';
```

> **Tailwind v4 users:** If you prefer to avoid duplicate utility CSS, you can skip the import above and add an `@source` directive in your CSS instead:
>
> ```css theme={null}
> @source "../node_modules/@particle-network/universal-deposit/dist/**/*.mjs";
> ```

### 2. Setup — Wrap your app with `DepositProvider`

```tsx theme={null}
import { DepositProvider, CHAIN } from '@particle-network/universal-deposit/react';

function App() {
  return (
    <YourAuthProvider>
      <DepositProvider config={{
        destination: { chainId: CHAIN.POLYGON },
        autoSweep: true,
        minValueUSD: 1,
      }}>
        <YourApp />
      </DepositProvider>
    </YourAuthProvider>
  );
}
```

### 3. Modal — Open a deposit dialog

```tsx theme={null}
import { useDeposit, DepositModal } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const [open, setOpen] = useState(false);
  const { isReady } = useDeposit({ ownerAddress: address });

  return (
    <>
      <button onClick={() => setOpen(true)} disabled={!isReady}>
        Deposit
      </button>
      <DepositModal isOpen={open} onClose={() => setOpen(false)} />
    </>
  );
}
```

<Note>
  The user address above is only used as reference for the deposit account generation, the SDK is fully wallet-agnostic.
</Note>

### 4. Inline Widget — Embed the deposit UI

```tsx theme={null}
import { useDeposit, DepositWidget } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const { isReady } = useDeposit({ ownerAddress: address });

  if (!isReady) return <Loading />;
  return <DepositWidget fullWidth />;
}
```

### 5. Headless — Build your own UI

```tsx theme={null}
import { useDeposit, getChainName } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const {
    isReady, depositAddresses, pendingDeposits,
    recentActivity, status, sweep, currentDestination,
  } = useDeposit({ ownerAddress: address });

  if (!isReady) return <Loading />;

  return (
    <div>
      <p>EVM: {depositAddresses?.evm}</p>
      <p>Solana: {depositAddresses?.solana}</p>
      <p>Status: {status}</p>
      <p>Destination: {getChainName(currentDestination?.chainId)}</p>

      {pendingDeposits.map(d => (
        <div key={d.id}>
          {d.token} — ${d.amountUSD.toFixed(2)}
          <button onClick={() => sweep(d.id)}>Sweep</button>
        </div>
      ))}
    </div>
  );
}
```

## Next Steps

<CardGroup>
  <Card title="React SDK" icon="react" href="/universal-accounts/ua-reference/universal-deposit/react-sdk">
    DepositProvider, hooks, and UI components.
  </Card>

  <Card title="Core SDK" icon="code" href="/universal-accounts/ua-reference/universal-deposit/core-sdk">
    Headless DepositClient for non-React apps.
  </Card>

  <Card title="Reference" icon="book" href="/universal-accounts/ua-reference/universal-deposit/reference">
    Types, constants, chain utilities, and advanced topics.
  </Card>
</CardGroup>


# Universal Deposit SDK — React API
Source: https://developers.particle.network/universal-accounts/ua-reference/universal-deposit/react-sdk

React API reference for the Universal Deposit SDK: DepositProvider, hooks, and UI components.

## DepositProvider

Wraps your app and manages the deposit lifecycle. Handles Auth Core context internally.

```tsx theme={null}
import { DepositProvider, CHAIN } from '@particle-network/universal-deposit/react';

<DepositProvider config={{
  destination: { chainId: CHAIN.POLYGON },
  autoSweep: true,
  minValueUSD: 1,
}}>
  <App />
</DepositProvider>
```

### Config

| Property              | Type           | Default              | Description                                             |
| --------------------- | -------------- | -------------------- | ------------------------------------------------------- |
| `destination.chainId` | `number`       | —                    | **Required.** Destination chain (use `CHAIN` constant). |
| `destination.address` | `string`       | Owner's EOA          | Custom sweep destination address.                       |
| `supportedTokens`     | `TokenType[]`  | All                  | Tokens to watch.                                        |
| `supportedChains`     | `number[]`     | All 17 chains        | Chains to watch.                                        |
| `autoSweep`           | `boolean`      | `true`               | Auto-sweep detected deposits.                           |
| `minValueUSD`         | `number`       | `0.50`               | Minimum USD value to trigger sweep.                     |
| `pollingIntervalMs`   | `number`       | `3000`               | Balance check interval (ms).                            |
| `refund`              | `RefundConfig` | `{ enabled: false }` | Auto-refund config (experimental).                      |
| `uaProjectId`         | `string`       | SDK default          | Particle project ID for UA operations only.             |

***

## useDeposit

Primary hook. Pass `ownerAddress` to trigger auto-connection and start watching for deposits.

```tsx theme={null}
import { useDeposit } from '@particle-network/universal-deposit/react';

const {
  isReady, depositAddresses, pendingDeposits,
  sweep, status, currentDestination,
} = useDeposit({ ownerAddress: '0x...' });
```

### Options

| Property       | Type                  | Description                                        |
| -------------- | --------------------- | -------------------------------------------------- |
| `ownerAddress` | `string \| undefined` | User's wallet address. Pass to trigger connection. |

### Return Value

| Property             | Type                                           | Description                       |
| -------------------- | ---------------------------------------------- | --------------------------------- |
| `isConnecting`       | `boolean`                                      | SDK is initializing.              |
| `isConnected`        | `boolean`                                      | Auth Core connected.              |
| `isReady`            | `boolean`                                      | Client ready for operations.      |
| `error`              | `Error \| null`                                | Last error.                       |
| `disconnect`         | `() => Promise<void>`                          | Disconnect and cleanup.           |
| `status`             | `ClientStatus`                                 | Current client status.            |
| `depositAddresses`   | `DepositAddresses \| null`                     | EVM and Solana deposit addresses. |
| `pendingDeposits`    | `DetectedDeposit[]`                            | Detected but unsent deposits.     |
| `recentActivity`     | `ActivityItem[]`                               | Activity history.                 |
| `sweep`              | `(id?: string) => Promise<SweepResult[]>`      | Trigger sweep (all or by ID).     |
| `setDestination`     | `(dest: DestinationConfig) => void`            | Change destination at runtime.    |
| `currentDestination` | `{ address: string; chainId: number } \| null` | Current destination.              |

***

## useDepositContext

Access the full context including recovery and refund methods. Returns everything from `useDeposit` plus:

```tsx theme={null}
import { useDepositContext } from '@particle-network/universal-deposit/react';

const { client, stuckFunds, recoverFunds, refundDeposit } = useDepositContext();
```

### Extended Properties

| Property                         | Type                                                              | Description                 |
| -------------------------------- | ----------------------------------------------------------------- | --------------------------- |
| `client`                         | `DepositClient \| null`                                           | Underlying client instance. |
| `ownerAddress`                   | `string \| null`                                                  | User's wallet.              |
| `intermediaryAddress`            | `string \| null`                                                  | JWT wallet.                 |
| `connect`                        | `(address: string) => Promise<void>`                              | Manual connect.             |
| `startWatching` / `stopWatching` | `() => void`                                                      | Control balance polling.    |
| `stuckFunds`                     | `DetectedDeposit[]`                                               | Stuck funds list.           |
| `isRecovering`                   | `boolean`                                                         | Recovery in progress.       |
| `getStuckFunds`                  | `() => Promise<DetectedDeposit[]>`                                | Refresh stuck funds.        |
| `recoverFunds`                   | `() => Promise<RecoveryResult[]>`                                 | Recover all funds.          |
| `isRefunding`                    | `boolean`                                                         | Refund in progress.         |
| `refundDeposit`                  | `(id: string) => Promise<RefundResult>`                           | Refund specific deposit.    |
| `refundAll`                      | `() => Promise<RefundResult[]>`                                   | Refund all pending.         |
| `canRefund`                      | `(id: string) => Promise<{ eligible: boolean; reason?: string }>` | Check eligibility.          |
| `refundConfig`                   | `RefundConfig`                                                    | Current refund config.      |

***

## Components

### DepositWidget

Inline deposit UI with token selection, QR code, and activity feed.

```tsx theme={null}
import { DepositWidget } from '@particle-network/universal-deposit/react';

<DepositWidget fullWidth theme="dark" />
```

| Prop                  | Type                | Default         | Description                                |
| --------------------- | ------------------- | --------------- | ------------------------------------------ |
| `client`              | `DepositClient`     | Context         | Optional client (uses context if omitted). |
| `theme`               | `'dark' \| 'light'` | `'dark'`        | Color theme.                               |
| `destination`         | `DestinationConfig` | Provider config | Override destination.                      |
| `onDestinationChange` | `(dest) => void`    | —               | Destination change callback.               |
| `showDestination`     | `boolean`           | `true`          | Show destination section.                  |
| `fullWidth`           | `boolean`           | `false`         | Expand to container (default: 380px).      |
| `showHeader`          | `boolean`           | `true`          | Show header with title.                    |
| `className`           | `string`            | —               | Custom CSS class.                          |
| `onClose`             | `() => void`        | —               | Close handler.                             |

### DepositModal

Modal wrapper around `DepositWidget`. Accepts all `DepositWidget` props plus:

```tsx theme={null}
import { DepositModal } from '@particle-network/universal-deposit/react';

<DepositModal isOpen={open} onClose={() => setOpen(false)} />
```

| Prop               | Type         | Description               |
| ------------------ | ------------ | ------------------------- |
| `isOpen`           | `boolean`    | Modal visibility.         |
| `onClose`          | `() => void` | Close handler (required). |
| `overlayClassName` | `string`     | Custom overlay CSS class. |

### RecoveryWidget

UI for scanning and recovering stuck funds.

```tsx theme={null}
import { RecoveryWidget } from '@particle-network/universal-deposit/react';

<RecoveryWidget autoScan theme="dark" />
```

| Prop               | Type                    | Default     | Description                 |
| ------------------ | ----------------------- | ----------- | --------------------------- |
| `client`           | `DepositClient`         | Context     | Optional client.            |
| `theme`            | `'dark' \| 'light'`     | `'dark'`    | Color theme.                |
| `autoScan`         | `boolean`               | `true`      | Auto-scan on mount.         |
| `showModeSelector` | `boolean`               | `true`      | Show recover/refund toggle. |
| `defaultMode`      | `'recover' \| 'refund'` | `'recover'` | Initial mode.               |
| `className`        | `string`                | —           | Custom CSS class.           |
| `onClose`          | `() => void`            | —           | Close handler.              |

### RecoveryModal

Modal wrapper around `RecoveryWidget`. Accepts all `RecoveryWidget` props plus:

```tsx theme={null}
import { RecoveryModal } from '@particle-network/universal-deposit/react';

<RecoveryModal isOpen={open} onClose={() => setOpen(false)} />
```

| Prop               | Type         | Description               |
| ------------------ | ------------ | ------------------------- |
| `isOpen`           | `boolean`    | Modal visibility.         |
| `onClose`          | `() => void` | Close handler (required). |
| `overlayClassName` | `string`     | Custom overlay CSS class. |

***

## Next Steps

<CardGroup>
  <Card title="Core SDK" icon="code" href="/universal-accounts/ua-reference/universal-deposit/core-sdk">
    Headless DepositClient for non-React apps.
  </Card>

  <Card title="Reference" icon="book" href="/universal-accounts/ua-reference/universal-deposit/reference">
    Types, constants, and advanced topics.
  </Card>
</CardGroup>


# Universal Deposit SDK — Reference
Source: https://developers.particle.network/universal-accounts/ua-reference/universal-deposit/reference

Type definitions, constants, chain utilities, and advanced configuration for the Universal Deposit SDK.

## Types

### DestinationConfig

```typescript theme={null}
interface DestinationConfig {
  address?: string;   // Defaults to ownerAddress
  chainId: number;    // Required — use CHAIN constant
}
```

### DetectedDeposit

```typescript theme={null}
interface DetectedDeposit {
  id: string;
  token: TokenType;
  chainId: number;
  amount: string;
  amountUSD: number;
  rawAmount: bigint;
  detectedAt: number;
}
```

### SweepResult

```typescript theme={null}
interface SweepResult {
  depositId: string;
  transactionId: string;
  explorerUrl: string;
  status: 'success' | 'failed' | 'pending';
  error?: string;
}
```

### RecoveryResult

```typescript theme={null}
interface RecoveryResult {
  token: TokenType;
  chainId: number;
  amount: string;
  amountUSD: number;
  status: 'success' | 'failed' | 'skipped';
  error?: string;
  txHash?: string;
}
```

### RefundResult

```typescript theme={null}
interface RefundResult {
  depositId: string;
  token: TokenType;
  sourceChainId: number;
  amount: string;
  amountUSD: number;
  status: 'pending' | 'processing' | 'success' | 'failed' | 'skipped';
  reason: RefundReason;
  txHash?: string;
  error?: string;
  refundedTo?: string;
  refundedToSender?: boolean;
}
```

### UATransaction

```typescript theme={null}
interface UATransaction {
  transactionId: string;
  tag: string;
  createdAt: string;
  updatedAt: string;
  targetToken: {
    name: string;
    type: string;
    image: string;
    price: number;
    symbol: string;
    address: string;
    assetId: string;
    chainId: number;
    decimals: number;
    realDecimals: number;
    isPrimaryToken: boolean;
    isSmartRouterSupported: boolean;
  };
  change: {
    amount: string;
    amountInUSD: string;
    from: string;
    to: string;
  };
  detail: {
    redPacketCount: number;
  };
  status: number;
  fromChains: number[];
  toChains: number[];
}
```

### TransactionsResponse

```typescript theme={null}
interface TransactionsResponse {
  transactions: UATransaction[];
  page: number;
  pageSize: number;
}
```

### TokenTransactionFilter

```typescript theme={null}
interface TokenTransactionFilter {
  chainId: number;   // Chain ID to filter by
  address: string;   // Token contract address
}
```

### TokenTransactionsResponse

```typescript theme={null}
interface TokenTransactionsResponse {
  transactions: UATransaction[];
  nextPageToken?: string;  // Cursor for next page (undefined = no more pages)
}
```

### Other Types

```typescript theme={null}
type TokenType = 'ETH' | 'USDC' | 'USDT' | 'BTC' | 'SOL' | 'BNB';

type ClientStatus =
  | 'idle'
  | 'initializing'
  | 'ready'
  | 'watching'
  | 'sweeping'
  | 'error';

type RefundReason =
  | 'sweep_failed'
  | 'user_requested'
  | 'address_type_mismatch'
  | 'below_minimum';

interface DepositAddresses {
  evm: string;
  solana: string;
}
```

***

## Constants

### CHAIN

```typescript theme={null}
import { CHAIN } from '@particle-network/universal-deposit';

CHAIN.ETHEREUM    // 1
CHAIN.OPTIMISM    // 10
CHAIN.BNB         // 56
CHAIN.POLYGON     // 137
CHAIN.MONAD       // 143
CHAIN.SONIC       // 146
CHAIN.XLAYER      // 196
CHAIN.HYPERVM     // 999
CHAIN.MERLIN      // 4200
CHAIN.MANTLE      // 5000
CHAIN.BASE        // 8453
CHAIN.ARBITRUM    // 42161
CHAIN.AVALANCHE   // 43114
CHAIN.LINEA       // 59144
CHAIN.PLASMA      // 9745
CHAIN.BERACHAIN   // 80094
CHAIN.SOLANA      // 101
```

### Defaults

```typescript theme={null}
import {
  DEFAULT_SUPPORTED_TOKENS,      // ['ETH', 'USDC', 'USDT', 'BTC', 'SOL', 'BNB']
  DEFAULT_MIN_VALUE_USD,          // 0.50
  DEFAULT_POLLING_INTERVAL_MS,    // 3000
} from '@particle-network/universal-deposit';
```

### Chain Utilities

```typescript theme={null}
import {
  getChainName,              // getChainName(42161) → "Arbitrum"
  isValidDestinationChain,   // isValidDestinationChain(42161) → true
  getAddressType,            // getAddressType(101) → 'solana'
  isValidEvmAddress,         // Validates 0x + 40 hex chars
  isValidSolanaAddress,      // Validates base58 format
  validateAddressForChain,   // Validates address format for chain type
} from '@particle-network/universal-deposit';
```

***

## Advanced Topics

### Custom Particle Credentials

You can provide your own Particle project ID via the `uaProjectId` config option.

<Warning>
  `uaProjectId` only affects Universal Account operations (smart account initialization and asset queries). The intermediary wallet authentication (JWT + Auth Core session) always uses the SDK's built-in credentials — this is by design and cannot be overridden.
</Warning>

<Info>
  This is useful if you want to handle your own app fees. If you use your own project ID, deposits are subject to a 1% fee going to Particle. Reach out to configure a custom rate and establish a revenue sharing model.
</Info>

<Tip>
  Contact: [Particle Developer Support](https://t.me/particle_developer_bot)
</Tip>

<CodeGroup>
  ```tsx React theme={null}
  <DepositProvider config={{
    destination: { chainId: CHAIN.BASE },
    uaProjectId: 'your-project-id',
  }}>
    <App />
  </DepositProvider>
  ```

  ```typescript Headless theme={null}
  const client = new DepositClient({
    ownerAddress: '0x...',
    intermediaryAddress: '0x...',
    destination: { chainId: CHAIN.BASE },
    uaProjectId: 'your-project-id',
  });
  ```
</CodeGroup>

### Destination Configuration

Change the sweep destination at runtime.

<CodeGroup>
  ```tsx React theme={null}
  const { setDestination, currentDestination } = useDepositContext();

  setDestination({ chainId: CHAIN.ETHEREUM });
  ```

  ```typescript Headless theme={null}
  client.setDestination({ chainId: CHAIN.BASE, address: '0xTreasury...' });
  const dest = client.getDestination(); // { address, chainId }
  ```
</CodeGroup>

<Note>
  Throws `ConfigurationError` if the chain ID or address is invalid.
</Note>

### Recovery

Recover funds that are stuck in the intermediary wallet (e.g., due to failed sweeps).

```tsx theme={null}
const { stuckFunds, recoverFunds, isRecovering } = useDepositContext();
```

Or use the built-in UI:

```tsx theme={null}
<RecoveryModal isOpen={open} onClose={() => setOpen(false)} />
```

### Refund (Experimental)

<Warning>
  Refund is **experimental**. Auto-refund is disabled by default.
</Warning>

Enable auto-refund to automatically return funds to the source chain when sweeps fail:

```tsx theme={null}
<DepositProvider config={{
  destination: { chainId: CHAIN.BASE },
  refund: {
    enabled: true,
    delayMs: 5000,
    maxAttempts: 2,
    refundToSender: true,
  },
}}>
  <App />
</DepositProvider>
```

#### RefundConfig

| Property         | Type      | Default | Description                              |
| ---------------- | --------- | ------- | ---------------------------------------- |
| `enabled`        | `boolean` | `false` | Enable auto-refund.                      |
| `delayMs`        | `number`  | `5000`  | Delay before refund attempt.             |
| `maxAttempts`    | `number`  | `2`     | Max refund attempts.                     |
| `refundToSender` | `boolean` | `true`  | Refund to original sender if detectable. |

Manual refund is always available regardless of the auto-refund setting:

```typescript theme={null}
const result = await client.refund('deposit-id', 'user_requested');
const { eligible, reason } = await client.canRefund('deposit-id');
```

### Error Handling

All SDK errors extend `DepositSDKError`:

```typescript theme={null}
import {
  DepositSDKError,       // Base class
  ConfigurationError,    // Invalid config
  AuthenticationError,   // Auth failed
  JwtError,              // JWT service error
  UniversalAccountError, // UA operations failed
  SweepError,            // Sweep failed
  RefundError,           // Refund failed
  NetworkError,          // Network issues
} from '@particle-network/universal-deposit';
```

```typescript theme={null}
try {
  await client.initialize();
} catch (error) {
  if (error instanceof ConfigurationError) {
    // Invalid config — check destination chain ID and address
  }
  if (error instanceof JwtError) {
    // JWT service unreachable
  }
  if (error instanceof UniversalAccountError) {
    // UA initialization failed
  }
}
```

***

<CardGroup>
  <Card title="Back to Overview" icon="arrow-left" href="/universal-accounts/ua-reference/universal-deposit/overview">
    Installation, quickstart, and usage patterns.
  </Card>
</CardGroup>


# Web (JavaScript/TypeScript) - Wallet
Source: https://developers.particle.network/wallet/desktop/web

Using Particle Wallet within a web application.

## Particle Wallet for Web

Particle Wallet is a customizable embedded interface allowing users to interact with EOAs (Externally Owned Accounts) or smart accounts natively within a React or Vue application. Native to Particle Network's Smart Wallet-as-a-Service and BTC Connect SDKs, Particle Wallet acts as the central mechanism driving UI-based wallet interaction within Particle Network's tech stack. Particle Wallet can wrap accounts from any existing wallet, or from various smart account instances.

For web applications leveraging Particle Auth, Particle Connect, or BTC Connect, Particle Wallet is automatically included and will be used as the default embedded wallet interface. Otherwise, for isolated usage of Particle Wallet, `@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.

<Tip>
  <p>Demo</p>

  <p />

  <p>To view a demo application implementing `@particle-network/wallet` within a basic React template (alongside `@particle-network/auth-core`), take a look at the <a href="https://github.com/TABASCOatw/particle-auth-core-low/tree/main">low-level Auth Core example repository</a>.</p>
</Tip>

***

## Getting Started

`@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:

<iframe href="https://particle-docs-demo.replit.app/" />

<Tip>
  <p>Alternative Entry</p>

  <p />

  <p>Notably, Particle Wallet can also be used directly through its web implementation: <a href="https://wallet.particle.network">[https://wallet.particle.network](https://wallet.particle.network)</a>.</p>

  <p />

  <p>This interface is customizable through path parameters. Styling changes can be previewed <a href="https://wallet.particle.network/?customStyleSetting=true">here</a>.</p>
</Tip>

## Installation

Implementing an instance of Particle Wallet within your application through `@particle-network/wallet` will primarily involve the following steps:

* Installing the library.
* Configuration and initialization.
* Wallet target definition (setting the associated provider).
* Enabling the wallet entry modal (the button in the top corner of your dApp's UI).

To start, we'll need to install `@particle-network/wallet`, as shown in the example below:

```shell Terminal theme={null}
yarn add @particle-network/wallet

# OR

npm install @particle-network/wallet
```

## Setting up the Particle dashboard

Initializing Particle Wallet will require three key values, these will be your `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](https://particle-docs-demo.replit.app/).

<Note>Find a full rundown of the process in the [dashboard guide](/social-logins/dashboard).</Note>

## Initialization

Once `@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](https://particle-docs-demo.replit.app/).
* Optionally, `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.
* Optionally, `visible`, which takes a Boolean indicating whether or not the wallet entry modal is shown.
* Optionally, `preload`, a Boolean determining if the wallet should be preloaded upon application entry.
* Optionally, `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.
* Optionally, `themeType`, which should be either `'light'` or `'dark'` indicating the color theme of the wallet modal.
* Optionally, `language`, a string specifying an alternative language for the modal (English being the default).
* Optionally, `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'`.
* Optionally, `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](/social-logins/configuration/appearance/wallet).

An example of initializing `walletEntryPlugin` has been included below.

```typescript TypeScript theme={null}
import { walletEntryPlugin, EntryPosition} from '@particle-network/wallet'

walletEntryPlugin.init({
    projectId: process.env.REACT_APP_PROJECT_ID!,
    clientKey: process.env.REACT_APP_CLIENT_KEY!,
    appId: process.env.REACT_APP_APP_ID!,
  }, {
    erc4337: { // Optional
      name: "SIMPLE", // SIMPLE, LIGHT, BICONOMY, or CYBERCONNECT
      version: "1.0.0"
    },
    visible: true, // Optional
    preload: true, // Optional
    entryPosition: EntryPosition.BR, // Optional
    topMenuType: 'close' // Optional
    // And so on.
});
```

## Assigning a provider (account)

To define the account that will be reflected within the embedded wallet interface, you'll need to call `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.

<Note>
  <p>`@particle-network/wallet` is compatible with both EVM-compatible blockchains and Solana.</p>

  <p />

  <p>Throughout this document, `provider` refers to either an EIP-1193 provider object for EVM-compatible chains, or a Solana provider object.</p>
</Note>

Thus, to define the provider you'll be using, and therefore the account reflected within the modal, you'll need to call `walletEntryPlugin.setWalletCore` with the following parameters:

* Either:
  * `ethereum`, a standard Ethereum provider object (such as an `IEthereumProvider` interface, or `window.ethereum`).
  * `solana`, a Solana provider object (such as `window.phantom.solana`).

E.g.:

```typescript TypeScript theme={null}
// Ethereum
walletEntryPlugin.setWalletCore({
      ethereum: window.ethereum, // Any EIP-1193 provider
});

// Solana
walletEntryPlugin.setWalletCore({
      ethereum: window.phantom.solana, // Any EIP-1193 provider
});
```

## Opening the wallet modal

At this point, you should have a configured and initialized instance of `walletEntryPlugin` with a provider (account) assigned. To open the embedded wallet modal (or initiate the wallet entry modal), you have 3 options:

1. `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`.
2. `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](/social-logins/configuration/appearance/wallet).
3. Finally, \``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:

```typescript TypeScript theme={null}
// After setWalletCore is called....

// Wallet entry modal (button on top of your UI)
walletEntryPlugin.walletEntryCreate();
walletEntryPlugin.walletEntryDestroy();

// Open the wallet directly (ideally assigned to a button or event)
walletEntryPlugin.openWallet({
  windowSize: 'large', // Optional
  topMenuType: 'close' // Optional
  // And so on.
});

// Retrieve the wallet URL (often used within an iframe)
walletEntryPlugin.getWalletUrl(WalletConfig);
const iframe = document.createElement("iframe");
iframe.src = url;
```

***

# Master reference

For a direct, raw view into every method provided through `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                                                                                                                                         |
|                   |                    |                                                                                                                                             |


# Particle Wallet FAQ
Source: https://developers.particle.network/wallet/faq

Find Frequently Asked Questions about Particle Wallet.

<AccordionGroup>
  <Accordion title="How can I track my tokens in the embedded wallet?" icon="wallet">
    **Answer:**

    You can use the fields in the `wallet` property within the Particle Auth or Particle Connect configuration object to track tokens in the embedded wallet. Specifically, the `customStyle` object provides two properties for managing token tracking:

    1. **`displayTokenAddresses`**: This property allows you to specify which token addresses should be tracked in the wallet interface.

    2. **`priorityTokenAddresses`**: This property enables you to define priorities when displaying tokens.

    ```tsx Connectkit.tsx theme={null}
        wallet({
          customStyle: {
            displayTokenAddresses: ["0x4d224452801ACEd8B2F0aebE155379bb5D594381"],
            priorityTokenAddresses: ["0x4d224452801ACEd8B2F0aebE155379bb5D594381"],
          },
        }),
    ```

    If the icon is undetected, our team must manually add it. Please [contact us](https://t.me/particle_developer_bot) to update it.
  </Accordion>

  <Accordion title="How can I configure the name and icon of the embedded wallet?" icon="image">
    **Answer:** To customize the name and icon of your embedded wallet, please provide us with the desired name and icon. Our team will manually configure these details to reflect your preferences within the wallet interface.
  </Accordion>

  <Accordion title="Why are the transaction records in the wallet incomplete?" icon="list">
    **Answer:** Incomplete transaction records in the wallet may occur due to the large number of supported chains, particularly on testnets where detailed transaction histories are not always available. For mainnets, we strive to ensure comprehensive support. If you notice any gaps in transaction records for a particular chain, please reach out to us, and we will assess the possibility of enhancing support for that chain.
  </Accordion>

  <Accordion title="Why is the token balance in the wallet not synchronized?" icon="rotate">
    **Answer:** Token balance synchronization issues may arise due to indexing delays. If you experience a significant delay in updating token balances, please contact us, and we will investigate the issue to ensure accurate and timely synchronization of your wallet balances.
  </Accordion>
</AccordionGroup>


# Introduction to Particle Wallet
Source: https://developers.particle.network/wallet/introduction

Particle Wallet is a unified interface for interacting with accounts from various origins (Particle Auth, external wallets, etc.)

<Frame>
  <img alt="Particle Wallet in use." />
</Frame>

***

## Unified interaction mechanism for Web2 and Web3 accounts

Particle Wallet is a **universal infrastructure for facilitating account interaction**, originating from both Web2 (through Particle Auth) and Web3 (external wallets, such as MetaMask). This central wallet interface allows for predictable and **unified utilization of accounts**, plugging in directly to Particle Connect and Particle Auth to create a **cohesive tech stack for social login, external wallet connection, and account utilization**.

Particle Wallet can directly be integrated into existing applications leveraging Particle Auth or Particle Connect to streamline and customize wallet interaction.

***

<CardGroup>
  <Card title="Web" href="/wallet/desktop/web">
    Using Particle Wallet within web applications.
  </Card>

  <Card title="Unity SDK" href="/wallet/mobile/unity">
    Using Particle Wallet within games built on Unity.
  </Card>

  <Card title="Android SDK" href="/wallet/mobile/android">
    Using Particle Wallet within Android applications.
  </Card>

  <Card title="iOS SDK" href="/wallet/mobile/ios">
    Using Particle Wallet within iOS applications.
  </Card>

  <Card title="Flutter SDK" href="/wallet/mobile/flutter">
    Using Particle Wallet within applications built using Flutter.
  </Card>

  <Card title="React Native SDK" href="/wallet/mobile/react">
    Using Particle Wallet within applications built using React Native.
  </Card>
</CardGroup>


# Android (Kotlin/Java) - Wallet
Source: https://developers.particle.network/wallet/mobile/android

Working with Particle Wallet within Android applications.

## Particle Wallet for Android

Particle Wallet is the primary interface outside of integrated applications for utilizing the account generated by Particle Auth or linked using Particle Connect. In short, Particle Wallet, for Android, is a standard wallet UI for sending, swapping, and purchasing cryptocurrency natively with your account (derived from a social login or Web3 wallet linkage). This wallet is highly customizable, meaning you can onboard users and facilitate interaction within your application while providing a shortcut to a customized instance of Particle Wallet.

Details regarding the programmatic usage of Particle Wallet **can be found below**.

***

## Getting Started

Particle Wallet, on mobile, is a complimentary SDK to Particle Connect, enabling the unified utilization of accounts within Particle Connect. To begin working with Particle Wallet on Android, you must go through a quick initial configuration process.

### Prerequisites

Before jumping in, several requirements are needed to avoid compatibility issues. Ensure your project meets or exceeds these minimum prerequisites before continuing.

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version : 8.5.1 or higher.
* Gradle Version : 8.9 or higher.

### Setting up the Particle dashboard

Once your project meets the aforementioned requirements, you'll need to move onto retrieving three key (and universally required across all SDKs) values from the [Particle dashboard](https://dashboard.particle.network).

These are your `projectId`, `clientKey`, and `appId`. During configuration, you'll need these to connect your project with the [Particle dashboard](https://dashboard.particle.network), unlocking customization, analytics, tracking, etc.

<Note>
  Find a full rundown of the process in the [dashboard guide](/social-logins/dashboard).
</Note>

### Configuration

With the dashboard setup, you'll also need to set up your `build.gradle` file to use the necessary dependencies. As mentioned, Particle Wallet is complimentary to Particle Connect, and thus, there are several requirements needed to use the wallet SDK, `network.particle:wallet-service`:

* Modules `org.bouncycastle:bcprov-jdk15to18` and `org.bouncycastle:bcprov-jdk15on`.
* Particle Connect dependencies:
  * `network.particle:auth-core`.
  * `network.particle:connect`.
  * `network.particle:connect-auth-core-adapter`.
  * Other wallet adapters that you plan on using.
* Particle Wallet SDK, `network.particle:wallet-service`.

The latest versions for these SDKs can be found on [Maven](https://search.maven.org/search?q=g:network.particle).

```groovy theme={null}
repositories {
    google()
    mavenCentral()
    maven { setUrl("https://jitpack.io") }
    // ...
}

dependencies {
  //required
   modules {
        module("org.bouncycastle:bcprov-jdk15to18") {
            replacedBy("org.bouncycastle:bcprov-jdk15on")
        }
        module("org.bouncycastle:bcprov-jdk18on") {
            replacedBy("org.bouncycastle:bcprov-jdk15on")
        }
    }

    implementation 'network.particle:connect:{latest-version}'

    implementation 'network.particle:connect-auth-core-adapter:${latest_version}'
 		// Other adapters, such as network.particle:connect-phantom-adapter

    implementation 'network.particle:api-service:${latest_version}'
    implementation 'network.particle:wallet-service:${latest_version}'
    // ...
}
```

## Examples of Utilization

### Initialization

Before you can use the full extent of the Particle Wallet SDK, you'll need to initialize `ParticleWallet` (imported from `com.particle.gui.ParticleWallet`) with `ParticleWallet.init`. Additional methods won't function until this happens. This method, `init`, takes a number of optional parameters:

* `supportChains`, an array of `ChainInfo` objects dictating the chains available within the Particle Wallet interface.
* `setShowTestNetworks`, whether or not test networks (Testnets) should be shown within the chain selection menu on Particle Wallet. This takes one parameter, `true` or `false` (`false` by default).
* `setShowManageWalletSetting`, whether or not the "Manage Wallet" button within the Particle Wallet interface is shown. This takes one parameter, `true` or `false` (`true` by default).
* `hideMainBackIcon`, removes the "Back" icon on the main wallet page.
* `setShowAppearanceSetting`, if the appearance (dark/light mode) setting is shown and available to the user. It takes one parameter, `true` or `false` (`true` by default).
* `setSupportDappBrowser`, whether or not the dApp browser is available within the wallet interface (custom browser instance using the account as a connection mechanism with dApps). It takes one parameter, `true` or `false` (`true` by default).
* `setWalletIcon`, the icon/logo shown within the wallet interface. It takes one parameter, a string representing an icon URL.

E.g.:

```kotlin Kotlin theme={null}
ParticleWallet.init(
    context,
    supportChains,
).apply {
  setShowTestNetworkSetting(true) // Default is false
  setShowManageWalletSetting(true) // Default is true
  hideMainBackIcon() // Hide the back icon in the main page
  setShowAppearanceSetting(true) // Default is true
  setShowLanguageSetting(true) // Default is true
  setSupportDappBrowser(true) // Default is true
  setWalletIcon("https://xxx.xxx/xxx.png") // Set the wallet icon
}
```

### Custom Wallet UI

Once initialization is complete, you can apply additional customizations and configurations to Particle Wallet.

The first of these is the ability to apply initialization configurations (such as `setShowTestNetworkSetting`) after initial configuration through methods such as `ParticleWallet.showTestNetworks()`, `ParticleWallet.hideManageWallet()`, and so on.

Additionally, if you'd like to use a custom wallet within the Particle Wallet interface (for example, a wallet name, network, etc., specific to your project), then you'll need to use `WalletInfo.createWallet` to create a custom wallet object. This takes the following parameters:

| Field       | Type   | Description                                                                                         |
| :---------- | :----- | :-------------------------------------------------------------------------------------------------- |
| address     | String | The user's public address belonging to the current active session (connected via Particle Connect). |
| chainName   | String | The name of the chain to be used within Particle Wallet.                                            |
| chainId     | Long   | The ID of the chain to be used within Particle Wallet                                               |
| walletName  | String | The name of your wallet/project to be shown in UI.                                                  |
| adapterName | String | The name of the wallet adapter you're using (such as `MobileWCWalletName.AuthCore.name`).           |

Saving this as an object, you can pass it into `ParticleWallet.setWallet`, changing the active interface/wallet according to the parameters outlined within `WalletInfo.createWallet`. E.g.:

```kotlin Kotlin theme={null}
// Post-initialization configuration
ParticleWallet.showTestNetworks()
ParticleWallet.hideManageWallet()

// Custom wallet configuration
val yourWalletName = "Your Wallet"
val wallet = WalletInfo.createWallet(
  ParticleNetwork.getAddress(),
  ParticleNetwork.chainInfo.name,
  ParticleNetwork.chainInfo.id,
  1,
  yourWalletName,
  MobileWCWalletName.Particle.name
)

ParticleWallet.setWallet(wallet)


// If you'd like, you can set your custom localizable string
// Overlay strings.xml
YourProject/app/src/main/res/
  values/strings.xml
  values-ja-rJP/strings.xml
  values-ko-rKR/strings.xml
  values-zh-rCN/strings.xml
  values-zh-rHK/strings.xml
  values-zh-rTW/strings.xml

// Reassign a value
<string name="pn_network_fee">new NetworkFee</string>
<string name="pn_particle_auth_wallet">New Wallet</string>
```

### Set Wallet

Before open a wallet, you need to set up a wallet, When you log in using [connect](/social-logins/connect/mobile/android/), a wallet information will be returned. You can directly use the SDK method to set it

```kotlin kotlin theme={null}
        adapter.connect(null, object : ConnectCallback {
            override fun onConnected(account: Account) {
                lifecycleScope.launch {
                    ParticleWallet.setWallet(account.publicAddress, adapter)
                    PNRouter.build(RouterPath.Wallet).navigation()
                }
            }
            override fun onError(error: ConnectError) {}
        })
```

### Open Wallet

`PNRouter`, imported from `com.particle.gui.router.PNRouter`, can be used to programmatically open different components of Particle Wallet. To open the main wallet interface (the page displaying address, balance, tokens, and buttons leading to other pages), you'll need to call `PNRouter.build`, passing in `RouterPath.Wallet` (in which `RouterPath` is imported from `com.particle.gui.router.RouterPath` and dictates the page, or path, to be opened), then calling `navigation`. E.g.:

```kotlin Kotlin theme={null}
PNRouter.build(RouterPath.Wallet).navigation()
```

### Open Send Token

To open the page coordinating sending a token (**token referring to either native tokens or ERC20/SPL tokens**), you can call `PNRouter.build`, passing in `RouterPath.TokenSend`. If you're sending an ERC20/SPL token, you'll need to fill in `params`- a `WalletSendParams` object (imported from `com.particle.gui.ui.send.WalletSendParams`) containing the following:

* `tokenAddress`, the address of the token to be sent (required).
* `toAddress`, the recipient address (optional).
* `toAmount`, the amount to be sent (optional).

Otherwise, passing `RouterPath.TokenSend` alone without `params` will open the same page with the native token of the network selected.

```kotlin Kotlin theme={null}
val params = WalletSendParams(tokenAddress, toAddress?, toAmount?)
PNRouter.build(RouterPath.TokenSend, params).navigation()

PNRouter.build(RouterPath.TokenSend).navigation()
```

### Open Receive Token

A page displaying both the user's address and an associated QR code can be opened through `PNRouter.build`, using `RouterPath.TokenReceive`. E.g.:

```kotlin Kotlin theme={null}
PNRouter.build(RouterPath.TokenReceive).navigation()
```

### Open Transaction Records

Transaction records (history) for ERC20/721 tokens, along with native tokens, can be programmatically opened through `PNRouter.build`, using `RouterPath.TokenTransactionRecords`. If you're specifically looking for a given token, you'll also need to use `params`, a `TokenTransactionRecordsParams` object (imported from `com.particle.gui.ui.token_detail.TokenTransactionRecordsParams`) containing a given `tokenAddress`. Otherwise, `RouterPath.TokenTransactionRecords` can be used on its own. E.g.:

```kotlin Kotlin theme={null}
val params = TokenTransactionRecordsParams(tokenAddress)
PNRouter.build(RouterPath.TokenTransactionRecords, params).navigation()

PNRouter.build(RouterPath.TokenTransactionRecords).navigation()
```

### Open NFT Details

Particle Wallet also natively supports viewing specific NFTs (traits, description, image, etc.). Forcing this menu programmatically can happen through `PNRouter.build`, passing both `RouterPath.NftDetails` and `params`, a `NftDetailsParams` object (imported from `com.particle.gui.ui.nft_detail.NftDetailParams`) containing a `tokenAddress` (address of the ERC721 token), and the `recipientAddress` (owner of the NFT). E.g.:

```kotlin Kotlin theme={null}
var params = NftDetailParams(tokenAddress, recipientAddress)
PNRouter.build(RouterPath.NftDetails, params).navigation()
```

### Open Buy Crypto

Particle Wallet also has a native onramp aggregator, allowing users to bring fiat on-chain through various onramp providers. Opening this programmatically can happen through `ParticleNetwork.openBuy`, passing in several **optional** parameters to customize the values used within the onramp. Upon calling, this will throw a popup or total redirect over to a configuration of [https://ramp.particle.network](https://ramp.particle.network).

The specific parameters that can be used within `ParticleNetwork.openBuy` are listed below:

| Name          | Description                                                              | Type   | Required                                 |
| :------------ | :----------------------------------------------------------------------- | :----- | :--------------------------------------- |
| network       | \[Solana, Ethereum, Binance Smart Chain, Polygon, Tron, Optimism, etc.]. | string | False *(True if Particle not connected)* |
| fiatCoin      | Fiat currency denomination.                                              | string | False                                    |
| cryptoCoin    | Cryptocurrency denomination.                                             | string | False                                    |
| fiatAmt       | The amount of fiat to be automatically filled in as the purchase volume. | number | False                                    |
| bool          | Lock fiat currency in the buy menu.                                      | bool   | False                                    |
| fixCryptoCoin | Lock cryptocurrency in the buy menu.                                     | bool   | False                                    |
| fixFiatAmt    | Lock fiat amount in the buy menu.                                        | bool   | False                                    |
| walletAddress | The wallet address to receive the cryptocurrency.                        | string | False *(True if Particle not connected)* |

```kotlin Kotlin theme={null}
ParticleNetwork.openBuy(
  walletAddress: String? = null,
  amount: Int? = null,
  fiatCoin: String = "usd",
  cryptoCoin: String = "eth",
  fixFiatCoin: Boolean = false,
  fixFiatAmt: Boolean = false,
  fixCryptoCoin: Boolean = false,
  theme: String = "light",
  language: String = "en-us",
  chainName: String? = null
)
```

### Open Swap

Particle Wallet has built-in swap functionality (retrieves multiple quotes from different providers such as 1inch, iZUMi, etc., routing the swap through the best one depending on swap rate) for Mainnets (both Solana and EVM). Opening this menu can be done through `PNRouter.navigatorSwap`, which alone will open the default swap menu without values filled in. However, you can pass in a `SwapConfig` object (`swapConfig` in this example), imported from `com.particle.gui.ui.swap.SwapConfig`, containing:

* `fromTokenAddress`, the token to swap from.
* `toTokenAddress`, the token to swap to.
* `fromTokenUIAmount`, the amount of `fromTokenAddress` to be automatically reflected within the UI.

E.g.:

```kotlin Kotlin theme={null}
PNRouter.navigatorSwap()

val swapConfig = SwapConfig(
  fromTokenAddress="",
  toTokenAddress="",
  fromTokenUIAmount="0.1"
)
PNRouter.navigatorSwap(swapConfig)
```

### Open DApp Browser Page

Particle Wallet also includes a dApp Browser, allowing users to open different dApps (web apps) and automatically connect with the account loaded into the instance of Particle Wallet, enabling account usage across any dApp. This can be programmatically opened through either `PNRouter.navigatorDappBrowser`, taking one parameter, `url`, which will dictate the specific site opened, or `ParticleNetwork.navigatorDAppBrowser`, which takes the same parameter. E.g.:

```kotlin Kotlin theme={null}
PNRouter.navigatorDappBrowser(url:String)

// Alternatively
ParticleNetwork.navigatorDAppBrowser(url:String)
```

## Relevant API Methods, Examples

In addition to methods through `ParticleWallet` and `PNRouter` that control Particle Wallet, it's also worth mentioning a few APIs that can be accessed through `ParticleNetwork` , which may be relevant to Particle Wallet.

### Get Price

To retrieve the price of one or multiple tokens, you can call the `getPrice` method on either `ParticleNetwork.evm` or `ParticleNetwork.solana`, both taking `addresses` (either a singular or list of token addresses --for the native token, use `'native'`), and `currencies` (either a singular or list of fiat currencies in which the prices are denominated (such as `['usd', 'cny']`). E.g.:

```kotlin Kotlin theme={null}
ParticleNetwork.solana.getPrice(addresses, currencies)

ParticleNetwork.evm.getPrice(addresses, currencies)
```

### Tokens by Address

You can also retrieve the tokens belonging to a specified address by calling either `getTokensAndNFTs` or `getTokensAndNFTsFromDB` (retrieves exclusively from DB) on `ParticleNetwork.solana` or `ParticleNetwork.evm`, taking one parameter, the `address` of the account being queried. E.g.:

```kotlin Kotlin theme={null}
ParticleNetwork.solana.getTokensAndNFTs(address)

ParticleNetwork.solana.getTokensAndNFTsFromDB(address)

ParticleNetwork.evm.getTokensAndNFTs(address)

ParticleNetwork.evm.getTokensAndNFTsFromDB(address)
```

### Transaction History by Address

The full transaction history of a given address can be retrieved through either `getTransactionsByAddress` or `getTransactionsByAddressFromDB` (pulls data exclusively from DB) on `ParticleNetwork.solana` or `ParticleNetwork.evm`. Both of these take `address` (the user address to be queried), although `ParticleNetwork.solana` also takes an additional optional object, which in this example is `optBody`. This can contain additional parameters, such as the boolean, `parseMetadataUri`. E.g.:

```kotlin Kotlin theme={null}
ParticleNetwork.solana.getTransactionsByAddress(address, optBody)

ParticleNetwork.solana.getTransactionsByAddressFromDB(address, optBody)

ParticleNetwork.evm.getTransactionsByAddress(address)

ParticleNetwork.evm.getTransactionsByAddressFromDB(address)
```

***


# Flutter (Dart) - Wallet
Source: https://developers.particle.network/wallet/mobile/flutter

Working with Particle Wallet within flutter applications.

## Particle Wallet for Flutter

Particle Wallet for Flutter is a standard interface and infrastructure for interacting with both Web2-based and Web3-based wallets, working directly with Particle Connect and Particle Auth. In essence, Particle Wallet provides a UI to send, swap, and purchase cryptocurrency, cross-compatible with multiple different account origins, primarily powered by either Particle Auth (for social logins) or Particle Connect (aggregating both social logins and external Web3 wallets).

A rundown on getting started and utilizing the Particle Wallet Flutter SDK **is detailed below**.

## Repository

All of the Particle Network Flutter SDKs, including Particle Wallet, can be found within the [`particle-flutter` GitHub repository](https://github.com/Particle-Network/particle-flutter). Before diving in, it may be worth looking through [this repository](https://github.com/Particle-Network/particle-flutter/tree/master/particle-wallet) to contextualize usage of the SDK with an understanding of its underlying architecture.

***

## Getting Started

Setting up and getting started with the Particle Wallet Flutter SDK is relatively simple, although it differs depending on whether you use Flutter on Android or iOS. However, for both platforms, the setup should be complete in a few minutes.

To begin, you'll need to, regardless of platform, head over to the [Particle dashboard](https://dashboard.particle.network) and retrieve your `projectId`, `clientKey`, and `appId` to connect your Flutter project with the dashboard. This enables configuration, analytics, tracking, etc.

<Note>
  Find a full rundown of the process in the [dashboard guide](/social-logins/dashboard).
</Note>

### Adding the Particle Wallet Flutter SDK to your application

Additionally, regardless of platform, you'll need to begin by adding `particle_wallet` to your Flutter application. This is a requirement before moving onto platform-specific configuration.

```shell Terminal theme={null}
flutter pub add particle_wallet
```

### Android configuration

If you're building an Android application, you must follow the following steps to configure Particle Wallet and prepare for utilization.

#### Prerequisites

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version : 8.5.1 or higher.
* Gradle Version : 8.9 or higher.

To begin, you'll need to open your `build.gradle` file, often found at the following file path: `${project name}/android/app/build.gradle`.

Within `build.gradle` , you'll need to add four new lines to ensure Particle Wallet runs properly:

1. `minSdkVersion`, in most cases, this will simply be set to `23`.
2. `manifestPlaceholders["PN_PROJECT_ID"]`, the `projectId` previously retrieved from the Particle dashboard.
3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the `clientKey` previously retrieved from the Particle dashboard.
4. `manifestPlaceholders["PN_APP_ID"]`, the `appId` previously retrieved from the Particle dashboard.

```groovy build.gradle theme={null}
// Example
defaultConfig {
  // Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html)
  applicationId "com.example.particle_auth_test"

  minSdkVersion 23 // Required
  targetSdkVersion flutter.targetSdkVersion
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName

  manifestPlaceholders["PN_PROJECT_ID"] = "YOUR PROJECT ID"
  manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "YOUR CLIENT KEY"
  manifestPlaceholders["PN_APP_ID"] = "YOUR APP ID"
}
```

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`.

```groovy build.gradle theme={null}
// Example
compileOptions {
  sourceCompatibility JavaVersion.VERSION_17
  targetCompatibility JavaVersion.VERSION_17
}

kotlinOptions {
  jvmTarget = JavaVersion.VERSION_17
}

dataBinding {
  enabled = true
}
```

***

### iOS configuration

Before beginning to build an iOS application, 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`.

At the root of your Xcode project, create a new file, `ParticleNetwork-Info.plist`. Ensure this is marked under "Target Membership."

With a fresh `ParticleNetwork-Info.plist` file, go ahead and fill it in with the following:

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

You'll now need to fill in `PROJECT_UUID` (`projectId`), `PROJECT_CLIENT_KEY`, and `PROJECT_APP_UUID` (`appId`) with the corresponding values retrieved from the [Particle dashboard](https://dashboard.particle.network).

Next, you'll need to go to your `AppDelegate.swift` file to add an import of `ParticleConnect` (which Particle Wallet is dependent on).

Additionally, 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.

```swift AppDelegate.swift theme={null}

import ParticleConnect

override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
  if ParticleConnect.handleUrl(url) {
      return true
  } else {
      return super.application(app, open: url, options: options)
  }
}
```

Wrapping up, 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.

This should be set to "pn" + your `projectId` (retrieved and configured prior), resulting in a scheme URL that looks like the following:

```text theme={null}
pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f
```

Additionally, head over to your `Info.plist` file and include the following snippet:

```xml Info.plist theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>phantom</string>
<string>bitkeep</string>
<string>imtokenv2</string>
<string>rainbow</string>
<string>trust</string>
<string>zerion</string>
<string>mathwallet</string>
<string>oneinch</string>
<string>awallet</string>
<string>okex</string>
<string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>
```

Finally, you'll need to edit your Podfile to ensure `particle_connect` is correctly imported. If you have not already, head over to the [linked guide](/social-logins/connect/mobile/flutter) to complete this.

***

## Examples of Utilization

### Initialization

Before the SDK is usable, you'll have to go through initialization. This is required before other methods function. To do this, you'll need to call `ParticleWallet.init`.

| Field         | Type     | Description                                                           |
| ------------- | -------- | --------------------------------------------------------------------- |
| `name`        | `String` | Your project's name.                                                  |
| `icon`        | `String` | The link to an icon/logo representing your project - ideally 512x512. |
| `url`         | `String` | The URL for your project's website.                                   |
| `description` | `String` | A short description of your project.                                  |

E.g.:

```dart theme={null}
ParticleWallet.init(WalletMetaData(
        "Particle Connect",
        "https://connect.particle.network/icons/512.png",
        "https://connect.particle.network",
        "Particle Connect Flutter Demo"));
```

***

### Open Wallet

To programmatically force the main wallet page open, you can call `ParticleWallet.navigatorWallet`. `navigatorWallet` takes one parameter, a binary selection indicating whether tokens or NFTs are displayed within the main wallet page. `WalletDisplay.token` sets this to tokens, and `WalletDisplay.nft` to NFTs. E.g.:

```dart theme={null}
ParticleWallet.navigatorWallet();
```

***

### Open Receive Token

Similarly, to open a page for receiving a token containing both an address and a corresponding QR code, you can call `ParticleWallet.navigatorTokenReceive`. This optionally takes a parameter, `tokenAddress`, representing the specific token you plan to receive, in which the QR code will include its logo at its center. E.g.:

```dart theme={null}
ParticleWallet.navigatorTokenReceive();

ParticleWallet.navigatorTokenReceive(tokenAddress);
```

***

### Open Send Token

You can also open a send token (token referring to ERC20/SPL/native) page by calling `ParticleWallet.navigatorTokenSend`. Specifically, `navigatorTokenSend` optionally takes the following parameters:

| Field          | Type      | Description                                                                                                     |
| -------------- | --------- | --------------------------------------------------------------------------------------------------------------- |
| `tokenAddress` | `String`  | The address of a token to be auto-filled within the send menu. This can be `native` for a default/native token. |
| `toAddress`    | `String`  | The recipient's address.                                                                                        |
| `amount`       | `String?` | (Optional) The volume of tokens (`tokenAddress`) to be sent.                                                    |

E.g.:

```dart theme={null}
ParticleWallet.navigatorTokenSend();

ParticleWallet.navigatorTokenSend(tokenAddress: tokenAddress, toAddress: toAddress, amount: amount);
```

***

### Open Transaction Records

To open the transaction records (history) of a given connected wallet, you can programmatically force this page with `ParticleWallet.navigatorTokenTransactionRecords`, optionally taking one parameter, `tokenAddress`. If filled out, this will filter the transaction records to only display entries involving a specified `tokenAddress`. E.g.:

```dart theme={null}
ParticleWallet.navigatorTokenTransactionRecords();

ParticleWallet.navigatorTokenTransactionRecords(tokenAddress: tokenAddress);
```

***

### Open NFT Send

Similar to `navigatorTokenSend`, you can call `ParticleWallet.navigatorNFTSend` to throw a page explicitly meant for sending a given NFT (one specific token). `navigatorNFTSend` takes the following parameters:

| Field            | Type      | Description                                                                                              |
| ---------------- | --------- | -------------------------------------------------------------------------------------------------------- |
| `mint`           | `String`  | (`contractAddress`) of a given NFT.                                                                      |
| `tokenId`        | `String`  | The token ID of an NFT (within the collection defined by `mint`). This can be left as `null` for Solana. |
| `amount`         | `String?` | The volume of NFT (`mint`) to be sent, ERC172 NFT should set 1                                           |
| `receiveAddress` | `String?` | The recipient address, a blank string by default.                                                        |

E.g.:

```dart theme={null}
String mintAddress = "0xD000F000Aa1F8accbd5815056Ea32A54777b2Fc4";
String tokenId = "1412";
ParticleWallet.navigatorNFTSend(mintAddress, tokenId, amount: null, receiveAddress: "");
```

***

### Open NFT Details

Particle Wallet also natively supports viewing specific NFTs' traits, description, image, etc. Forcing this menu programmatically can happen through `ParticleWallet.navigatorNFTDetails`, passing in the `contractAddress` (`mint`) of the NFT and the specific tokenId. For Solana, tokenId can be left blank. E.g.:

| Field     | Type     | Description                                                                                              |
| --------- | -------- | -------------------------------------------------------------------------------------------------------- |
| `mint`    | `String` | (`contractAddress`) of a given NFT.                                                                      |
| `tokenId` | `String` | The token ID of an NFT (within the collection defined by `mint`). This can be left as `null` for Solana. |

```dart theme={null}
String mint = "0xD000F000Aa1F8accbd5815056Ea32A54777b2Fc4";
String tokenId = "1412";
ParticleWallet.navigatorNFTDetails(mint, tokenId);
```

***

### Open Buy Crypto

Particle Wallet also has a native onramp aggregator, allowing users to bring fiat on-chain through various onramp providers. Opening this programmatically can happen through `ParticleWallet.navigatorBuyCrypto`, passing in several optional parameters to customize the values used within the onramp. Upon calling, this will return a popup or total redirect over to a configuration of [https://ramp.particle.network](https://ramp.particle.network).

The specific parameters that can be used within `ParticleWallet.navigatorBuyCrypto` are listed below:

| Field           | Type                    | Description                                                                                   |
| --------------- | ----------------------- | --------------------------------------------------------------------------------------------- |
| `walletAddress` | `String?`               | (Optional) The wallet address to receive the cryptocurrency, default is current user address. |
| `cryptoCoin`    | `String?`               | (Optional) Cryptocurrency denomination. Default is current chain native token symbol.         |
| `fiatCoin`      | `String?`               | (Optional) Fiat currency denomination. Default is current fiat coin.                          |
| `fiatAmt`       | `int?`                  | (Optional) The amount of fiat to be automatically filled in as the purchase volume.           |
| `chainInfo`     | `ChainInfo?`            | (Optional) The chainInfo, default is current chainInfo.                                       |
| `fixFiatCoin`   | `bool`                  | (Optional) Lock selection of fiat coin in the buy menu, default is false.                     |
| `fixFiatAmt`    | `bool`                  | (Optional) Lock selection of fiat amount in the buy menu, default is false.                   |
| `fixCryptoCoin` | `bool`                  | (Optional) Lock selection of crypto coin in the buy menu, default is false.                   |
| `theme`         | `Theme`                 | (Optional) The buy page theme, `dark` or `light`, default is curreny appearance.              |
| `language`      | `Language?`             | (Optional) The buy page lanuage, default is current language.                                 |
| `modalStyle`    | `IOSModalPresentStyle?` | (Optional) Control iOS presentation style, default is `pageSheet`.                            |

```dart theme={null}
final config = BuyCryptoConfig(walletAddress:"Wallet Address", cryptoCoin:"USDT", fiatCoin:"USD", fiatAmt:1000,  chainInfo: ChainInfo.Ethereum);
ParticleWallet.navigatorBuyCrypto(config: config);
```

***

### Open Swap

Particle Wallet has a native swap page (retrieves multiple quotes from different providers, routing the swap through the best one) for Mainnets (Solana and EVM). Throwing this menu can be done through `ParticleWallet.navigatorSwap`, which alone will open the default swap menu without values filled in, although you can pass in several optional parameters, including:

| Field              | Type      | Description                                                                                                                                             |
| ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fromTokenAddress` | `String?` | (Optional) The swap pair from token address.                                                                                                            |
| `toTokenAddress`   | `String?` | (Optional) The swap pair to token address.                                                                                                              |
| `amount`           | `String?` | (Optional) The swap from token amount, should pass the minimal unit string, for example 0.01 ETH, it's decimals is 18, should pass "10000000000000000". |

E.g.:

```dart theme={null}
ParticleWallet.navigatorSwap();

ParticleWallet.navigatorSwap(fromTokenAddress, toTokenAddress, amount);
```

***

### Open DApp Browser

Particle Wallet also includes a **dApp Browser**, enabling users to open different dApps (web apps) and automatically connect with the account loaded into the instance of Particle Wallet. This enables account usage across any web-based dApp. This can be programmatically opened through `ParticleWallet.navigatorDappBrowser`, taking one parameter, `url`, which will dictate the specific site opened. E.g.:

```dart theme={null}
const url = "https://opensea.io";
ParticleWallet.navigatorDappBrowser(url: url);
```

***

### Set Supported Chains

To set the specific supported chain(s) available within the chain selection menu on Particle Wallet, you can use `ParticleWallet.setSupportChain`, which takes an array of `ChainInfo` objects. Each object (representing different chains) will directly enable an additional chain within the wallet interface.

If you add a Testnet to this list and pass it to `setSupportChain`, you'll also need to ensure that `ParticleWallet.setShowTestNetwork` is set to `true` (by passing in `true`). E.g.:

```dart theme={null}
List<ChainInfo> chainInfos = <ChainInfo>[];
chainInfos.add(ChainInfo.Ethereum);
chainInfos.add(ChainInfo.Polygon);
chainInfos.add(ChainInfo.BNBChain);
ParticleWallet.setSupportChain(chainInfos);
```

***

### Switch Wallets

Additionally, to switch the current wallet type (`walletType`) active within the Particle Wallet interface, you'll need to call `ParticleWallet.switchWallet` by passing in a specified `walletType` (of type `WalletType`) and associated `publicAddress`.

`WalletType` contains the following:

* `authCore`, social logins through Particle Auth.
* `evmPrivateKey`, custom EVM wallet imports/exports.
* `solanaPrivateKey`, custom Solana wallet imports/exports.
* `metaMask`.
* `rainbow`.
* `trust`.
* `imToken`.
* `bitget`.
* `walletConnect`.
* `zerion`.
* `math`.
* `zengo`.
* `alpha`.
* `okx`.
* `phantom`, intended for Solana.

E.g.:

```dart theme={null}
WalletType walletType = WalletType.authCore;
await ParticleWallet.switchWallet(walletType, publicAddress);
```

***

### (Optional) Custom WalletConnect Projcet ID

```dart theme={null}
//call before ParticleConnect.init
ParticleWallet.setWalletConnectProjectId("Your WalletConnect Project ID, from https://cloud.walletconnect.com")
```

***

### Custom UI

Additional interface customizations can be manually set through a variety of methods on `ParticleWallet`. Each of these will change a specific configuration or UI element present within the Particle Wallet interface. These methods include:

* `setSwapDisabled`, whether or not the "Swap" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.

* `setPayDisabled`, whether or not the "Buy" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.

* `setBridgeDisabled`, whether or not the "Bridge" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.

* `setShowTestNetwork`, configures the visibility of the Testnets within the interface. It accepts a boolean value, `true` or `false`.

* `setShowManageWallet`, toggles the display of the wallet management page. It takes a boolean parameter, either `true` or `false`.

* `setShowLanguageSetting`, controls the visibility of the language setting option in the settings page. It accepts a boolean value, `true` or `false`.

* `setShowAppearanceSetting`, determines whether the appearance setting is shown in the settings page. It takes a boolean value, `true` or `false`.

* `setSupportDappBrowser`, configures the availability of the dApp browser feature. It accepts a boolean parameter, `true` or `false`.

* `setSupportWalletConnect`, sets whether WalletConnect is supported on the wallet page. It takes a boolean value, `true` or `false`.

* `setSupportAddToken`, toggles the option to add tokens, indicated by the variable `isShow`.

* `setDisplayTokenAddresses`, specifies token addresses to be displayed. It accepts a list of token addresses.

* `setPriorityTokenAddresses`, sets specific tokens as a priority, making them appear at the top of the list. It requires a list of token addresses.

* `setDisplayNFTContractAddresses`, configures the wallet to display NFTs from specified contract addresses. It accepts a list of NFT contract addresses.

* `setPriorityNFTContractAddresses`, prioritizes specific NFT contract addresses to be shown at the top of the list. It takes a list of NFT contract addresses.

* `loadCustomUIJsonString`, allows setting a custom UI theme by passing a JSON string. This string can be customized according to the user's preference.

E.g.:

```dart theme={null}
ParticleWallet.setShowTestNetwork(true);

ParticleWallet.setShowManageWallet(true);

ParticleWallet.setShowLanguageSetting(true);

ParticleWallet.showAppearanceSetting(true);

ParticleWallet.setSupportDappBrowser(false);

ParticleWallet.setSupportWalletConnect(true);

ParticleWallet.setSupportAddToken(isShow);

ParticleWallet.setShowSmartAccountSetting(false);

List<String> tokenAddresses = <String>[
  "0x303b35f48684bea50D0e7D1AcDdeaf78A7188798"
];


List<String> tokenAddresses = <String>[
  "0x303b35f48684bea50D0e7D1AcDdeaf78A7188798"
];

ParticleWallet.setDisplayTokenAddresses(tokenAddresses);

ParticleWallet.setPriorityTokenAddresses(tokenAddresses);

List<String> nftContractAddresses = <String>[
  "0xD18e451c11A6852Fb92291Dc59bE35a59d143836"
];

ParticleWallet.setDisplayNFTContractAddresses(nftContractAddresses);

ParticleWallet.setPriorityNFTContractAddresses(nftContractAddresses);


// Example https://github.com/Particle-Network/particle-ios/blob/main/Demo/Demo/customUIConfig.json
const json = "";
ParticleWallet.loadCustomUIJsonString(json);

ParticleWallet.setCustomWalletName("Your Wallet Name", "your wallet icon url");

// in Android platform, call setWallet and set your wallet name.
ParticleWallet.setWallet(walletType, pubAddress!, "Your wallet name");

// you can replace localizable strings that appeared in
// yourIOSBuild/Pods/ParticleWalletGUI/XCFrameworks/ParticleWalletGUI/ParticleWalletGUI.bundle/en.lproj/Locallizable.strings.
if (Platform.isIOS) {
  Map<String, String> enLocalizables = <String, String>{
    "network fee": "Service Fee",
    "particle auth wallet": "Your wallet name"
  };

  Map<Language, Map<String, String>> localizables = <Language, Map<String, String>> {
    Language.en:  enLocalizables
  };

  ParticleWallet.setCustomLocalizable(localizables);
}
```

***


# iOS (Swift) - Wallet
Source: https://developers.particle.network/wallet/mobile/ios

Working with Particle Wallet within iOS applications.

## Particle Wallet for iOS

Particle Wallet for iOS is a standard interface and infrastructure for interacting with both Web2-based and Web3-based wallets, working directly with Particle Connect and Particle Auth. In essence, Particle Wallet provides a UI to send, swap, and purchase cryptocurrency, cross-compatible with multiple different account origins, primarily powered by either Particle Auth (for social logins) or Particle Connect (aggregating both social logins and external Web3 wallets).

A rundown on getting started and utilizing the Particle Wallet iOS SDK **is detailed below**.

***

## Getting Started

Configuration and implementation of Particle Wallet within iOS applications is relatively straightforward, although there are several prerequisites to ensure you avoid potential compatibility issues. These are as follows.

### Prerequisites

* Xcode **15.0** or later.
* CocoaPods **1.14.3** or higher.
* Your project must target these platform versions or later:
  * iOS **14**.

### Configuration

To begin the initialization process, you'll need to head over to the [Particle dashboard](https://dashboard.particle.network) to create a project alongside a corresponding application.

These will control specific customizations, statistics, etc. for your particular instance of Particle's Wallet-as-a-Service. After creating an application, you'll need to retrieve three key values to use later: `projectId`, `clientKey`, and `appId` later.

<Note>
  Find a full rundown of the process in the [dashboard guide](/social-logins/dashboard).
</Note>

### Installation

Now that you've created a project and an application within the [Particle dashboard](https://dashboard.particle.network), you'll need to go ahead and install the Particle Wallet SDK using CocoaPods (assuming you meet the minimum version requirements).

1. If you don't already have a Podfile, create one from the root of your project directory with:

   ```shell Terminal theme={null}
   pod init
   ```

2. Within the newly created Podfile, add the `ParticleWalletAPI` and `ParticleWalletGUI` pod.

   ```ruby Podfile theme={null}
   pod 'ParticleWalletAPI'
   pod 'ParticleWalletGUI'
   pod 'ParticleWalletConnect'
   ```

3. Install the pods, then open your corresponding .xcworkspace file to see the project in Xcode.

   ```shell Terminal  theme={null}
   pod install --repo-update
   open your-project.xcworkspace
   ```

4. From there, you'll need to configure the scheme URL itself; select your application target within the "Info" section, add a URL type, and include the scheme. **This scheme should be `pn` added to your `appId`.**

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`.

With the scheme URL configured, you'll also need to head into `info.plist` and add `LSApplicationQueriesSchemes` according to your specific utilization of Web3 wallets (not Particle Auth, but independent wallet adapters). An example of this can be seen below (each of these is optional and dependent upon your given implementation)

```xml Info.plist theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>phantom</string>
<string>bitkeep</string>
<string>imtokenv2</string>
<string>rainbow</string>
<string>trust</string>
<string>zerion</string>
<string>mathwallet</string>
<string>oneinch</string>
<string>awallet</string>
<string>okex</string>
<string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>
```

#### Podfile Configuration

Additionally, you'll need to ensure that your resulting Podfile is properly configured, as in the example below.

```ruby Podfile theme={null}
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end
```

And if you're using `ParticleWalletGUI` (which is optional if you're using a custom interface), then you'll also need to include the following:

```ruby Podfile theme={null}
pod 'SkeletonView', :git => 'https://github.com/SunZhiC/SkeletonView.git', :branch => 'main'
```

## Examples of Utilization, API

### Get Price

Beginning with `ParticleWalletAPI`, you can use Particle Wallet to directly call data API methods and retrieve information that may be relevant to the underlying account and wallet. One of these methods includes `getPrice` on either `ParticleWalletAPI.getSolanaService` or `ParticleWalletAPI.getEvmService`. `getPrice` is used for the retrieval of the real-time price of tokens defined within the methods first parameter, `addresses` (in which the native token is `"native"`), denominated in currencies listed within `currencies`. E.g.:

| Field        | Type       | Description                                                       |
| ------------ | ---------- | ----------------------------------------------------------------- |
| `addresses`  | `[String]` | The tokens's addresses, for native token, you can pass `"native"` |
| `currencies` | `[String]` | The price unity, such as `"usd"`                                  |

```swift theme={null}
let addresses: [String] = ["native"]
let currencies: [String] = ["usd"]
let tokenPrices = try await ParticleWalletAPI.getSolanaService().getPrice(by: addresses, currencies: currencies).value

let addresses: [String] = ["native"]
let currencies: [String] = ["usd"]
let tokenPrices = try await ParticleWalletAPI.getEvmService().getPrice(by: addresses, currencies: currencies).value
```

### Tokens by Address

`getTokensAndNFTs` alongside `getTokensAndNFTsFromDB` (returns from database without RPC calls) return a list of ERC20/721/SPL tokens associated with a given address. This can be called on either `ParticleWalletAPI.getSolanaService` or `ParticleWalletAPI.getEvmService`, both taking a singular parameter (`address`), dictating the specific account to be queried. E.g.:

```swift theme={null}
let address: String = ""
let tokenResult = try await ParticleWalletAPI.getSolanaService().getTokensAndNFTs(by: address).value

let tokenResult = try await ParticleWalletAPI.getSolanaService().getTokensAndNFTsFromDB(by: address).value

let address: String = ""
let tokenResult = try await ParticleWalletAPI.getEvmService().getTokensAndNFTs(by: address).value

let tokenResult = try await ParticleWalletAPI.getEvmService().getTokensAndNFTsFromDB(by: address).value
```

### Transaction History by Address

Another solid example of utilizing `ParticleWalletAPI` is the retrieval of transaction history by address. Either `getTransactions` or `getTransactionsFromDB` (returns from database without RPC calls) will return a list of transactions associated with a given address. This can be called on either `ParticleWalletAPI.getSolanaService` or `ParticleWalletAPI.getEvmService`. For `getEvmService`, you'll only need to pass in a given targeted `address`, otherwise for `getSolanaService`, you have the option of passing additional parameters such as `beforeSignature`, `untilSignature`, and `limit`. E.g.:

```swift theme={null}
let address: String = ""
let result = try await ParticleWalletAPI.getSolanaService().getTransactions(by: address, beforeSignature: nil, untilSignature: nil, limit: 1000).value

let result = try await ParticleWalletAPI.getSolanaService().getTransactionsFromDB(by: address, beforeSignature: nil, untilSignature: nil, limit: 1000).value

let address: String = ""
let result = try await ParticleWalletAPI.getEvmService().getTransactions(by: address).value

let result = try await ParticleWalletAPI.getEvmService().getTransactionsFromDB(by: address).value
```

### Create Transaction

`ParticleWalletAPI.createTransaction`facilitates the construction of a transaction object derived from the standard from, to, amount (value), and data fields. This transaction, once constructed with `ParticleWalletAPI.createTransaction`, can be passed for in-UI proposal with `auth.sendTransaction` or `adapter.signAndSendTransaction`. Specifically, eight key parameters are available within `ParticleWalletAPI.getEvmService().createTransaction`:

| Field            | Type              | Description                                                                                                                                                                                             |
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `from`           | `String`          | The user's public address, which to sign the transaction.                                                                                                                                               |
| `to`             | `String?`         | If you send a erc20, erc721, erc1155 or interact with a contract, this is the contract address, if you send native, this is receiver address, if you want to deploy a contract, this to should be `nil` |
| `value`          | `String?`         | Native value, default is nil, expressed as a hex string.                                                                                                                                                |
| `data`           | `String`          | If you send a erc20, erc721, erc1155 or interact with a contract, this is the data field, if you send native, this should be `0x`, default value is `0x`                                                |
| `contractParams` | `ContractParams?` | You can use this object to describe a write contract function                                                                                                                                           |
| `type`           | `String`          | Default is 0x2. Support EIP1559, you can ignore this parameter                                                                                                                                          |
| `gasFeeLevel`    | `gasFeeLevel`     | The specific gas fee level to be used. This can be either `.low`, `.medium`, `.high`, default is `.medium`                                                                                              |
| `action`         | `Action`          | Transaction execution mechanism. This can be either `.normal`, `.cancel`, `.speedUp`, default is `.normal`, which means send a new transaction                                                          |

<CodeGroup>
  ```swift Send native theme={null}
  let sender = auth.evm.getAddress() ?? ""
  let receiver = "0xAC6d81182998EA5c196a4424EA6AB250C7eb175b"
  // Send 0.0001 native tokens, need convert to the minimal unit.
  let amount = BDouble(0.0001 * pow(10, 18)).rounded()

  let transaction = try await ParticleWalletAPI.getEvmService().createTransaction(from: sender, to: receiver, value: amount.toHexString()).value
  let signature = try await auth.evm.sendTransaction(transaction, chainInfo: nil)
  ```

  ```swift Send erc20 token theme={null}
  let from = auth.evm.getAddress() ?? ""
  // Send 0.0001 ERC20 token, need convert to the minimal unit, suppose the token decimals is 18.
  let amount = BDouble(0.0001 * pow(10, 18)).rounded()
  // The ERC20 token contract address.
  let contractAddress = "0xa36085F69e2889c224210F603D836748e7dC0088"
  // This is receiver address.
  let receiver = "0xAC6d81182998EA5c196a4424EA6AB250C7eb175b"

  let contractParams = ContractParams.erc20Transfer(contractAddress: contractAddress, to: receiver, amount: amount)
  // Note the to address is the token contract address, not receiver address.
  let transaction = try await ParticleWalletAPI.getEvmService().createTransaction(from: from, to: contractAddress, value: nil, contractParams: contractParams).value
  let signature = auth.evm.sendTransaction(transaction, chainInfo: nil)
  ```

  ```swift Send ERC721 NFT theme={null}
  let from = auth.evm.getAddress() ?? ""
  // This is your NFT contract address
  let contractAddress = "0xD18e451c11A6852Fb92291Dc59bE35a59d143836"
  // This is the receiver address
  let receiver = "0xAC6d81182998EA5c196a4424EA6AB250C7eb175b"
  // Your ERC721 NFT token ID
  let tokenId = "2302"

  let contractParams = ContractParams.erc721SafeTransferFrom(contractAddress: contractAddress, from: from, to: receiver, tokenId: tokenId)
  // Note the to address is the NFT contract address, not receiver address.
  let transaction = ParticleWalletAPI.getEvmService().createTransaction(from: from, to: contractAddress, value: nil, contractParams: contractParams).value
  let signature = try await auth.evm.sendTransaction(transaction, chainInfo: nil)
  ```

  ```swift Text send erc1155 NFT theme={null}
  let from = auth.evm.getAddress() ?? ""
  // This is your NFT contract address
  let contractAddress = "0xD18e451c11A6852Fb92291Dc59bE35a59d143836"
  // This is the receiver address
  let receiver = "0xAC6d81182998EA5c196a4424EA6AB250C7eb175b"
  // Your ERC721 NFT token ID
  let tokenId = "2302"
  // Number of ERC1155 tokens to send
  let tokenAmount: BInt = 10

  let contractParams = ContractParams.erc1155SafeTransferFrom(contractAddress: contractAddress, from: from, to: receiver, id: tokenId, amount: tokenAmount, data: "0x")
  // Note the to address is the NFT contract address, not receiver address.
  let transaction = ParticleWalletAPI.getEvmService().createTransaction(from: from, to: contractAddress, value: nil, contractParams: contractParams).value
  let signature = try await auth.evm.sendTransaction(transaction, chainInfo: nil)
  ```

  ```swift Text deploy contract theme={null}
  let data = getContractData()
  let from = auth.evm.getAddress() ?? ""

  let transacion = try await ParticleWalletAPI.getEvmService().createTransaction(from: from, to: nil, data: data).value
  let signature = try await auth.evm.sendTransaction(transaction, chainInfo: nil)
  ```
</CodeGroup>

### Contract Interaction

#### Read Contract

Specifically, four key parameters are available within `ParticleWalletAPI.getEvmService().readContract`:

| Field             | Type          | Description                                                                 |
| ----------------- | ------------- | --------------------------------------------------------------------------- |
| `contractAddress` | `String`      | The contract address.                                                       |
| `methodName`      | `String`      | The method's name in the contract.                                          |
| `params`          | `[Encodable]` | The parameters of the method, each parameter requires a hexadecimal string. |
| `abiJsonString`   | `String?`     | (Optional) The ABI JSON string for the method.                              |

Here is a abiJsonString example.

```swift theme={null}
let abiJsonString = "[{\"inputs\":[{\"internalType\":\"uint256\",\"name\":\"quantity\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"amount\",\"type\":\"uint256\"}],\"name\":\"mint\",\"outputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"function\"}]"

```

```swift theme={null}
let params = ContractParams.customAbiEncodeFunctionCall(
  contractAddress: "0xd000f000aa1f8accbd5815056ea32a54777b2fc4",
  methodName: "balanceOf",
  params: ["0xBbc1CA8776EfDeC12C75e218C64e96ce52aC6671"],
  abiJsonString: nil)
let result = try await ParticleWalletAPI.getEvmService().readContract(contractParams: params).value
```

#### Write Contract

Specifically, four five parameters are available within `ParticleWalletAPI.getEvmService().writeContract`:

The first four parameters are the same as readContract.

| Field  | Type     | Description                                               |
| ------ | -------- | --------------------------------------------------------- |
| `from` | `String` | The user's public address, which to sign the transaction. |

```swift theme={null}
let params = ContractParams.customAbiEncodeFunctionCall(
  contractAddress: "0xd000f000aa1f8accbd5815056ea32a54777b2fc4",
  methodName: "mint",
  params: ["0x1"],
  abiJsonString: nil)
let from = auth.evm.getAddress()
let result = try await ParticleWalletAPI.getEvmService().writeContract(contractParams: params, from: from).value

```

## Examples of Utilization, Wallet

In addition to `ParticleWalletAPI`, you can also use `ParticleWalletGUI` as the primary means of programmatically configuring and interacting with Particle Wallet. To begin, `ParticleWalletGUI` relies on WalletConnect through Particle Connect to enable usage of external Web3 wallet (such as Metamask or Phantom) within Particle Wallet.

```swift theme={null}
ParticleWalletConnect.initialize(
            WalletMetaData(name: "Particle Wallet",
                           icon: URL(string: "https://connect.particle.network/icons/512.png")!,
                           url: URL(string: "https://connect.particle.network/")!,
                           description: "Particle Connect is a decentralized wallet connection protocol that makes it easy for users to connect their wallets to your DApp.", redirectUniversalLink: nil)
        )
```

### Custom Wallet UI

`ParticleWalletGUI` is drived by wallet adapters; after initializing the SDK, you'll be able to retrieve all relevant adapters through `ParticleConnect.getAdapters`, which can be plugged into `ParticleWalletGUI.setAdapters` to initiate the custom wallet interface, as is shown below.

```swift theme={null}
let adapters = ParticleConnect.getAdapters()
ParticleWalletGUI.setAdapters(adapters)
```

With `ParticleWalletGUI`, one of the primary functions is configuring the wallet interface for your specific application. This is managed through numerous methods, all of which toggle different interface components, enabling deep customization. These methods include:

* `setSwapDisabled`, whether or not the "Swap" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.
* `setPayDisabled`, whether or not the "Buy" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.
* `setBridgeDisabled`, whether or not the "Bridge" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.
* `setSupportWalletConnect`, controls the visibility of the WalletConnect feature within the interface. It accepts a Boolean parameter, `true` or `false`, and is set to `true` by default.
* `setSupportDappBrowser`, determines whether the DApp browser is available on the wallet page. It takes a Boolean parameter, `true` or `false`, with `true` as the default value
* `setShowTestNetwork`, decides if the test network should be shown or hidden. This accepts a Boolean value, `true` or `false`, defaulting to `false`
* `setSupportChain`, specifies the blockchain networks supported by Particle Connect. Accepts an array of chains.
* `setShowManageWallet`, toggles the visibility of the manage wallet page. It takes a Boolean value, `true` or `false`, with `true` as the default.
* `setShowLanguageSetting`, controls the display of language settings in the settings page. It accepts a Boolean value, `true` or `false`, with the default being `false`.
* `setShowAppearanceSetting`, decides whether the appearance settings are shown in the settings page. It takes a Boolean value, `true` or `false`, defaulting to `false`.
* `setSupportAddToken`, toggles the option to add tokens, with `true` showing the add token button and `false` hiding it. The default value is `true`.
* `setDisplayTokenAddresses`, sets specific token addresses to be displayed in the wallet; other tokens won't be displayed. It accepts an array of token addresses or `nil` to reset.
* `setDisplayNFTContractAddresses`, configures the wallet to display NFTs exclusively from specified NFT contract addresses. It accepts an array of addresses or `nil` to reset.
* `setPriorityTokenAddresses`, sets priority token addresses that will appear at the top of the list. It accepts an array of token addresses or `nil` to reset (reflected on the wallet page's token list and token send page).
* `setPriorityNFTContractAddresses`, specifies NFT contract addresses for priority display at the top of the list. It takes an array of NFT contract addresses.
* `setCustomTokenAddresses`, allows for the specification of custom token addresses to be displayed in the token list, unless hidden by the user. This method is overridden if `setDisplayTokenAddresses` is used (reflected on the wallet page token list and token send select page).
* `loadCustomUIJsonString`, sets a custom UI by passing a JSON string.
* `setCustomWalletName`, configures a custom name and icon for the wallet, supported for the `WalletType` of `particle` and `authcore`. It requires specifying the wallet type, name, and icon URL.
* `setCustomLocalizable`, allows for setting custom localizable strings

E.g.:

```swift theme={null}
ParticleWalletGUI.setPayDisabled(false)

ParticleWalletGUI.setSwapDisabled(false)

ParticleWalletGUI.setSupportWalletConnect(false)

ParticleWalletGUI.setSupportDappBrowser(false)

ParticleWalletGUI.setShowTestNetwork(false)

ParticleWalletGUI.setSupportChain([.bsc, .arbitrum, .harmony])

ParticleWalletGUI.setShowManageWallet(true)

ParticleWalletGUI.setShowLanguageSetting(true)

ParticleWalletGUI.setShowAppearanceSetting(true)

ParticleWalletGUI.setSupportAddToken(false)

ParticleWalletGUI.setDisplayTokenAddresses([tokenAddress])

ParticleWalletGUI.([nftContractAddress])

ParticleWalletGUI.setPriorityTokenAddresses([tokenAddress])

ParticleWalletGUI.setPriorityNFTContractAddresses([nftContractAddress])

ParticleWalletGUI.setCustomTokenAddresses([tokenAddress])


let jsonString = ""
try! ParticleWalletGUI.loadCustomUIJsonString(jsonString)

ConnectManager.setCustomWalletName(walletType: .particle, name: .init(name: "Wallet Name", icon: "Icon URL"))

let customLocalizable = [Language.en: ["network fee": "Service Fee",
        "particle auth wallet": "Your Wallet Name"]]
ParticleWalletGUI.setCustomLocalizable(customLocalizable)
```

Additionally, if you'd like to support the WalletConnect feature within the wallet itself, you'll need to open `AppDelegate.swift` and paste in the below snippet:

```swift theme={null}
// In AppDelegate.swift, under application(_:open:options:)
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
  if ParticleWalletGUI.handleWalletConnectUrl(url, withScheme: "particlewallet") {
    return true
  } else {
    return ParticleConnect.handleUrl(url)
  }
}
```

### Switch Wallet

Before opening the UI, if you'd like to switch the `WalletType` (`walletType` in this case) reflected and used within the wallet itself, you can use `ParticleWalletGUI.switchWallet`, passing in the specific `walletType` (see for more information) and targeted user address, `publicAddress`:

| Field           | Type         | Description                                            |
| --------------- | ------------ | ------------------------------------------------------ |
| `walletType`    | `WalletType` | The `walletType` is used to identify a unique user.    |
| `publicAddress` | `String`     | The `publicAddress` is used to identify a unique user. |

```swift theme={null}
ParticleWalletGUI.switchWallet(walletType: .metaMask, publicAddress: "YOUR_PUBLIC_ADDRESS")
```

### Open Wallet

To programmatically open the wallet interface, you'll need to use `PNRouter`. This will act as the primary mechanism for opening and managing specific pages of Particle Wallet. In this case, you can call `PNRouter.navigatorWallet` to throw the main page within Particle Wallet. E.g.:

```swift theme={null}
PNRouter.navigatorWallet()
```

### TabViewController Embed

If you'd like to embed the wallet interface within your `tabViewController`, you'll need to call `PNRouter.extractWallet`, passing in optional parameters such as `hiddenBackButton` for configuration before extraction. This will return a navigation controller, which can then be used within `tabViewController.viewControllers`. E.g.:

```swift theme={null}
let walletVc = PNRouter.extractWallet(hiddenBackButton: true)

tabViewController.viewControllers = [otherVc1, walletVc, otherVc2]
```

### Open Send Token

To open the page coordinating sending a token (token referring to ERC20/SPL tokens), you can call `PNRouter.navigatorTokenSend`; if you're sending a specific ERC20/SPL token, you can also pass in `tokenSendConfig`, a `TokenSendConfig` object containing the following:

| Field          | Type      | Description                                                           |
| -------------- | --------- | --------------------------------------------------------------------- |
| `tokenAddress` | `String?` | The address of the token to be sent, default is the native token      |
| `toAddress`    | `String?` | (Optional) The recipient's address                                    |
| `amount`       | `BInt?`   | (Optional) The amount to be sent, should pass the minimal unit amount |

```swift theme={null}
let tokenSendConfig = TokenSendConfig(tokenAddress: nil, toAddress: nil, amount: nil)
PNRouter.navigatorTokenSend(tokenSendConfig: tokenSendConfig)
```

### Open Receive Token

A page displaying both the user's address and an associated QR code can be opened through `PNRouter.navigatorTokenReceive`. If you'd like to generate a specific QR code for a token, placing the token logo at the center of the QR code, you can pass in `tokenReceiveConfig`, a `TokenReceiveConfig` object containing the `tokenAddress` of the token in question. E.g.:

| Field          | Type      | Description                                           |
| -------------- | --------- | ----------------------------------------------------- |
| `tokenAddress` | `String?` | The address of the token, default is the native token |

```swift theme={null}
PNRouter.navigatorTokenReceive()

let config = TokenReceiveConfig(tokenAddress: "")
PNRouter.navigatorTokenReceive(tokenReceiveConfig: config)
```

### Open Transaction Records

Transaction records (history) for both ERC20/721 tokens can be programmatically opened through `PNRouter.navigatorTokenTransactionRecords`, passing in `tokenTransactionRecordsConfig`, a `TokenTransactionRecordsConfig` object taking the `tokenAddress` of a specific token to search for.

| Field          | Type     | Description                                           |
| -------------- | -------- | ----------------------------------------------------- |
| `tokenAddress` | `String` | The address of the token, default is the native token |

```swift theme={null}
let tokenTransactionRecordsConfig = TokenTransactionRecordsConfig(tokenAddress: tokenAddress)
PNRouter.navigatorTokenTransactionRecords(tokenTransactionRecordsConfig: tokenTransactionRecordsConfig)

PNRouter.navigatorTokenTransactionRecords()
```

### Open Send NFT

If you'd like to force the NFT sending menu to open, you can use `PNRouter.navigatorNFTSend`, passing in `nftSendConfig`, a `NFTSendConfig` object that takes the following parameters:

| Field       | Type      | Description                                                                                        |
| ----------- | --------- | -------------------------------------------------------------------------------------------------- |
| `address`   | `String`  | The contract address of the NFT being sent.                                                        |
| `toAddress` | `String?` | The recipient's address.                                                                           |
| `tokenId`   | `String?` | The specific token ID of the NFT you'd like to send (belonging to the collection under `address`). |
| `amount`    | `BInt`?   | The volume of NFTs that you'd like to send, for NFT 721, the amount should always be 1.            |

```swift theme={null}
let nftContractAddress = ""
let receiverAddress = ""
let tokenId = ""
let amount = BInt(1)
let config = NFTSendConfig(address: nftContractAddress, toAddress: receiverAddress, tokenId: tokenId, amount: amount)
PNRouter.navigatorNFTSend(nftSendConfig: config)
```

### Open NFT Details

Particle Wallet also natively supports viewing specific NFTs (traits, description, image, etc.). Forcing this menu programmatically can happen through `PNRouter.navigatorNFTDetails`, passing in `nftDetailsConfig`, a `NFTDetailsConfig` object that takes the `address` of the NFT and the specific `tokenId`; for Solana. `tokenId` can be left blank. E.g.:

| Field     | Type      | Description                                                                                        |
| --------- | --------- | -------------------------------------------------------------------------------------------------- |
| `address` | `String`  | The contract address of the NFT being sent.                                                        |
| `tokenId` | `String?` | The specific token ID of the NFT you'd like to send (belonging to the collection under `address`). |

```swift theme={null}
let address = ""
let tokenId = ""
let config = NFTDetailsConfig(address: address, tokenId: tokenId)
PNRouter.navigatorNFTDetails(nftDetailsConfig: config)
```

### Open Buy Crypto

Particle Wallet also has a native onramp aggregator, allowing users to bring fiat on-chain through various onramp providers. Opening this programmatically can happen through `PNRouter.navigatorBuy`, passing in several optional parameters to customize the values used within the onramp. Upon calling, this will throw a popup or total redirect to a corresponding configuration of [https://ramp.particle.network](https://ramp.particle.network).

The specific parameters that can be used within `PNRouter.navigatorBuy` are listed below:

| Field           | Type                    | Description                                                                                   |
| --------------- | ----------------------- | --------------------------------------------------------------------------------------------- |
| `walletAddress` | `String?`               | (Optional) the wallet address to receive the cryptocurrency, default is current user address. |
| `network`       | `ChainInfo?`            | (Optional) The chainInfo, default is current chainInfo.                                       |
| `cryptoCoin`    | `String?`               | (Optional) Cryptocurrency denomination. default is current chain native token symbol.         |
| `fiatAmt`       | `int?`                  | (Optional) The amount of fiat to be automatically filled in as the purchase volume.           |
| `fiatCoin`      | `String?`               | (Optional) Fiat currency denomination. Default is current fiat coin.                          |
| `fixFiatCoin`   | `Bool`                  | (Optional) Lock selection of fiat coin in the buy menu, default is false.                     |
| `fixFiatAmt`    | `bool`                  | (Optional) Lock selection of fiat amount in the buy menu, default is false.                   |
| `fixCryptoCoin` | `bool`                  | (Optional) Lock selection of crypto coin in the buy menu, default is false.                   |
| `theme`         | `String`                | (Optional) The buy page theme, `dark` or `light`, default is current appearance.              |
| `language`      | `Language?`             | (Optional) The buy page lanuage, default is current language.                                 |
| `modalStyle`    | `IOSModalPresentStyle?` | (Optional) Control iOS presentation style, default is `pageSheet`.                            |

```swift theme={null}
let buyCryptoConfig = BuyCryptoConfig(walletAddress: "YOUR WALLET ADDRESS",
                                              network: .ethereum,
                                              cryptoCoin: "ETH",
                                              fiatAmt: 1000,
                                              fiatCoin: "USD",
                                              fixFiatCoin: false,
                                              fixFiatAmt: false,
                                              fixCryptoCoin: false,
                                              theme: "light",
                                              language: "en-US")

PNRouter.navigatorBuy(buyCryptoConfig: buyCryptoConfig)
```

### Open Swap

Additionally, Particle Wallet has a built-in swap functionality (retrieves multiple quotes from different providers such as 1inch, iZUMi, etc., routing the swap through the best one) for Mainnets (Solana and EVM). The Swap menu can be opened via `PNRouter.navigatorSwap`, which alone will open the default swap menu without values filled in, although you can pass in a `SwapConfig` object, containing:

* `fromTokenAddress`, the token to swap from.
* `toTokenAddress`, the token to swap to.
* `fromTokenAmount`, the amount of `fromTokenAddress` to be automatically reflected within the UI.

```swift theme={null}
PNRouter.navigatorSwap()

let config = SwapConfig(fromTokenAddress: nil,
                toTokenAddress: nil,
                fromTokenAmount: nil)
PNRouter.navigatorSwap(swapConfig: config)
```

### Open DApp Browser Page

Finally, Particle Wallet also includes a dApp Browser, allowing users to open different dApps (web apps), automatically connecting with the account loaded into the instance of Particle Wallet. This enables account usage across any dApp. This can be programmatically opened through `PNRouter.navigatorDappBrowser`, taking one parameter, `url`, which will dictate the site opened. E.g.:

```swift theme={null}
if let url = URL(string: "app.uniswap.org") {
  PNRouter.navigatorDappBrowser(url: url)
}
```

### (Optional) Custom WalletConnect Projcet ID

```swift theme={null}
ParticleWalletConnect.setWalletConnectV2ProjectId("WalletConnect project ID")
```


# React Native (JavaScript) - Wallet
Source: https://developers.particle.network/wallet/mobile/react

Working with Particle Wallet within React Native applications.

# Particle Wallet for React Native

Particle Wallet is a central wallet interface facilitating interaction with both social logins (via Particle Auth) and external Web3 wallets. Particle Wallet works closely with Particle Connect to provide a standard UI for the utilization of associated/connected accounts. Particle Wallet is built to be relatively application-specific through significant customization potential and built-in modularization.

Configuration and utilization processes **are detailed below**.

## Repository

Before jumping in, it may be worth looking at the [Particle Wallet React Native GitHub repository](https://github.com/Particle-Network/particle-react-native/tree/master/particle-wallet) to contextualize the SDK with a preliminary understanding of the underlying architecture and implementation flow by viewing the source code alongside included demos.

***

## Getting Started

The setup process for the Particle Wallet React Native SDK is quite similar to the Particle Auth and Particle Connect setup process, although it deviates slightly.

Before diving into platform-specific configuration, all Particle Wallet (& Connect/Auth) SDKs require three standard values for initialization: `projectId`, `clientKey`, and `appId`, all of which can be retrieved from the [Particle dashboard](https://dashboard.particle.network).

<Note>
  Find a full rundown of the process in the [dashboard guide](/social-logins/dashboard).
</Note>

### Adding the Particle Wallet React Native SDK to your application

Another constant in the setup process is the installation of `@particle-network/rn-wallet`, either through npm or Yarn, depending on your preference.

```shell Terminal theme={null}
npm install @particle-network/rn-wallet

// Or

yarn add @particle-network/rn-wallet
```

### Android configuration

If you're planning on using Android for your React Native application, ensure you're meeting the following prerequisites (otherwise, expect issues or non-functionality):

* minSdkVersion **23** or higher.
* compileSdkVersion, targetSdkVersion **34** or higher.
* JavaVersion **17**.
* [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
* Android Gradle Plugin Version: 8.5.1 or higher.
* Gradle Version: 8.9 or higher. (before react-native:0.75.2, use 8.8)

Once you've made sure your project meets these requirements, you'll need to move on and define the aforementioned configuration values (`projectId`, `clientKey`, and `appId`) within your `build.grade` file (generally found at `${project name}/android/app/build.gradle`). These directly link your application's instance of Particle Connect with the [dashboard](https://dashboard.particle.network).

Specifically, within `build.gradle`, you'll need to set four different values:

1. `dataBinding`, this should be enabled with `enabled = true`.
2. `manifestPlaceholders["PN_PROJECT_ID"]`, the `projectId` previously retrieved from the Particle dashboard.
3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the `clientKey` previously retrieved from the Particle dashboard.
4. `manifestPlaceholders["PN_APP_ID"]`, the `appId` previously retrieved from the Particle dashboard.

```groovy build.gradle theme={null}
android {
  ...
  defaultConfig {
      ......
      manifestPlaceholders["PN_PROJECT_ID"] = "your project id"
      manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "your project client key"
      manifestPlaceholders["PN_APP_ID"] = "your app id"
  }

  dataBinding {
      enabled = true
  }

}
```

***

### iOS configuration

To use iOS for your React Native application, you'll need to ensure that your project meets the following requirements:

* **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`.

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 following:

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

Similar to the Android configuration, you'll need to fill in `PROJECT_UUID` (`projectId`), `PROJECT_CLIENT_KEY` (`clientKey`), and `PROJECT_APP_UUID` (`appId`) with the corresponding values retrieved from the [Particle dashboard](https://dashboard.particle.network).

Next, you'll need to head over to your `AppDelegate.swift` file to add an import of `react_native_particle_connect`, which Particle Wallet depends on in a large capacity.

Additionally, within your application's `application` method (as shown below), you'll need to include a handler condition derived from `ParticleConnectSchemeManager handleUrl:url`. This should be as simple as a `YES` (true) return upon a truthy value of `ParticleConnectSchemeManager handleUrl:url`.

```swift AppDelegate.swift theme={null}
#import <react_native_particle_connect/react_native_particle_connect-Swift.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  if ([ParticleConnectSchemeManager handleUrl:url] == YES) {
    return YES;
  } else {
    // Other methods
  }
  return YES;
}
```

Wrapping up, 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.

This should simply be set to "pn" + your `projectId` (retrieved and configured prior), resulting in a scheme URL that looks something like the following:

```text theme={null}
pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f
```

Additionally, head over to your `Info.plist` file and include the following snippet.

```xml Info.plist theme={null}
<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>phantom</string>
<string>bitkeep</string>
<string>imtokenv2</string>
<string>rainbow</string>
<string>trust</string>
<string>zerion</string>
<string>mathwallet</string>
<string>oneinch</string>
<string>awallet</string>
<string>okex</string>
<string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>
```

Finally, you'll need to edit your Podfile to ensure `particle_connect` (which, as mentioned, Particle Wallet depends on) is properly imported. Head over to the [linked guide](/social-logins/connect/mobile/react) to complete this if you have not already.

***

## Examples of Utilization

### Initialization

The Particle Wallet SDK won't function until initialization occurs. This will set several key parameters used and required by the wallet interface. Specifically, this is done through `particleWallet.initWallet`, which takes one parameter, `walletMetaData`. This should a `DappMetaData` object containing:

* `walletConnectProjectId`, your WalletConnect project ID retrieved from the [WalletConnect dashboard](https://cloud.walletconnect.com).
* `name`, the name of your project.
* `icon`, your project's logo - ideally 512x512.
* `url`, the URL of your project's website.
* `description`, a brief description of your project.
* Optionally, `redirect` and `verifyUrl`.

If you're also using Particle Connect within the same file, you can call `init`, passing in `chainInfo` and `env`. For more information on Particle Connect, see the [Particle Connect React Native SDK](https://particlenetwork.readme.io/reference/react-native-javascript-1).

```typeScript theme={null}
import * as particleWallet from '@particle-network/rn-wallet';
import * as particleConnect from '@particle-network/rn-connect';
import * as particleAuthCore from '@particle-network/rn-auth-core';

const chainInfo = Ethereum;
const env = Env.Dev;
const metaData = {
  walletConnectProjectId: 'Your WalletConnect Project ID, retrieved from https://cloud.walletconnect.com',
  name: 'Particle Connect',
  icon: 'https://connect.particle.network/icons/512.png',
  url: 'https://connect.particle.network',
  description: 'Particle Wallet',
};
particleConnect.init(chainInfo, env, metaData);
particleAuthCore.init();
particleWallet.initWallet(metaData);
```

***

### Open Wallet

To programmatically force the main wallet page open, you can call `particleWallet.navigatorWallet`. `navigatorWallet` takes one parameter, a binary selection indicating whether tokens or NFTs are displayed within the main wallet page. `WalletDisplay.token` sets this to tokens, and `WalletDisplay.nft` to NFTs. E.g.:

```typeScript theme={null}
const display = WalletDisplay.Token;
particleWallet.navigatorWallet(display);
```

***

### Open Token Receive

`particleWallet.navigatorTokenReceive` opens a page dedicated to receiving tokens, through both a general address and a QR code. This takes one optional parameter, `tokenAddress`, that can change the associated QR code to be specific to a given token, including its icon at the center of the QR code image. E.g.

```typeScript theme={null}
particleWallet.navigatorTokenReceive(tokenAddress);
```

***

### Open Token Send

You can also open a page for sending tokens (ERC20/SPL/native) directly to other addresses. This can be done through `particleWallet.navigatorTokenSend`, optionally passing in the following parameters to predefine (fill in) specific values within the page:

* `tokenAddress`, the contract address of the token to be sent, can be set to `native` for the default/native network token.
* `toAddress`, the recipient's address.
* `amount`, the volume of `tokenAddress` that'll be sent to `toAddress`.

E.g.

```typeScript theme={null}
particleWallet.navigatorTokenSend(tokenAddress, toAddress, amount);
```

***

### Open Transaction Records

It's also quite simple to open a page containing transaction records (history) for a connected wallet: `particleWallet.navigatorTokenTransactionRecords`. If you'd like to filter these records only to show entries that include a specific token, then you can pass in a `tokenAddress` representing the token to be filtered. E.g.

```typeScript theme={null}
particleWallet.navigatorTokenTransactionRecords(tokenAddress);
```

***

### Open NFT Send

Alike `navigatorTokenSend`, you can use `particleWallet.navigatorNFTSend` to prompt a page for sending a specific NFT (defined by a `mint`/`contractAddress` and `tokenId`) to another address. `navigatorNFTSend` takes three parameters:

* `receiverAddress`, the recipient's address.
* `mint` (also known as `contractAddress`), the address of the NFT contract to be sent.
* `tokenId`, the token ID for the specific NFT associated with `mint`. This can be set as `null` for Solana.

E.g.

```typeScript theme={null}
particleWallet.navigatorNFTSend(receiverAddress, mint, tokenId);
```

***

### Open NFT Details

To open the details of a specific NFT (image, attributes, description, etc.) on-screen, you'll need to call `particleWallet.navigatorNFTDetails` by passing in `mint` (`contractAddress`) and the associated `tokenId` that you'd like to view. E.g.

```typeScript theme={null}
particleWallet.navigatorNFTDetails(mint, tokenId);
```

***

### Open Buy Crypto

### Open Buy Crypto

Particle Wallet also has a native onramp aggregator, allowing users to bring fiat on-chain through various onramp providers. Opening this programmatically can happen through `ParticleWallet.navigatorBuyCrypto`, passing in several optional parameters to customize the values used within the onramp. Upon calling, this will return a popup or total redirect over to a configuration of [https://ramp.particle.network](https://ramp.particle.network).

The specific parameters that can be used within `ParticleWallet.navigatorBuyCrypto` are listed below:

| Field           | Type         | Description                                                                                   |
| --------------- | ------------ | --------------------------------------------------------------------------------------------- |
| `walletAddress` | `string?`    | (Optional) The wallet address to receive the cryptocurrency, default is current user address. |
| `cryptoCoin`    | `string?`    | (Optional) Cryptocurrency denomination. Default is current chain native token symbol.         |
| `fiatCoin`      | `string?`    | (Optional) Fiat currency denomination. Default is current fiat coin.                          |
| `fiatAmt`       | `int?`       | (Optional) The amount of fiat to be automatically filled in as the purchase volume.           |
| `chainInfo`     | `ChainInfo?` | (Optional) The chainInfo, default is current chainInfo.                                       |
| `fixFiatCoin`   | `boolean`    | (Optional) Lock selection of fiat coin in the buy menu, default is false.                     |
| `fixFiatAmt`    | `boolean`    | (Optional) Lock selection of fiat amount in the buy menu, default is false.                   |
| `fixCryptoCoin` | `boolean`    | (Optional) Lock selection of crypto coin in the buy menu, default is false.                   |
| `theme`         | `string?`    | (Optional) The buy page theme, `dark` or `light`, default is curreny appearance.              |
| `language`      | `Language?`  | (Optional) The buy page lanuage, default is current language.                                 |

```typeScript theme={null}
const config = {
  walletAddres: '0xa0869E99886e1b6737A4364F2cf9Bb454FD637E4',
  cryptoCoin: 'BNB',
  fiatCoin: 'USD',
  fiatAmt: 1000,
  chainInfo: Polygon,
  fixFiatCoin: true,
  fixCryptoCoin: true,
  fixFiatAmt: true,
  theme: 'dark',
  language: Language.JA
};

particleWallet.navigatorBuyCrypto(config);
```

***

### Open Swap

Particle Wallet features a built-in swap widget, aggregating multiple providers such as 1inch to initiate and execute swaps. This widget/interface can be thrown by using `particleWallet.navigatorSwap`, and optionally passing in the following parameters (can work without them):

| Field              | Type      | Description                                                                                                                                            |
| ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `fromTokenAddress` | `string?` | (Optional) The swap pair from token address                                                                                                            |
| `toTokenAddress`   | `string?` | (Optional) The swap pair to token address                                                                                                              |
| `amount`           | `string?` | (Optional) The swap from token amount, should pass the minimal unit string, for example 0.01 ETH, it's decimals is 18, should pass "10000000000000000" |

E.g.:

```typeScript theme={null}
particleWallet.navigatorSwap(fromTokenAddress, toTokenAddress, amount);
```

***

### Open DApp Browser

Particle Wallet also includes a **dApp Browser**, enabling users to open different dApps (web apps) and automatically connect with the account loaded into the instance of Particle Wallet. This enables account usage across any web-based dApp. This can be programmatically opened through `particleWallet.navigatorDappBrowser`, taking one parameter, `url`, which will dictate the specific site opened. E.g.:

```typeScript theme={null}
particleWallet.navigatorDappBrowser("https://opensea.io");
```

***

### Set Supported Chains

To set the specific supported chain(s) available within the chain selection menu on Particle Wallet, you can use `ParticleWallet.setSupportChain`, which takes an array of `ChainInfo` objects. Each object (representing different chains) will directly enable an additional chain within the wallet interface.

If you add a Testnet to this list and pass it to `setSupportChain`, you'll also need to ensure that `ParticleWallet.setShowTestNetwork` is set to `true` (by passing in `true`). E.g.:

```typeScript theme={null}
const chainInfos = [Ethereum, EthereumSepolia, PolygonAmoy];
    particleWallet.setSupportChain(chainInfos);
```

***

### Switch Wallet

You can also switch the `walletType` being used within Particle Wallet. For example, if you're using Metamask as a wallet type within Particle Wallet and would like to switch to Particle (social logins), this would be the method you'd use. You can initiate this switch through `particleWallet.createSelectedWallet`, passing in the new `walletType` object (of type `WalletType`), and the targeted user address of the current active session. E.g.

`WalletType` contains the following:

* `AuthCore`, Particle Auth Core, an alternative to Particle Auth (`Particle`).
* `EvmPrivateKey`, custom EVM wallet imports/exports.
* `SolanaPrivateKey`, custom Solana wallet imports/exports.
* `MetaMask`.
* `Rainbow`.
* `Trust`.
* `ImToken`.
* `Bitget`.
* `WalletConnect`.
* `Phantom`, intended for Solana.
* `Zerion`.
* `Math`.
* `Inch1`, 1inch.
* `Zengo`.
* `Alpha`.
* `Bitpie`.
* `OKX`.
* `TokenPocket`, not supported by iOS.

```typeScript theme={null}
particleWallet.createSelectedWallet(account.publicAddress, WalletType.AuthCore, "Custom Wallet Name");
```

## Set Wallet Name

You can customize the wallet name and icon by `particleWallet.setCustomWalletName`,

| Field  | Type     | Description                                                                                                               |
| ------ | -------- | ------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | Wallet name, for Android, you need call createSelectedWallet to customize the wallet name after particle wallet connected |
| `icon` | `string` | Wallet icon, a uri such as [https://example.com/icon.png](https://example.com/icon.png)                                   |

```typeScript theme={null}
particleWallet.setCustomWalletName('My Wallet', "https://example.com/icon.png")
```

### Set Custom Localizable

You can use custom localization strings. For example, when customizing a wallet name, you need to update the localization strings with method `particleWallet.setCustomLocalizable`. This method only support iOS,

```typeScript theme={null}
if (Platform.OS === 'ios') {
      // use language code in type Language
      const localizables: any = {
        'en': {
          "network fee": "Service Fee",
          "particle auth wallet": "Playbux Wallet"
        },
      };

      console.log()

      particleWallet.setCustomLocalizable(localizables);
    }
```

***

## Custom UI

Particle Wallet can also undergo additional customization, specifically regarding which UI elements are shown and how. Each of these configurations are accessed through a unique method on `particleWallet` (`@particle-network/rn-wallet`). These methods include (but are not limited to):

* `setSwapDisabled`, whether or not the "Swap" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.

* `setPayDisabled`, whether or not the "Buy" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.

* `setBridgeDisabled`, whether or not the "Bridge" functionality is displayed within the interface. This takes one parameter, either `true` or `false`, with the default being `false`.

* `setDisplayTokenAddresses`, an synchronous function to set specific token addresses to be displayed in the Particle Wallet. It takes an array of token addresses as a parameter, `tokenAddresses`.

* `setDisplayNFTContractAddresses`, an synchronous function for setting specific NFT contract addresses to be displayed in the Particle Wallet. This function accepts an array of NFT contract addresses, `nftContractAddresses`.

* `setPriorityTokenAddresses`, an synchronous function that prioritizes certain token addresses to appear at the top of lists within the Particle Wallet. It requires an array of token addresses, `tokenAddresses`.

* `setPriorityNFTContractAddresses`, an synchronous function to prioritize specific NFT contract addresses in the Particle Wallet, making them appear at the top of lists. It takes an array of NFT contract addresses, `nftContractAddresses`.

* `setShowLanguageSetting`, an synchronous function to toggle the visibility of the language setting option in the Particle Wallet. It takes a Boolean value, `true` or `false`.

* `setShowAppearanceSetting`, an synchronous function that controls the display of the appearance setting in the Particle Wallet. It accepts a Boolean parameter, either `true` or `false`.

* `setSupportAddToken`, an synchronous function to toggle the option to add tokens in the Particle Wallet. It takes a Boolean value of `true` or `false`.

* `setSupportWalletConnect`, an synchronous function set whether WalletConnect is supported on the wallet page. It takes a boolean value, `true` or `false`.

* `setSupportDappBrowser`, configures the availability of the dApp browser feature. It accepts a boolean parameter, `true` or `false`.

E.g.

```typeScript theme={null}
particleWallet.setDisplayTokenAddresses(tokenAddresses);

particleWallet.setDisplayNFTContractAddresses(nftContractAddresses);

particleWallet.setPriorityTokenAddresses(tokenAddresses);

particleWallet.setPriorityNFTContractAddresses(nftContractAddresses);

particleWallet.setShowLanguageSetting(false);

particleWallet.setShowAppearanceSetting(false);

particleWallet.setSupportAddToken(false);
```

***


# Unity (C#) - Wallet
Source: https://developers.particle.network/wallet/mobile/unity

Working with Particle Wallet within Unity applications.

## Particle Wallet For Unity

Particle Wallet, within Unity applications, acts as a unified interface for both Web2 (via social login) and Web3 (via external wallets) accounts, working directly with Particle Connect. Particle Wallet on Unity provides games with a standard UI (yet customizable) UI for sending, swapping, and purchasing cryptocurrency natively within a corresponding account. Because of this, Particle Wallet is best described as wallet infrastructure, not a standalone wallet.

Details regarding the configuration and utilization of the Particle Wallet Unity SDK **can be found below**.

## Repository

Before diving in, all of the Particle Network Unity SDKs (for Particle Auth, Particle Connect, and Particle Wallet) are publicly available and viewable through the [official repository](https://github.com/Particle-Network/particle-unity). Feel free to look at the underlying architecture and demos showcasing end-to-end implementation for an initial understanding of working with Particle Wallet on Unity.

***

## Getting Started

### Prerequisites

To start, your Unity project must meet several requirements to avoid compatibility issues. These requirements will be, in some capacity, dependent on the platform that you've decided to use. They are as follows:

* **Unity 2022.3.43f1** or higher.
* If you're using iOS:
  * **Xcode 15.0** or higher.
  * **CocoaPods 1.14.3** or higher.
  * **iOS 14** or higher.
* If you're using Android:
  * minSdkVersion **23** or higher.
  * compileSdkVersion, targetSdkVersion **34** or higher.
  * JavaVersion **17**.
  * [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
  * Android Gradle Plugin Version : 8.5.1 or higher.
  * Gradle Version : 8.9 or higher.

### Setting up the Particle dashboard

Once you've ensured your project meets the above prerequisites, you'll also need three key values from the [Particle dashboard](https://dashboard.particle.network): your `projectId`, `clientKey`, and `appId`.

These directly connect your Unity project with the Particle dashboard, enabling customization, analytics, tracking, etc.

<Note>
  Find a full rundown of the process in the [dashboard guide](/social-logins/dashboard).
</Note>

### Configuration

With these values retrieved, you can move on to initial configuration and dependency management. This will vary in complexity depending on the platform in question. To begin, for both iOS and Android, you'll need to download and install the Particle Unity package.

Head over to the [`particle-unity` GitHub repository](https://github.com/Particle-Network/particle-unity/releases), and download the latest release (`.unitypackage`), then import this into your project.

#### iOS configuration

If you're building a Unity game on iOS, you must follow a specific configuration process to ensure that Particle Wallet functions. The first step within this process is to set up a scheme URL within the Unity editor.

1. Head into the [iOS Player Settings](https://docs.unity3d.com/Manual/class-PlayerSettingsiOS.html) menu (`Edit` -> `Project Settings` -> `Player Settings` -> `iOS`).
2. From here, select `Other`, then scroll down to `Configuration`.
3. Open the `Supported URL schemes` section, and within the `Element 0` field, paste in your `projectId` with a prefix of `pn`.\
   For example, if your `projectId` (from the [Particle dashboard](https://dashboard.particle.network)) is something like `63bfa427-cf5f-4742-9ff1-e8f5a1b9828f`, then the scheme URL, in this case, would be `pn63bfa427-cf5f-4742-9ff1-e8f5a1b9828f`.

<Note>
  <p>Remove other services, if needed</p>

  <p />

  <p>
    Within `ParticleNetworkIOSBridge.cs`, you'll have a number of services
    included in the SDK:
  </p>

  <p />

  <p>- `ParticleNetworkBase` - required universally.</p>
  <p>- `ParticleAuthCore` - required for Particle Auth Core.</p>
  <p>- `ParticleConnect`- required for Particle Connect.</p>

  <p>
    * `ParticleWalletGUI` - usage of the Particle Wallet UI, contains all
      services.
  </p>

  <p>- `ParticleAA` - usage of the Particle AA, contains all services.</p>
</Note>

You'll also need to configure your Podfile if you haven't already. If you don't have a Podfile, go to the root of your project directory and run `pod init`to generate one.

Open this Podfile, and insert the specific pods (services) you'd like to use within your project. In this case, `ParticleWalletGUI` will generally suffice, but additional services can be added if needed.

Additionally, you'll need to paste in the below code snippet for installation handling:

```ruby Podfile theme={null}
pod 'ParticleWalletGUI'
// Also include:
pod 'SkeletonView', :git => 'https://github.com/SunZhiC/SkeletonView.git', :branch => 'main'
pod 'SwiftyUserDefaults', :git => 'https://github.com/SunZhiC/SwiftyUserDefaults.git', :branch => 'master'
pod 'WalletConnectSwiftV2', :git => 'https://github.com/SunZhiC/WalletConnectSwiftV2.git', :branch => 'particle'

// Paste this
post_install do |installer|
installer.pods_project.targets.each do |target|
  target.build_configurations.each do |config|
  config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
 end
```

Also you can copy the example [Podfile](https://github.com/Particle-Network/particle-unity/blob/main/ios-build/Podfile) .

With your Podfile set, you'll need to run `pod install` and open your `.xcworkspace` file, as shown below:

```shell Terminal theme={null}
pod install --repo-update

open {your project}.xcworkspace
```

Finally, for iOS, you'll need to use the `projectId`, `clientKey`, and `appId` previously retrieved. To do this, head into the root of your Xcode project and create a file, `ParticleNetwork-Info.plist`. Within this file, paste the following text, then replace the placeholders:

```xml ParticleNetwork-Info.plist theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>PROJECT_UUID</key>
	<string>YOUR_PROJECT_UUID</string>
	<key>PROJECT_CLIENT_KEY</key>
	<string>YOUR_PROJECT_CLIENT_KEY</string>
	<key>PROJECT_APP_UUID</key>
	<string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>
```

#### Android configuration

Alternatively, if you're building your Unity game for Android, you'll just need to configure two files before you're ready. The first of these two files can be found at `Assets/Plugins/Android/launcherTemplate.gradle` within your project. Here, you'll need to ensure that you have the necessary dependencies included.

You'll need the following dependencies at a minimum:

* `network.particle:wallet-service`, required for Particle Wallet.
* `network.particle:auth-service`, if you're planning on using Particle Auth directly.
* `network.particle:connect`, if you're planning on using Particle Connect directly.
* `network.particle:unity-bridge`, required universally.

```groovy launcherTemplate.gradle theme={null}
dependencies {
    implementation project(':unityLibrary')
    implementation "network.particle:wallet-service:${sdkVersion}"
    implementation "network.particle:unity-bridge:${sdkVersion}"
  	// Other dependencies
}
```

Finally, for Android, you'll need to place your `projectId`, `clientKey`, and `appId` within `gradleTemplate.properties`, found at `Assets/Plugins/Android/gradleTemplate.properties`.

```groovy gradleTemplate.properties theme={null}
particle.network.project_client_key=Your Client Key
particle.network.project_id=Your Project ID
particle.network.app_id=Your App ID
```

With all of this set up, you can now drag the `ParticleWalletGUI.prefab` file into your first scene.

***

## Examples of Utilization

### Initialization

With your Unity project configured and ready to go, you'll need to do one more thing before the full extent of the SDK is available: initialization. `ParticleWalletGUI` will need to be initialized before Particle Wallet will work properly.

To do this, you'll need to call `ParticleWalletGUI.ParticleWalletConnectInitialize`, passing in `metadata`, which contains the following:

* `walletConnectProjectId`, your WalletConnect project ID retrieved from the [WalletConnect dashboard](https://cloud.walletconnect.com).
* `name`, the name of your project.
* `icon`, a URL linking to the icon/logo of your project - ideally 512x512.
* `url`, the URL of your project's website.
* `description`, a short description of your project.
* Optionally, `redirect` and `verifyUrl` can also be added.

Additionally, if you're using `ParticleNetwork` and `ParticleConnectInteraction` for Particle Connect or Auth, you can initialize them in the same place and using the same `metadata`.

```csharp theme={null}
var metadata = new DAppMetaData(TestConfig.walletConnectProjectId, "Particle Connect",
    "https://connect.particle.network/icons/512.png",
    "https://connect.particle.network", "Particle Unity Demo");

ParticleNetwork.Init(ChainInfo.Ethereum);
ParticleConnectInteraction.Init(ChainInfo.Ethereum, metadata);
ParticleWalletGUI.ParticleWalletConnectInitialize(metadata);
```

### Customization

Now that `ParticleWalletGUI` is initialized and set to go, you can move onto configuring and customizing the wallet interface itself, choosing the specific options that are enabled and disabled within the wallet, the language used, and more. This can be done through `ParticleWalletGUI.{configuration method}`. The specific methods available here include the following:

* `SetSupportChain`, sets the array of supported blockchain networks. It accepts an array of chain information, with the default being all chains.

* `SetPayDisabled`, toggles the ability to perform buy transactions within the interface. It takes a Boolean, `true` or `false`, with no default value specified.

* `SetShowTestNetwork`, controls the visibility of the test network. It accepts a Boolean value, `true` or `false`.

* `SetShowManageWallet`, determines whether the manage wallet page is displayed. It takes a Boolean parameter, `true` or `false`.

* `SetDisplayTokenAddresses`, specifies which token addresses are displayed, filtering out others. It accepts an array of token addresses to be displayed.

* `SetDisplayNFTContractAddresses`, sets specific NFT contract addresses to be displayed, hiding others. It takes an array of NFT addresses.

* `SetPriorityTokenAddresses`, prioritizes certain tokens to be shown at the top of the list. It accepts an array of token addresses.

* `SetPriorityNFTContractAddresses`, sets certain NFTs to appear at the top of the list. It requires an array of NFT addresses. Similar to `SetPriorityTokenAddresses`.

* `SetSupportAddToken`, toggles the display of the add token button in the main wallet page. It takes a Boolean value, `true` or `false`.

* `SetSupportWalletConnect`, controls support for wallet connect as a wallet option. It accepts a Boolean value, `true` or `false`.

* `SetSupportDappBrowser`, determines whether the dApp browser should be shown on the wallet page. It takes a Boolean parameter, `true`, or `false`.

* `SetShowLanguageSetting`, controls the visibility of the language setting button in the settings page. It accepts a Boolean parameter, either `true` or `false`.

* `SetShowAppearanceSetting`, toggles the display of the appearance setting button in the settings page. It takes a Boolean value, `true` or `false`.

E.g.:

```csharp theme={null}
ParticleWalletGUI.SetSupportChain(new []{chainInfo});

ParticleWalletGUI.EnablePay(false);

ParticleWalletGUI.SetShowTestNetwork(false);

ParticleWalletGUI.SetShowManageWallet(false);

ParticleNetwork.SetAppearance(UserInterfaceStyle.DARK);

ParticleWalletGUI.SetDisplayTokenAddresses(new []{"Your token address"});
ParticleWalletGUI.SetDisplayNFTContractAddresses(new []{"Your NFT address"});

ParticleWalletGUI.SetPriorityTokenAddresses(new []{"Your token address"});
ParticleWalletGUI.SetPriorityNFTContractAddresses(new []{"Your NFT address"});

ParticleWalletGUI.SetSupportAddToken(false);

ParticleWalletGUI.SetSupportWalletConnect(false)

ParticleWalletGUI.SetSupportDappBrowser(false)

ParticleNetwork.SetFiatCoin("HKD");

ParticleNetwork.SetLanguage(Language.KO);

ParticleWalletGUI.SetShowLanguageSetting(true);

ParticleWalletGUI.SetShowAppearanceSetting(true);
```

### Open Wallet

Within `ParticleWalletGUI`, you can also force specific pages of Particle Wallet to open, passing in specific preset configurations. In this case, you can programmatically open the main page of the wallet with `NavigatorWallet` and pass in a binary (`0` or `1`), indicating whether the main page should display ERC20/SPL tokens (`0`), or NFTs (`1`). E.g.:

```csharp theme={null}
int display = 0;
ParticleWalletGUI.NavigatorWallet(display);
```

### Open Receive Token

Similarly, you can open a standalone page for receiving cryptocurrency. This'll include the user's address alongside a corresponding QR code. To do this, you'll need to call `ParticleWalletGUI.NavigatorTokenReceive`. If you'd like, you can pass in a specific `tokenAddress` to create a token-specific QR code, including its icon/logo at the center. E.g.:

```csharp theme={null}
ParticleWalletGUI.NavigatorTokenReceive();
ParticleWalletGUI.NavigatorTokenReceive(tokenAddress);
```

### Open Send Token

To open the token sending page (ERC20/SPL/native), you'll can use `ParticleWalletGUI.NavigatorTokenSend`, optionally passing in various parameters such as `tokenAddress`, `toAddress`, and `amount` to predefine values within the interface. E.g.:

```csharp theme={null}
ParticleWalletGUI.NavigatorTokenSend(tokenAddress, toAddress, amount);
```

### Open Transaction Records

You can also return a page displaying the transaction records of a connected wallet, `ParticleWalletGUI.NavigatorTokenTransactionRecords`, which optionally takes one parameter, `tokenAddress`, for filtering the results only to include transactions that involve a specified ERC20/721 token address. E.g.:

```csharp theme={null}
ParticleWalletGUI.NavigatorTokenTransactionRecords(tokenAddress);
```

### Open NFT Send

Similar to the token sending page, you can also return an NFT sending page for moving (sending) a specific NFT to a different address. This can be done through `ParticleWalletGUI.NavigatorNFTSend`, taking:

| Field            | Type      | Description                                                                                              |
| ---------------- | --------- | -------------------------------------------------------------------------------------------------------- |
| `mint`           | `string`  | (`contractAddress`) of a given NFT.                                                                      |
| `tokenId`        | `string`  | The token ID of an NFT (within the collection defined by `mint`). This can be left as `null` for Solana. |
| `receiveAddress` | `string?` | The recipient address, a blank string by default.                                                        |
| `amount`         | `string?` | The volume of NFT (`mint`) to be sent, ERC172 NFT should set 1                                           |

E.g.:

```csharp theme={null}
ParticleWalletGUI.NavigatorNFTSend(contractAddress, tokenId, null, null);
```

### Open NFT Details

Particle Wallet also natively supports viewing specific NFTs (traits, description, image, etc.). Forcing this menu programmatically can happen through `ParticleWalletGUI.NavigatorNFTDetails`, passing in the `contractAddress` of the NFT and the specific `tokenId`. For Solana, `tokenId` can be left blank. E.g.:

```csharp theme={null}
ParticleWalletGUI.NavigatorNFTDetails(contractAddress, tokenId);
```

### Open Buy Crypto

Particle Wallet also has a native onramp aggregator, allowing users to bring fiat on-chain through various onramp providers. Opening this programmatically can happen through `ParticleWalletGUI.NavigatorBuyCrypto`, passing in several optional parameters to customize the values used within the onramp. Upon calling, this will throw a popup or total redirect over to a corresponding configuration of [https://ramp.particle.network](https://ramp.particle.network).

The specific parameters that can be used within `ParticleWalletGUI.NavigatorBuyCrypto` are listed below:

| Field           | Type                    | Description                                                                                   |
| --------------- | ----------------------- | --------------------------------------------------------------------------------------------- |
| `WalletAddress` | `string?`               | (Optional) The wallet address to receive the cryptocurrency, default is current user address. |
| `ChainInfo`     | `ChainInfo?`            | (Optional) The chainInfo, default is current chainInfo.                                       |
| `CryptoCoin`    | `string?`               | (Optional) Cryptocurrency denomination. Default is current chain native token symbol.         |
| `FiatCoin`      | `String?`               | (Optional) Fiat currency denomination. Default is current fiat coin.                          |
| `FiatAmt`       | `int?`                  | (Optional) The amount of fiat to be automatically filled in as the purchase volume.           |
| `FixFiatCoin`   | `bool`                  | (Optional) Lock selection of fiat coin in the buy menu, default is false.                     |
| `FixCryptoCoin` | `bool`                  | (Optional) Lock selection of fiat amount in the buy menu, default is false.                   |
| `Theme`         | `Theme?`                | (Optional) The buy page theme, `Dark` or `Light`, default is false.                           |
| `Language`      | `Language?`             | (Optional) The buy page lanuage, default is current language.                                 |
| `modalStyle`    | `iOSModalPresentStyle?` | (Optional) Control iOS presentation style, default is `PageSheet`.                            |

```csharp theme={null}
BuyCryptoConfig config = new BuyCryptoConfig(TestAccount.EVM.PublicAddress,
                             OpenBuyNetwork.BinanceSmartChain, "BNB", "USD", 100);
ParticleWalletGUI.NavigatorBuyCrypto(config);

ParticleWalletGUI.NavigatorBuyCrypto();
```

### Open Swap

Additionally, Particle Wallet has a built-in swap functionality (retrieves multiple quotes from different providers such as 1inch, iZUMi, etc., routing the swap through the best one) for Mainnets (Solana and EVM). Throwing this menu can be done through `ParticleWalletGUI.NavigatorSwap`, which alone will open the default swap menu without values filled in, although you can pass in several optional parameters, including:

| Field              | Type                   | Description                                                                                                                                            |
| ------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `fromTokenAddress` | `string`               | (Optional) the swap pair from token address                                                                                                            |
| `toTokenAddress`   | `string`               | (Optional) the swap pair to token address                                                                                                              |
| `amount`           | `string`               | (Optional) the swap from token amount, should pass the minimal unit string, for example 0.01 ETH, it's decimals is 18, should pass "10000000000000000" |
| `modalStyle`       | `iOSModalPresentStyle` | (Optional) control iOS presentation style, default is `PageSheet`.                                                                                     |

E.g.:

```csharp theme={null}
ParticleWalletGUI.NavigatorSwap();

ParticleWalletGUI.NavigatorSwap(fromTokenAddress, toTokenAddress, fromTokenAmount);
```

### Switch Wallet

Finally, before opening the UI, if you'd like to switch the `WalletType` (`walletType` in this case) reflected and used within the wallet itself, you can use `ParticleWalletGUI.Instance.SwitchWallet`, passing in the specific `walletType` (see [Particle Connect iOS](https://particlenetwork.readme.io/reference/ios-swift) for more information) and targeted user address, `publicAddress`. E.g.:

```csharp theme={null}
var walletType = WalletType.MetaMask;
var nativeResultData = await ParticleWalletGUI.Instance.SwitchWallet(walletType, publicAddress);
```

***


# Introduction to On-Ramp
Source: https://developers.particle.network/wallet/on-ramp

D2C fiat-crypto exchanges on your platform

Particle Network offers integration with multiple on-ramp vendors, supporting a wide range of fiat currencies, chains, and cryptocurrencies.

## On-Ramp Overview

By integrating Particle's on-ramp solutions, you can:

* Enable users to purchase cryptocurrencies directly with fiat currency.
* Support a wide array of fiat currencies and cryptocurrencies.
* Provide a seamless onboarding process for new users, increasing engagement and retention.

## Supported Currencies

Particle supports a diverse range of fiat currencies and cryptocurrencies, ensuring broad compatibility with various payment methods.

* **[Supported Fiat Currencies](https://ramp.particle.network/supported_fiat.html)**
* **[Supported Cryptocurrencies](https://ramp.particle.network/supported_cryptocurrencies.html)**

### Live Demos

Explore live demos to see how Particle's On-Ramp solutions work in real-time:

* **[On-Ramp Demo](https://ramp.particle.network/)**
* **[Wallet Demo](https://wallet.particle.network/)**

<Note>Alternatively, access the On-Ramp page directly via the 'Buy' button in the wallet interface.</Note>

## SDK Integration

Integrating the on-ramp feature into your platform allows for extensive customization of the buy/sell experience. Below are the parameters you can use to tailor the user experience:

| Name            | Description                                                                  | Type    |
| --------------- | ---------------------------------------------------------------------------- | ------- |
| `network`       | Blockchain network to be used (e.g., Solana, Ethereum, Binance Smart Chain). | string  |
| `fiatCoin`      | The fiat currency the user wishes to use.                                    | string  |
| `cryptoCoin`    | The cryptocurrency the user wishes to buy or sell.                           | string  |
| `fiatAmt`       | The amount of fiat currency the user wants to spend (for buying crypto).     | number  |
| `cryptAmt`      | The amount of cryptocurrency the user wants to sell.                         | number  |
| `fixFiatCoin`   | Prevent the user from changing the fiat currency.                            | boolean |
| `fixCryptoCoin` | Prevent the user from changing the cryptocurrency.                           | boolean |
| `fixFiatAmt`    | Lock the fiat amount, preventing the user from changing it.                  | boolean |
| `walletAddress` | Wallet address where the purchased cryptocurrency should be sent.            | string  |
| `theme`         | Interface theme: `light` or `dark`.                                          | string  |
| `language`      | Language selection: `en`, `zh-CN`, `zh-TW`, `ja`, `ko`.                      | string  |

## Example usage

To integrate, simply pass the desired options into the SDKs API, or construct a URL with the corresponding parameters.

Below is an example of using the `openBuy` method from the `useAuthCore` hook (from [Particle Auth](/social-logins/auth/desktop-sdks/web)).

```tsx App.tsx theme={null}
  const { address } = useEthereum();
  const { openBuy } = useAuthCore();

  const handleOpenBuy = () => {
    // Example parameters for the buy page
    const options = {
      fiatCoin: "USD",
      fiatAmt: "29.99",
      cryptoCoin: "ETH",
      network: "Ethereum",
      theme: "dark",
      language: "en",
      walletAddress: address, // You can use any address, or leave blank to allow the user to choose
    };

    openBuy(options);
  };
```

### Build an On-Ramp URL

Alternatively, you can manually build a URL with the desired parameters to redirect users directly to the On-Ramp buy page.

```tsx App.tsx theme={null}
  // Parameters
  const fiatCoin = 'USD';
  const cryptoCoin = 'ETH';
  const network = 'Ethereum';
  const theme = 'dark';
  const language = 'en';

  // Function to handle the button click
  const handleOnRamp = () => {
    const onRampUrl = `https://ramp.particle.network/?fiatCoin=${fiatCoin}&cryptoCoin=${cryptoCoin}&network=${network}&theme=${theme}&language=${language}`;
    window.open(onRampUrl, '_blank');
  };
```