Particle Network를 dApp에 통합하기
소개
Particle Network's Wallet Abstraction services enable universal, Web2-adjacent onboarding and interactions. Its core technology, Smart Wallet-as-a-Service (WaaS) aims to onboard users into MPC-secured smart accounts supporting any chain. It also allows developers to offer an improved user experience through modular, fully customizable EOA/AA embedded wallets. Particle supports its Smart Wallet-as-a-Service through a Modular L1 powering chain abstraction, acting as a settlement layer across chains for a seamless multi-chain experience.
개발자는 모바일과 데스크톱 플랫폼 모두에서 사용할 수 있는 API와 SDK를 통해 다양한 시나리오에 걸쳐 Particle의 서비스형 월렛을 통합할 수 있으며, 특정 애플리케이션의 특정 요구 사항에 맞는 방식으로 맞춤화 및 구현할 수 있습니다.
To leverage Particle Network on alternative platforms, such as Android, iOS, React Native, Flutter, & Unity, kindly refer to Particle’s documentation.
전제 조건
- 실행 중인 리액트 프로젝트(
npx create-react-app project-name
을 실행하여). - Particle 대시보드의 프로젝트 ID, 클라이언트 키, 앱 ID.
- WalletConnect 대시보드의 WalletConnect 프로젝트 ID.
설치
디앱에서 Particle Network, 특히 Particle 커넥트를 활용하려면 먼저 필요한 라이브러리를 설치해야 합니다. 이 외에도 ethers.js 또는 web3.js와 같은 표준 Web3 라이브러리를 사용하려면 테마도 설치해야 합니다. 이 가이드에서는 ethers.js를 사용하겠습니다.
npm install --save @particle-network/connectkitnpm install --save @particle-network/chainsnpm install --save @particle-network/connectorsnpm install --save ethers
Particle 커넥트 초기화
앞서 언급한 라이브러리를 성공적으로 설치했다면, index.js
(또는 .ts
) 파일로 이동하여 Particle 커넥트를 구성해야 합니다. 이를 위해서는 App
컴포넌트를 ModalProvider
(@particle-network/connectkit
에서 임포트)로 래핑하고 아래에 설명된 파라미터가 포함된 옵션
을 전달해야 합니다.
import { ModalProvider } from '@particle-network/connectkit';import { Klaytn, KlaytnTestnet } from '@particle-network/chains';import { evmWallets } from '@particle-network/connectors';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);root.render( <React.StrictMode> <ModalProvider options={{ projectId: 'replace with your projectId', clientKey: 'replace with your clientKey', appId: 'replace with your appId', chains: [ KlaytnTestnet, Klaytn ], wallet: { // optional: Wallet modal configuration visible: true, // Display wallet modal supportChains:[ KlaytnTestnet, Klaytn ], customStyle: {}, // optional: Custom wallet style }, promptSettingConfig: { // optional: particle security account config // Prompt to set payment password upon social login. 0: None, 1: Once(default), 2: Always promptPaymentPasswordSettingWhenSign: 1, // Prompt to set master password upon social login. 0: None(default), 1: Once, 2: Always promptMasterPasswordSettingWhenLogin: 1 }, connectors: evmWallets({ projectId: 'replace with your walletconnect projectId', showQrModal: false }), }} theme={'light'} language={'en'} // optional:Local language setting, default en walletSort={['Particle Auth', 'Wallet']} // optional:Order of wallet categories > <App /> </ModalProvider> </React.StrictMode>);