本頁面使用機器翻譯自英語，可能包含錯誤或不清楚的語言。如需最準確的信息，請參閱英文原文。由於更新頻繁，部分內容可能與英文原文有出入。請加入我們在 Crowdin 上的努力，幫助我們改進本頁面的翻譯。 (Crowdin translation page, Contributing guide)

將粒子網絡整合到 dApp 中

導言

粒子網絡提供錢包抽象服務，以簡化用戶入門。

粒子連接 SDK 支持與 EVM 兼容的鏈，包括 Kaia 及其測試網。它允許使用社交和 Web3 登錄選項進行 2 鍵登錄，所有操作都在一個模態中完成。

通過 Particle Network，Kaia 開發人員可以為 Kaia 主網和測試網嵌入社交登錄，讓用戶只需使用他們的谷歌、電子郵件、X 等信息就能在您的應用程序中生成和使用錢包。

本頁提供在基於 Kaia 的應用程序中實施 Particle Connect 的概述和教程，以幫助您開始集成過程。

先決條件

使用 TypeScript 和 Tailwind CSS 設置的 Next.js 項目
- 您可以運行： npx create-next-app@latest 來創建它。
來自 Particle Dashboard的項目 ID、客戶密鑰和應用程序 ID。

安裝

要在您的 dApp 中利用 Particle Network，特別是 Particle Connect，您首先需要安裝所需的庫。 Particle Connect SDK 通過一個界面簡化了錢包創建、用戶登錄和區塊鏈交互過程。它支持社交登錄和 Web3 登錄，便於訪問。

要安裝 SDK 以及 Viem（連接後臺）和 ethers（演示 EIP-1193 提供商），請運行


yarn add @particle-network/connectkit viem@^2 ethers

初始化粒子連接

首先，我們將設置 Particle Connect，這是 Particle 的旗艦認證 SDK。在項目根目錄下創建名為 ConnectKit.tsx 的新文件。該文件將容納 "ParticleConnectKit "組件，它是已配置的 "ConnectKitProvider "實例的包裝器，是配置 Particle Connect 的主要接口（我們稍後將以編程方式介紹）。

接下來，前往 Particle dashboard，創建一個新的網絡應用程序項目，並獲取以下必要的 API 密鑰：

projectId - 項目的唯一標識符。
clientKey - 客戶端特有的密鑰。
appId - 應用程序的 ID。

將這些 API 密鑰存儲在.env文件中，如下所示：


next_public_project_id='project_id'
next_public_client_key='client_key'
next_public_app_id='app_id'

現在，將以下代碼添加到您的 ConnectKit.tsx 文件中：


"use client";
import React from "react";
import { ConnectKitProvider, createConfig } from "@particle-network/connectkit";
import { authWalletConnectors } from "@particle-network/connectkit/auth";
import { defineChain } from "@particle-network/connectkit/chains";
import { wallet, EntryPosition } from "@particle-network/connectkit/wallet";
const kaiaMainnet = defineChain({
  id: 8217,
  name: "Kaia",
  nativeCurrency: {
    decimals: 18,
    name: "KAIA",
    symbol: "KAIA",
  },
  rpcUrls: {
    default: {
      http: ["https://public-en.node.kaia.io"],
    },
  },
  blockExplorers: {
    default: { name: "Explorer", url: "https://kaiascope.com/" },
  },
  testnet: false,
});
const kaiaTestnet = defineChain({
  id: 1001,
  name: "Kaia Testnet",
  nativeCurrency: {
    decimals: 18,
    name: "KAIA",
    symbol: "KAIA",
  },
  rpcUrls: {
    default: {
      http: ["https://public-en-kairos.node.kaia.io"],
    },
  },
  blockExplorers: {
    default: { name: "Explorer", url: "https://kairos.kaiascope.com/" },
  },
  testnet: true,
});
const config = createConfig({
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
  clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
  appId: process.env.NEXT_PUBLIC_APP_ID!,
  walletConnectors: [authWalletConnectors({})],
  plugins: [
    wallet({
      entryPosition: EntryPosition.BR, // Positions the modal button at the bottom right on login
      visible: true, // Determines if the wallet modal is displayed
    }),
  ],
  chains: [kaiaMainnet, kaiaTestnet],
});
export const ParticleConnectkit = ({ children }: React.PropsWithChildren) => {
  return <ConnectKitProvider config={config}>{children}</ConnectKitProvider>;
};

該組件的幾乎所有屬性都可以配置，從支持的不同登錄類型到模態的視覺外觀；要探索這些不同的選項，請訪問 Particle 文檔。

將 Particle Connect 集成到您的應用程序中

配置完成後，用 "ParticleConnectKit "組件封裝您的應用程序，以啟用對 Particle Connect SDK 的全局訪問。要做到這一點，請對 src 目錄中的 layout.tsx 文件作如下修改：


