Skip to content

Instantly share code, notes, and snippets.

@TABASCOatw
Created October 25, 2023 04:23
Show Gist options
  • Save TABASCOatw/b13a4c17eeca0e3b11c5d3af3becd042 to your computer and use it in GitHub Desktop.
Save TABASCOatw/b13a4c17eeca0e3b11c5d3af3becd042 to your computer and use it in GitHub Desktop.
Ethereum Goerli Biconomy smart account implementation with Smart WaaS (modular SA update)
import React, { useState, useEffect } from 'react';
import { ParticleNetwork } from '@particle-network/auth';
import { ParticleProvider } from '@particle-network/provider';
import { EthereumGoerli } from '@particle-network/chains';
import { AAWrapProvider, SmartAccount, SendTransactionMode } from '@particle-network/aa';
import { ethers } from 'ethers';
const config = {
projectId: process.env.REACT_APP_PROJECT_ID,
clientKey: process.env.REACT_APP_CLIENT_KEY,
appId: process.env.REACT_APP_APP_ID,
};
const particle = new ParticleNetwork({
...config,
chainName: EthereumGoerli.name,
chainId: EthereumGoerli.id,
wallet: { displayWalletEntry: true }
});
const smartAccount = new SmartAccount(new ParticleProvider(particle.auth), {
...config,
aaOptions: {
biconomy: [{ chainId: 5, version: '1.0.0' }],
paymasterApiKeys: [{ chainId: 5, apiKey: process.env.BICONOMY_API_KEY }]
}
});
const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), "any");
particle.setERC4337({
name: 'BICONOMY',
version: '1.0.0'
});
const App = () => {
const [userInfo, setUserInfo] = useState(null);
const [ethBalance, setEthBalance] = useState(null);
useEffect(() => {
if (userInfo) {
fetchEthBalance();
}
}, [userInfo]);
const fetchEthBalance = async () => {
const address = await smartAccount.getAddress();
const balance = await customProvider.getBalance(address);
setEthBalance(ethers.utils.formatEther(balance));
};
const handleLogin = async (preferredAuthType) => {
const user = !particle.auth.isLogin() ? await particle.auth.login({preferredAuthType}) : particle.auth.getUserInfo();
setUserInfo(user);
}
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();
console.log('Transaction hash:', txReceipt.transactionHash);
};
return (
<div className="App">
{!userInfo ? (
<div>
<button onClick={() => handleLogin('google')}>Sign in with Google</button>
<button onClick={() => handleLogin('twitter')}>Sign in with Twitter</button>
</div>
) : (
<div>
<h2>{userInfo.name}</h2>
<div>
<small>{ethBalance} ETH</small>
<button onClick={executeUserOp}>Execute User Operation</button>
</div>
</div>
)}
</div>
);
};
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment