Introducing Social Logins & Modular Account Abstraction on Berachain

Here’s all you need to know about Particle’s debut on Berachain:

What does this integration mean for Berachain developers?

Particle's Smart Wallet-as-a-Service offers a seamless and direct approach to user onboarding and Web3 interactions, allowing developers to easily tap into ERC-4337 account abstraction and manage wallets within their dApps. Particle’s modular tools combine a friendly Web2-like user experience with cutting-edge Web3 capabilities, enabling user onboarding with dApp-embedded wallets accessible via Web2 accounts. By integrating ERC-4337 AA natively into our modular stack, Particle allows developers to offer gasless transactions, batching, account programmability, session keys, and other benefits of AA to their users.
As such, Particle Network’s Smart WaaS offers developers the modularity and flexibility to build state-of-the-art dApps that fully take advantage of Berachain’s capabilities. In fact, numerous projects developing in the Berachain ecosystem are currently working on integrating Particle Network’s solutions. These will be announced in time.
To learn more about Particle Network’s developer experience, go to this article.

Why should developers leveraging Particle Network’s solutions develop dApps leveraging account abstraction on Berachain?

Berachain adopts a unique consensus model, Proof-of-Liquidity which is unique to its chain, presenting new dynamics and incentives for developers, aligning the ecosystem’s protocols and validators, who are highly incentivized to collaborate. This ensures high stability, as well as long-term health for the chain. Besides this, Berachain is also highly interoperable and modular through its implementation of Polaris. 
Polaris is a high-performance blockchain framework for building EVM-compatible chains on top of the CometBFT consensus engine. Currently, the chain is in Testnet stage and gearing up for its Mainnet release.

Developing on Berachain with Particle Network’s Modular Smart Wallet-as-a-Service

Using Particle Network's Smart Wallet-as-a-Service for end-to-end Account Abstraction on Berachain can be done in just a few lines of code.
Below is the code for a demo using Particle's Smart WaaS on Berachain to create a smart account (SimpleAccount in this case) via social logins (X/Google). Within the demo, the smart account is used to send a burn transaction 0.001 BERA, as well as 1 HONEY. This is automatically gasless through our Paymaster.
import React, { useState, useEffect } from 'react';import { BerachainArtio } from '@particle-network/chains';import { AAWrapProvider, SendTransactionMode, SmartAccount } from '@particle-network/aa';import { useEthereum, useConnect, useAuthCore } from '@particle-network/auth-core-modal';import { ethers } from 'ethers';import { notification } from 'antd';
import './App.css';
const App = () => { const { provider } = useEthereum(); const { connect, disconnect } = useConnect(); const { userInfo } = useAuthCore();
const [balance, setBalance] = useState(null);
const smartAccount = new SmartAccount(provider, { projectId: process.env.REACT_APP_PROJECT_ID, clientKey: process.env.REACT_APP_CLIENT_KEY, appId: process.env.REACT_APP_APP_ID, aaOptions: { simple: [{ chainId: BerachainArtio.id, version: '1.0.0' }], }, });
const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), "any");
useEffect(() => { if (userInfo) { fetchBalance(); } }, [userInfo]);
const fetchBalance = async() => { const address = await smartAccount.getAddress(); const balanceResponse = await customProvider.getBalance(address); setBalance(ethers.utils.formatEther(balanceResponse)); };
const handleLogin = async (authType) => { if (!userInfo) { await connect({ socialType: authType, chain: BerachainArtio }); } };
const executeUserOp = async () => { const signer = customProvider.getSigner();
const tx = { to: "0x000000000000000000000000000000000000dEaD", value: ethers.utils.parseEther("0.001") };
const txResponse = await signer.sendTransaction(tx); const txReceipt = await txResponse.wait();
notification.success({ message: "Transaction Successful", description: ( <div> Transaction Hash: <a href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`} target="_blank" rel="noopener noreferrer">{txReceipt.transactionHash}</a> </div> ) }); };
const executeUserOpHONEY = async () => { const signer = customProvider.getSigner();
const tokenContract = new ethers.Contract('0x7EeCA4205fF31f947EdBd49195a7A88E6A91161B', ["function transfer(address to, uint256 amount)"], signer);
const txResponse = await tokenContract.transfer('0x000000000000000000000000000000000000dEaD', ethers.utils.parseEther('1')); const txReceipt = await txResponse.wait();
notification.success({ message: "Transaction Successful", description: ( <div> Transaction Hash: <a href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`} target="_blank" rel="noopener noreferrer">{txReceipt.transactionHash}</a> </div> ) }); };
return ( <div className="App"> <div className="logo-section"> <img src="https://i.imgur.com/EerK7MS.png" alt="Logo 1" className="logo logo-big" /> <img src="https://i.imgur.com/RyiS4Wb.png" alt="Logo 2" className="logo" /> </div> {!userInfo ? ( <div className="login-section"> <button className="sign-button google-button" onClick={() => handleLogin('google')}> <img src="https://i.imgur.com/nIN9P4A.png" alt="Google" className="icon"/> Sign in with Google </button> <button className="sign-button twitter-button" onClick={() => handleLogin('twitter')}> <img src="https://i.imgur.com/afIaQJC.png" alt="Twitter" className="icon"/> Sign in with X </button> <button className="sign-button other-button" onClick={() => handleLogin('')}> <img src="https://i.imgur.com/VRftF1b.png" alt="Twitter" className="icon"/> </button> </div> ) : ( <div className="profile-card"> <h2>{userInfo.name}</h2> <div className="balance-section"> <small>{balance} BERA</small> <button className="sign-message-button" onClick={executeUserOp}>Execute Transaction</button> <button className="sign-message-button honey" onClick={executeUserOpHONEY}>Execute Transaction ($HONEY)</button> <button className="disconnect-button" onClick={() => disconnect()}>Logout</button> </div> </div> )} </div> );};
export default App;
view raw
Berachain Demo.tsx hosted with ❤ by GitHub
Code can also be found at https://github.com/TABASCOatw/particle-berachain-demo
Using Particle, we've onboarded a user, created a smart account, and sent a transaction in under 100 lines of code. You can see a tutorial for this below:

You can take a look at the full repository or give our web demo a try. You can also try the live demo for the application covered above here.

Closing thoughts

Thanks to this integration, it’s now easier than ever to take advantage of ERC-4337 AA within the Berachain ecosystem. Developers familiar with Particle’s services can now also benefit from Berachain’s unique Proof-of-Liquidity dynamics to build AA-powered dApps relying on Particle Network’s MPC-TSS Auth logins. In synergy with Particle Network’s tools, developers can launch mass-market-ready Web3 applications.
Particle Network’s Smart WaaS stack provides developers with a modular, user-friendly way to implement account abstraction into their dApps. Particle is preparing to release a full-stack ecosystem with user-centric and privacy-preserving features, as well as Omnichain Account Abstraction, enabling seamless cross-chain interactions. Particle also recently launched the first Bitcoin account abstraction protocol, BTC Connect. Through the combination of all these components, we are delivering Modular Chain Abstraction Infrastructure to supercharge Web3’s expansion.
Developers building on Berachain can get started for free by signing up at https://dashboard.particle.network, and learn more about our various SDKs and APIs at https://developers.particle.network.