import { ParticleConnectkit } from '@/connectkit';
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,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ParticleConnectkit>{children}</ParticleConnectkit>
      </body>
    </html>
  );
}

連接錢包

設置好 "layout.tsx "文件後，就可以通過中央連接錢包按鈕連接用戶了。您可以從 @particle-network/connectkit 中導入 ConnectButton 來實現這一功能。一旦用戶登錄，"連接按鈕 "就會變成一個嵌入式部件。


import { ConnectButton, useAccount } from '@particle-network/connectkit';
export const App = () => {
    const { address, isConnected, chainId } = useAccount();
    // Standard ConnectButton utilization
    return (
        <div>
            <ConnectButton />
            {isConnected && (
                <>
                    <h2>Address: {address}</h2>
                    <h2>Chain ID: {chainId}</h2>
                </>
            )}
        </div>
    );
};

獲取賬戶和餘額

通過 ConnectButton 組件成功連接錢包（或社交登錄）後，就可以檢索用戶的相關 Kaia 地址。此外，您還可以通過 "publicClient"（利用 Particle Connect 已設置的 Viem 提供商）檢索其當前餘額（以 KAIA 為單位）。


"use client";
import { useState, useEffect } from "react";
import {
  ConnectButton,
  useAccount,
  usePublicClient,
} from "@particle-network/connectkit";
import { formatEther } from "viem";
export default function Home() {
  // Account-related states
  const { isConnected, address, chain } = useAccount();
  const publicClient = usePublicClient();
  // State variable for balance
  const [balance, setBalance] = useState<string>("");
  // Fetch and display user balance when connected
  useEffect(() => {
    const fetchBalance = async () => {
      if (address) {
        try {
          const balanceResponse = await publicClient.getBalance({ address });
          const balanceInEther = formatEther(balanceResponse);
          setBalance(balanceInEther);
        } catch (error) {
          console.error("Error fetching balance:", error);
        }
      }
    };
    if (isConnected) {
      fetchBalance();
    }
  }, [isConnected, address, publicClient]);
  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-8 bg-black text-white">
      <ConnectButton label="Connect Wallet" />
      {isConnected && (
        <div className="w-full max-w-md mt-6">
          <h2 className="text-xl font-bold text-white mb-4">Account Details</h2>
          <p className="text-lg text-white">
            Address: {address || "Loading..."}
          </p>
          <p className="text-lg text-white">
            Balance: {balance || "Loading..."} {chain?.nativeCurrency.symbol}
          </p>
        </div>
      )}
    </div>
  );
}

斷開錢包連接

用戶登錄後，可以通過源自 useDisconnect 的 disconnect 以編程方式強制註銷。這將斷開當前活動會話與 dApp 的連接，使用戶返回初始狀態。


import { useDisconnect } from "@particle-network/connectkit";
const { disconnect } = useDisconnect();
// Inside your component's JSX
<button
  className="mt-4 w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
  onClick={disconnect}
>
  Disconnect
</button>

獲取用戶信息

當用戶通過社交賬戶連接時，可以使用 useParticleAuth() 鉤子訪問 userinfo，其中包括用戶的連接方式、賬戶創建日期、姓名、電子郵件和其他來自 Particle Auth 的相關信息。


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>;
};

發送本地事務

Particle Connect 允許您利用現有的 EIP-1193 提供商，在本例中，我們創建了一個帶有 ethers 的提供商實例來發送轉賬交易。


import { useWallets } from "@particle-network/connectkit";
import { ethers, type Eip1193Provider } from "ethers";
const [primaryWallet] = useWallets();
const executeTransaction = async () => {
    // Get the provider from the primary wallet's connector
    const EOAprovider = await primaryWallet.connector.getProvider();
    // Initialize a custom provider using ethers.js with the obtained EIP-1193 provider
    const customProvider = new ethers.BrowserProvider(EOAprovider as Eip1193Provider, "any");
    // Get the signer (an abstraction of the account that can sign transactions)
    const signer = await customProvider.getSigner();
    // Send a transaction with specified recipient address, amount (0.01 ETH), and empty data
    await signer.sendTransaction({
      to: recipientAddress,             
      value: parseEther("0.01"),        
      data: "0x",                       
    });
};

下一步工作

您可以在 Particle Connect 文檔中找到可用鉤子的完整列表。

有關 Particle Network（Particle Connect、Particle Auth 和其他 SDK）的其他指南，請參閱 Particle Network 文檔和 Particle Network GitHub 賬戶。此外，您還可以訪問 Particle Network 博客瞭解有關 Particle Network 服務、即將發佈的版本和技術棧的更多信息。

導言​

先決條件​

安裝​

初始化粒子連接​

將 Particle Connect 集成到您的應用程序中​

連接錢包​

獲取賬戶和餘額​

斷開錢包連接​

獲取用戶信息​

發送本地事務​

下一步工作​

導言