### Install Dependencies and Run Development Server

Source: https://developers.particle.network/universal-accounts/cha/how-to/ua-magic

This snippet demonstrates the commands to install project dependencies using npm and then start the development server. After running these commands, you can access the demo application via http://localhost:3000.

```bash
npm install
npm run dev
```

--------------------------------

### Install Particle Auth Dependencies (npm)

Source: https://developers.particle.network/social-logins/auth/quickstart/web-quickstart

Installs the necessary Particle Auth SDK packages and the viem library using npm. This command adds '@particle-network/authkit', '@particle-network/wallet', and 'viem@2' to your project's dependencies.

```bash
npm install @particle-network/authkit @particle-network/wallet viem@2
```

--------------------------------

### Clone Quickstart Repository

Source: https://developers.particle.network/universal-accounts/cha/web-quickstart

Clones the demo application repository to get started with Universal Accounts integration.

```bash
git clone https://github.com/particle-network/universal-accounts-quickstart.git
```

--------------------------------

### Install Particle Web AA SDK

Source: https://developers.particle.network/aa/quickstart/web-aa

Installs the Particle Web AA SDK package for your project. This SDK simplifies the integration of account abstraction features into web applications.

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

```npm
npm install @particle-network/aa
```

--------------------------------

### Install Particle Auth Dependencies (Yarn)

Source: https://developers.particle.network/social-logins/auth/quickstart/web-quickstart

Installs the necessary Particle Auth SDK packages and the viem library using Yarn. This command adds '@particle-network/authkit', '@particle-network/wallet', and 'viem@2' to your project's dependencies.

```bash
yarn add @particle-network/authkit @particle-network/wallet viem@2
```

--------------------------------

### Install Particle Connect SDK for Flutter

Source: https://developers.particle.network/social-logins/connect/quickstart/flutter-quickstart

This command adds the `particle_connect` package to your Flutter project. Ensure you run this before proceeding to platform-specific configurations.

```shell
flutter pub add particle_connect
```

--------------------------------

### Frontend Project Setup Commands

Source: https://developers.particle.network/social-logins/configuration/auth/jwt

These shell commands guide the user through setting up and running the frontend of the Particle Auth application. It includes navigating to the project directory, installing dependencies, and starting the development server.

```shell
cd particle-auth-frontend
npm i
npm run dev
```

--------------------------------

### Install Particle Auth Core SDK for Flutter

Source: https://developers.particle.network/social-logins/auth/quickstart/flutter-quickstart

This command adds the primary Particle Auth SDK, `particle_auth_core`, to your Flutter project. This is a prerequisite for platform-specific configurations and initialization.

```shell
flutter pub add particle_auth_core
```

--------------------------------

### Installation

Source: https://developers.particle.network/aa/sdks

Instructions for installing the Particle AA SDK packages into your project using yarn or npm.

```APIDOC
## Installation

Install the SDK in your project:

### Yarn
```bash
yarn add @particle-network/aa
```

### NPM
```bash
npm install @particle-network/aa
```
```

--------------------------------

### Initialize Particle Connect via npm/pnpm/yarn

Source: https://developers.particle.network/social-logins/connect/quickstart/web-quickstart

These commands are used to initialize the Particle Connect boilerplate in your project, setting up the necessary file structure and initial code for integrating Particle Network's services. This is the recommended first step for getting started quickly.

```bash
npm init @particle-network/connectkit@latest
# or
pnpm create @particle-network/connectkit@latest
# or
yarn create @particle-network/connectkit
```

--------------------------------

### Run Pod Install and Open Workspace

Source: https://developers.particle.network/social-logins/auth/mobile-sdks/unity

These are terminal commands necessary after updating your Podfile. `pod install --repo-update` fetches and installs all the specified CocoaPods dependencies, ensuring your project has the required libraries. `open {your project}.xcworkspace` opens the generated workspace file, which is the correct entry point for development after integrating pods.

```bash
pod install --repo-update

open {your project}.xcworkspace
```

--------------------------------

### Install Universal Account SDK with Ethers

Source: https://developers.particle.network/universal-accounts/cha/how-to/deposit-flow

Installs the necessary SDKs for integrating Universal Accounts with your project. This command installs the ethers library and the Particle Network Universal Account SDK.

```bash
npm install ethers @particle-network/universal-account-sdk
```

--------------------------------

### Node Example

Source: https://developers.particle.network/aa/sdks

Example of using the AA SDK with Viem in a Node.js environment to send a transaction via a smart account.

```APIDOC
## Node Example

### Description
This example demonstrates how to set up and use the AA SDK in a Node.js environment with Viem. It covers creating a public client, a wallet client from a private key, exposing the owner wallet as an EIP-1193 provider, initializing the Smart Account, wrapping transactions with `AAWrapProvider`, and sending a transaction through the AA wallet client.

### Method
N/A (This is a conceptual code example for backend integration)

### Endpoint
N/A

### Parameters

#### Environment Variables
- **RPC_URL** (string) - Required - The RPC endpoint URL for the desired chain.
- **PARTICLE_PROJECT_ID** (string) - Required - Your Particle Network Project ID.
- **PARTICLE_CLIENT_KEY** (string) - Required - Your Particle Network Client Key.
- **PARTICLE_APP_ID** (string) - Required - Your Particle Network App ID.
- **EOA_PRIVATE_KEY** (string) - Required - The private key (hex string) of the server-owned EOA.

### Request Example

```javascript
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);
```

### Response

#### Success Response (Console Output)
- **txHash** (string) - The transaction hash of the sent UserOperation.

#### Response Example

```
sent via AA: 0x...
```
```

--------------------------------

### Install Pods and Open Workspace

Source: https://developers.particle.network/social-logins/connect/mobile/ios

Installs all declared dependencies from the Podfile and updates the repository. It then opens the project's workspace file, which is necessary for using the integrated libraries.

```shell
pod install --repo-update
open your-project.xcworkspace
```

--------------------------------

### Install Particle AA SDK using Yarn

Source: https://developers.particle.network/aa/sdks

This command installs the Particle Network AA SDK package using Yarn. Ensure you have Yarn installed and configured in your project.

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

```

--------------------------------

### Install Particle Wallet SDK using CocoaPods

Source: https://developers.particle.network/wallet/mobile/ios

Instructions for installing Particle Wallet SDK components (`ParticleWalletAPI`, `ParticleWalletGUI`, `ParticleWalletConnect`) into an iOS project using CocoaPods. This involves creating a Podfile, adding the specified pods, and then running the install command.

```ruby
pod 'ParticleWalletAPI'
pod 'ParticleWalletGUI'
pod 'ParticleWalletConnect'
```

--------------------------------

### Install Particle Wallet using Yarn or npm

Source: https://developers.particle.network/wallet/desktop/web

This snippet shows how to install the `@particle-network/wallet` library using either the Yarn or npm package managers. This is the first step in integrating Particle Wallet into a web application.

```shell
yarn add @particle-network/wallet

# OR

npm install @particle-network/wallet
```

--------------------------------

### Install Particle AA SDK (npm)

Source: https://developers.particle.network/aa/quickstart

Installs the Particle Network AA SDK using npm, a package manager for Node.js. This is a prerequisite for enabling account abstraction features in your web application.

```bash
npm install @particle-network/aa
```

--------------------------------

### Install Particle Auth SDK for Web Applications

Source: https://developers.particle.network/social-logins/auth/desktop-sdks/web

Instructions for adding the Particle Auth SDK and its dependency (viem) to a project using npm or yarn. Ensure you install 'viem@2' as it's a required peer dependency.

```shell
npm install @particle-network/authkit viem@2

yarn add @particle-network/authkit viem@2
```

--------------------------------

### Send Gasless Transaction with Ethers.js

Source: https://developers.particle.network/aa/quickstart/web-aa

This function demonstrates sending a gasless transaction using ethers.js and Particle Network's provider. It creates an ethers provider, gets a signer, defines a transaction object, sends the transaction, and logs the receipt. Ensure you have the necessary libraries installed.

```typescript
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);
};
```

--------------------------------

### Clone and Navigate Repository

Source: https://developers.particle.network/universal-accounts/cha/how-to/ua-magic

This snippet shows how to clone the demo repository from GitHub and navigate into its directory. It's the first step to setting up the local development environment.

```bash
git clone https://github.com/Particle-Network/universal-accounts-magic-wallet-api
cd universal-accounts-magic-wallet-api
```

--------------------------------

### Initialization

Source: https://developers.particle.network/aa/sdks

Code example demonstrating how to initialize the Smart Account instance using the AA SDK, including provider and configuration options.

```APIDOC
## 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.

```javascript
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](https://docs.particle.network/aa-sdk/network-coverage).
```

--------------------------------

### Integrate and Control Embedded Wallet Widget using React Hooks

Source: https://developers.particle.network/social-logins/connect/desktop/web

This TSX code example shows how to use the `useEmbeddedWallet` hook from Particle Connect in a React application to get a reference to the embedded wallet widget. It demonstrates how to obtain the wallet iframe and provides an example of listening for the `PARTICLE_WALLET_CLOSE_IFRAME` event to manage the widget's visibility.

```tsx
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
);
```

--------------------------------

### Particle Network CLI Project Initialization

Source: https://developers.particle.network/social-logins/connect/quickstart/web-quickstart

This snippet demonstrates the interactive CLI prompts for setting up a new project with Particle Network. It covers project naming, template selection (Next.js or React), chain support, ERC-4337 contract choice, and embedded wallet options.

```shell
🤩 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
```

--------------------------------

### Initialize Particle Connect and Auth Core SDKs (Dart)

Source: https://developers.particle.network/social-logins/connect/quickstart/flutter-quickstart

This Dart code demonstrates how to initialize the Particle Connect and Particle Auth Core SDKs. It requires `DappMetaData` containing information about your dApp and specifies the primary chain and environment for the SDKs.

```dart
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();
```

--------------------------------

### Project Setup

Source: https://developers.particle.network/aa/sdks

Steps to retrieve Particle project credentials (project ID, client key, app ID) from the Particle Dashboard for SDK configuration.

```APIDOC
## Project Setup

The AA SDK requires Particle project credentials from the Particle Dashboard. To retrieve those values for configuration within your application, follow these steps:

1. Access the Particle Dashboard.
2. Sign up or Log in into the Particle dashboard.
3. Create a new project or enter an existing project.
4. Create a new web application, or skip this step if you already have one.
5. Retrieve the project credentials (project ID, client key, app ID).
```

--------------------------------

### Send Transaction with Particle Network SDK in Dart

Source: https://developers.particle.network/social-logins/connect/quickstart/flutter-quickstart

Guides through creating and sending an EVM transaction. It involves using EvmService.createTransaction with sender, receiver, value, and data, then signing and sending it via ParticleConnect.signAndSendTransaction.

```dart
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);
```

--------------------------------

### Cross-Chain Transaction with Universal Account

Source: https://developers.particle.network/universal-accounts/cha/how-to/ua-magic

