It is strongly discouraged to use private key or mnemonic import/generate function, if you use it, you need to secure the data yourself, Particle's SDK has no relationship with the imported/generated mnemonic or private key.
Quick Start
Step 1: Install Connect SDK.
# react connect kityarnadd@particle-network/connect-react-ui# optional: if you only use connect interface, also support vueyarnadd@particle-network/connect
Step 2: Init Connect SDK.
import { ModalProvider } from'@particle-network/connect-react-ui';import { WalletEntryPosition } from'@particle-network/auth';import { Ethereum, EthereumGoerli } from'@particle-network/chains';import { evmWallets } from'@particle-network/connect';// use react kitconstroot=ReactDOM.createRoot(document.getElementById('root') asHTMLElement);root.render(<React.StrictMode><ModalProvider options={{ projectId:'replace with your projectId', clientKey:'replace with your clientKey', appId:'replace with your appId', chains: [ Ethereum, EthereumGoerli ], particleWalletEntry: { //optional: particle wallet config displayWalletEntry:true,//display wallet button when connect particle success. defaultWalletEntryPosition:WalletEntryPosition.BR, supportChains:[ Ethereum, EthereumGoerli ], customStyle: {},//optional: custom wallet style }, securityAccount: { //optional: particle security account config//prompt set payment password. 0: None, 1: Once(default), 2: Always promptSettingWhenSign:1,//prompt set master password. 0: None(default), 1: Once, 2: Always promptMasterPasswordSettingWhenLogin:1 }, wallets:evmWallets({ projectId:'walletconnect projectId',//replace with walletconnect projectId showQrModal:false }), }} theme={'auto'} language={'en'} //optional:localize, default en walletSort={['Particle Auth','Wallet']} //optional:walelt order particleAuthSort={[ //optional:display particle auth items and order'email','phone','google','apple','facebook' ]} > <App /> </ModalProvider> </React.StrictMode>);
Step3: Add the connect button
Then, in your app, import and render the ConnectButton component.
import'@particle-network/connect-react-ui/dist/index.css';import { ConnectButton } from'@particle-network/connect-react-ui';exportconstApp= () => {return <ConnectButton />;};// if you want to custom connet button, you can use ConnectButton.Custom.exportconstApp= () => {return (<ConnectButton.Custom> {({ account, chain, openAccountModal, openConnectModal, openChainModal, accountLoading }) => {return ( <div> <button onClick={openConnectModal} disabled={!!account}> Open Connect </button> <br /> <br /> <button onClick={openAccountModal} disabled={!account}> Open Account </button> <br /> <br /> <button onClick={openChainModal} disabled={!account}> Open Switch Network </button> <div> <h3>account</h3> <p>{account}</p> </div> </div> ); }}</ConnectButton.Custom> );};
If user connect wallet success, automatic connect next time.
import { useAccount } from'@particle-network/connect-react-ui';//use this in react component.constaccount=useAccount();if (account) {// connect wallet success}
Custom Wallet Style
When "displayWalletEntry" true, you can custom wallet style by set "customStyle" config, refer to Custom Wallet Style
Open Particle Web Wallet
If you connect with Particle Network, you can open wallet in new window.
import { useConnectKit } from'@particle-network/connect-react-ui';//use this in react component.constconnectKit=useConnectKit();// To set target and features for custom window style, same as window.open().connectKit.particle.openWallet(target?: string, features?: string);//open wallet in custom iframe.consturl=connectKit.particle.buildWalletUrl({//optional: left top menu style, close or fullscreen//"fullscreen": wallet will be fullscreen when user click.//"close": developer need handle click event topMenuType:"close"});constiframe=document.createElement("iframe");iframe.src = url;//if topMenuType is "close"window.addEventListener("message", (event) => {if (event.data ==="PARTICLE_WALLET_CLOSE_IFRAME") {//close click event }})
Open Crypto Token Buy
If you connect with Particle Network, you can open the Buy Tokens page.
import { useConnectKit } from'@particle-network/connect-react-ui';//use this in react component.constconnectKit=useConnectKit();// To set target and features for custom window style, same as window.open().connectKit.particle.openBuy(options?: OpenBuyOptions, target?: string, features?: string)
Get User Info
If you connect with Particle Network, you can get user info by below interface.
import { useConnectKit } from'@particle-network/connect-react-ui';//use this in react component.constconnectKit=useConnectKit();constuserInfo=connectKit.particle.getUserInfo();
Connect React Hooks
useParticleProvider
Get provider when wallet connect, you can set the provider to web3.js or ethers.js.
useAccount
Get wallet address when wallet connect.
useParticleConnect
Get connect() and disconnect() function for action.
useConnectKit
Get ParticleConnect instance do custom action.
useConnectModal
openConnectModal without ConnectButton.
useConnectId
Get connected id.
useSwitchChains
Check if you can switch chain, and get chains.
useLanguage
Get current language and set language.
useWalletMetas
Get registered wallet metadata.
Connect Core
You can only use @particle-network/connect to custom UI.
import { evmWallets, ParticleConnect } from'@particle-network/connect';import { Ethereum } from'@particle-network/chains';// initconstconnectKit=newParticleConnect({ projectId:'replace with your projectId', clientKey:'replace with your clientKey', appId:'replace with your appId', chains: [ Ethereum ], wallets:evmWallets({ qrcode:false }), });//connect registered wallet. metamask, walletconnect_v2 etc.connectKit.connect('wallet id');//connect to particleconnectKit.connect('particle', options);//disconnect walletconnectKit.disconnect();//connect last walletconnectKit.connectToCachedProvider();//listen provider eventconnectKit.on('connect', (provider) => {});connectKit.on('disconnect', () => {});connectKit.on('chainChanged', (chain) => {});connectKit.on('accountsChanged', (accounts) => {});//switch chainconnectKit.switchChain(chain);//get registered wallet metadataconnectKit.walletMetas();//get evm default walletsevmWallets(); //you can also custom wallet order//get browser injected evm wallet evmInjectedWallet();//get browser injected wallet metadatagetInjectedProvider();
Upgrade Guide
If you use Connect SDK v0.x.x and wish to update to the 1.x.x, the process is straightforward. Below are the updated functions for reference.