This example illustrates how to create and send a cross-chain transaction using the Universal Account SDK. It shows how to specify the target chain, define transactions, get a signature from the owner wallet (Magic's wallet in this case), and then send the transaction for execution.

```APIDOC
## Create and Send Universal Transaction

### Description
Creates a cross-chain transaction using the Universal Account SDK and sends it for execution. The process involves defining the transaction details, obtaining a signature from the owner's wallet, and submitting the signed transaction.

### Method
SDK Methods

### Endpoint
N/A (SDK Methods)

### Parameters
#### `createUniversalTransaction` Parameters
- **chainId** (number) - Required - The target chain ID (e.g., `CHAIN_ID.AVALANCHE_MAINNET`).
- **transactions** (Array<object>) - Required - An array of transaction objects, each with `to` and `data` fields.
  - **to** (string) - The recipient address.
  - **data** (string) - The encoded transaction data.

#### `sendTransaction` Parameters
- **transaction** (object) - Required - The transaction object returned by `createUniversalTransaction`.
- **signature** (string) - Required - The signature obtained from signing the transaction's root hash.

### Request Example
```javascript
import { CHAIN_ID } from '@particle-network/chains';
// Assuming 'universalAccount' is an initialized UniversalAccount instance
// Assuming 'ethereumService' has a 'personalSign' method
// Assuming 'contractInterface' is an ethers.js contract interface instance

const CONTRACT_ADDRESS = "0x...";

// Create the transaction
const transaction = await universalAccount.createUniversalTransaction({
  chainId: CHAIN_ID.AVALANCHE_MAINNET,
  transactions: [
    {
      to: CONTRACT_ADDRESS,
      data: contractInterface.encodeFunctionData("mint"),
    },
  ],
});

// Sign the transaction root hash using the owner's wallet (e.g., Magic's wallet)
const signature = await ethereumService.personalSign(transaction.rootHash);

// Send the transaction
const result = await universalAccount.sendTransaction(
  transaction,
  signature.signature
);

console.log("Transaction Result:", result);
```

### Response
#### Success Response (200)
- **result** (object) - Details of the transaction execution.

#### Response Example
```json
{
  "result": "..."
}
```

### Key Learnings
* The Magic wallet signs the transaction.
* Universal Accounts handle routing, execution, and cross-chain liquidity automatically.
* Users interact with a single balance, regardless of the underlying network.
```

--------------------------------

### Configure AuthCoreContextProvider for Particle Auth

Source: https://developers.particle.network/social-logins/auth/quickstart/web-quickstart

Sets up the `AuthCoreContextProvider` component from `@particle-network/authkit` to initialize Particle Auth. This component requires `projectId`, `clientKey`, and `appId`. It's recommended to place this configuration in a dedicated file (e.g., `AuthKit.tsx`).

```tsx
import React from 'react';
import {
  AuthCoreContextProvider,
  AuthCoreContextProviderProps
} from '@particle-network/authkit';

const AuthKit = ({
  children
}: {
  children: React.ReactNode;
}) => {
  const authConfig: AuthCoreContextProviderProps = {
    projectId: 'YOUR_PROJECT_ID',
    clientKey: 'YOUR_CLIENT_KEY',
    appId: 'YOUR_APP_ID',
    // Add other configuration options as needed
  };

  return (
    <AuthCoreContextProvider {...authConfig}>
      {children}
    </AuthCoreContextProvider>
  );
};

export default AuthKit;

```

--------------------------------

### Implement Custom Coin98 WalletConnect Adapter in Kotlin

Source: https://developers.particle.network/social-logins/connect/mobile/android

Create a custom WalletConnect adapter by extending `BaseWalletConnectAdapter`. This Kotlin example demonstrates implementing a `Coin98ConnectAdapter`, defining its name, icon, URL, mobile wallet details, and readiness state based on app installation and supported chains.

```kotlin
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
      }
}
```

--------------------------------

### Retrieve User Information in Dart

Source: https://developers.particle.network/social-logins/connect/quickstart/flutter-quickstart

Demonstrates how to get basic account details like public address and wallet type after a connection. It also shows how to fetch detailed user information using ParticleAuthCore.getUserInfo if the wallet type is 'authCore'.

```dart
final publicAddress = account.publicAddress
final walletType = account.walletType

if (walletType.toLowerCase() == "authCore") {
  final userInfo = await ParticleAuthCore.getUserInfo();
}
```

--------------------------------

### ParticleSystem Initialization

Source: https://developers.particle.network/social-logins/auth/desktop-sdks/unity

Initializes the ParticleSystem with configuration, theme, language, and chain details.

```APIDOC
## POST /sdk/init

### Description
Initializes the ParticleSystem. This method must be called before using other ParticleSystem methods.

### Method
POST

### Endpoint
`/sdk/init`

### Parameters
#### Request Body
- **config** (object) - Required - Configuration object for the SDK.
- **theme** (object) - Optional - Theme customization object.
- **language** (string) - Optional - Language code for the SDK UI (e.g., 'en', 'es').
- **chainName** (string) - Required - The name of the blockchain to connect to (e.g., 'ethereum', 'solana').
- **chainId** (number) - Required - The chain ID of the blockchain to connect to.

### Request Example
```json
{
  "config": {
    "projectId": "YOUR_PROJECT_ID",
    "clientKey": "YOUR_CLIENT_KEY"
  },
  "theme": {},
  "language": "en",
  "chainName": "ethereum",
  "chainId": 1
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the initialization status.

#### Response Example
```json
{
  "status": "initialized"
}
```
```

--------------------------------

### Configure and Open Particle Connect Modal (Dart)

Source: https://developers.particle.network/social-logins/connect/quickstart/flutter-quickstart

This Dart code shows how to configure and launch the Particle Connect modal for user onboarding. It allows customization of connection options, social login providers, and wallet providers, enabling a tailored user experience.

```dart
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,

```

--------------------------------

### React Component for Universal Accounts Quickstart UI

Source: https://developers.particle.network/universal-accounts/cha/web-quickstart

This React component serves as the UI for the Universal Accounts quickstart guide. It displays a header, a login button when the user is not connected, and connection status details including the owner address and universal account addresses (EVM and Solana) once connected. It also shows the aggregated balance of primary assets. This component relies on React hooks and state management for connection status and account information, and uses Tailwind CSS for styling.

```jsx
  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>

```

--------------------------------

### Run Development Server (Yarn/NPM)

Source: https://developers.particle.network/universal-accounts/cha/web-quickstart

Starts the development server for the demo application using Yarn or NPM.

```bash
yarn dev
```

```bash
npm run dev
```

--------------------------------

### Display Estimated Transaction Fees (TypeScript)

Source: https://developers.particle.network/universal-accounts/cha/how-to/tx-preview

Shows how to extract and display estimated fee details from a transaction object created by the Universal Accounts SDK. It accesses the `feeQuotes` and `totals` properties to get the total, gas, service, and LP fees in USD. The example uses `formatUnits` from `ethers.js` for currency formatting.

```typescript
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.transactionLPFeeAmountInUSD, 18)}`);

```

--------------------------------

### Configure and Initiate Particle Connect Modal (Swift)

Source: https://developers.particle.network/social-logins/connect/quickstart/ios-quickstart

This snippet demonstrates how to configure Particle Connect by specifying onboarding mechanisms, social login providers, and wallet options. It then uses `ParticleConnectUI.connect` to launch the connection modal and returns the account information upon successful connection.

```swift
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
```

--------------------------------

### View Demo Repository (HTML)

Source: https://developers.particle.network/universal-accounts/cha/web-quickstart

Provides a link to the GitHub repository where the code for this demo is hosted. This allows users to explore the implementation details and contribute.

```html
<a href="https://github.com/particle-network/universal-accounts-quickstart" target="_blank" rel="noopener noreferrer" class="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>
```

--------------------------------

### Install Particle Auth SDK using CocoaPods

Source: https://developers.particle.network/social-logins/auth/mobile-sdks/ios

Steps to install the Particle Auth SDK using CocoaPods. This involves creating a Podfile, adding the necessary pods, and running the install command.

```shell
pod init
pod 'ParticleAuthCore'
pod 'ParticleMPCCore'
pod 'Thresh'
pod install --repo-update
open your-project.xcworkspace
```

--------------------------------

### Get Connected Accounts

Source: https://developers.particle.network/social-logins/connect/mobile/android

Get a list of all currently connected accounts/addresses for a specific chain type ('evm' or 'solana').

```APIDOC
## ParticleConnect.getAccounts

### Description
Retrieves a list of all currently connected accounts for a specified chain type.

### Method
`getAccounts`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **chainType** (string) - Required - The type of chain ('evm' or 'solana').

### Request Example
```kotlin
val accounts = ParticleConnect.getAccounts(chainType)
```

### Response
#### Success Response (200)
- **accounts** (List<String>) - A list of connected account addresses.

#### Response Example
```json
{
  "accounts": [
    "0x123...abc",
    "0xdef...456"
  ]
}
```
```

--------------------------------

### Install Particle Auth Libraries (Ruby)

Source: https://developers.particle.network/social-logins/auth/quickstart/ios-quickstart

This snippet shows how to add the required Particle Auth libraries to your Podfile. It includes core components like ParticleAuthCore and ParticleMPCCore, along with optional libraries for wallet API and GUI functionalities.

```ruby
pod `ParticleAuthCore`
pod 'ParticleMPCCore'
pod 'Thresh'

pod 'ParticleWalletAPI' # Optional
pod `ParticleWalletGUI` # Optional
```

--------------------------------

### Configure Xcode Info.plist for Wallets and Permissions

Source: https://developers.particle.network/social-logins/connect/quickstart/ios-quickstart

This XML snippet demonstrates the necessary configurations within your Xcode project's `Info.plist` file. It includes `LSApplicationQueriesSchemes` to specify supported wallets and descriptions for various permissions like photo library, camera, and Face ID access, which are crucial for SDK functionality.

```xml
<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>
```

--------------------------------

### Initialize Particle Auth SDK (Dart)

Source: https://developers.particle.network/social-logins/auth/quickstart/flutter-quickstart

Initialize the Particle Auth SDK by setting your project ID and client key, then calling the init method with the desired chain and environment. This prepares the SDK for use.

```dart
// 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()
```

--------------------------------

### Example of a Real JWT

Source: https://developers.particle.network/social-logins/configuration/auth/jwt

A complete example of a JWT, demonstrating the encoded header, payload, and signature concatenated together.

```text
eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyLW51bWJlci0yMCIsImlzcyI6Im15LXNlcnZpY2UtbmV3IiwiYXVkIjoibXlhcHBuZXcuY29tIiwiaWF0IjoxNjI4MjM5MDIyfQ.HMEk6j5RA-4TCJQtx8aLMAMlm9bWyG4Vi0m2d3Vkl5k
```

--------------------------------

### Install Webpack 5 Polyfills for React App (Shell)

Source: https://developers.particle.network/social-logins/connect/faq

Installs necessary polyfill modules for Webpack 5 when using `create-react-app` to resolve NodeJS polyfill errors. This involves installing `react-app-rewired` and several browser-compatible polyfill packages. Use either Yarn or NPM based on your project's package manager.

```sh
yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process vm-browserify browserify-zlib

```

```sh
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

```

--------------------------------

### Install Dependencies (Yarn/NPM)

Source: https://developers.particle.network/universal-accounts/cha/web-quickstart

Installs project dependencies using either Yarn or NPM package managers.

```bash
yarn install
```

```bash
npm install
```

--------------------------------

### Specify Static Framework Build Setting (Podfile)

Source: https://developers.particle.network/social-logins/auth/quickstart/flutter-quickstart

Configure your Podfile to specify that you are using a static framework. This is required when using the Particle Auth Flutter SDK, as it is a static library (XCFramework).

```ruby
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
```

--------------------------------

### Initialize Particle Connect SDK with Adapters

Source: https://developers.particle.network/social-logins/connect/quickstart/ios-quickstart

This Swift code initializes the Particle Connect SDK. It defines an array of `ConnectAdapter` objects for various wallets and then calls `ParticleConnect.initialize` with the environment, chain information, dApp data, and the configured adapters. It also includes optional initialization for Particle Wallet GUI and setting WalletConnect V2 supported chains.

```swift
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])
```

--------------------------------

### GET /getPrice

Source: https://developers.particle.network/social-logins/auth/mobile-sdks/flutter

Retrieves the price of specific tokens in the specified currencies. This is used to get the current market value of tokens.

```APIDOC
## GET /getPrice

### Description
Retrieves the price of specific tokens.

### Method
GET

### Endpoint
/getPrice

### Parameters
#### Query Parameters
- **tokenAddresses** (List<String>) - Required - The tokens's addresses, for native token, you can pass "native"
- **currencies** (List<String>) - Required - The price unity, such as "usd"

### Request Example
{
  "tokenAddresses": ["string"],
  "currencies": ["usd"]
}

### Response
#### Success Response (200)
- **prices** (object) - Token prices

#### Response Example
{
  "prices": {
    "token_address": {
      "usd": 1.0
    }
  }
}
```