Skip to content

Instantly share code, notes, and snippets.

@TABASCOatw
Created October 25, 2023 05:17
Show Gist options
  • Save TABASCOatw/c36f1f2531f29c63d6ee88f0f8ff7397 to your computer and use it in GitHub Desktop.
Save TABASCOatw/c36f1f2531f29c63d6ee88f0f8ff7397 to your computer and use it in GitHub Desktop.
Mantle Mainnet Simple 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 { Mantle } from '@particle-network/chains';
import { AAWrapProvider, SmartAccount } 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: Mantle.name,
chainId: Mantle.id,
wallet: { displayWalletEntry: true }
});
const smartAccount = new SmartAccount(new ParticleProvider(particle.auth), {
...config,
aaOptions: {
simple: [{ chainId: Mantle.id, version: '1.0.0' }]
}
});
const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount), "any");
particle.setERC4337({
name: 'SIMPLE',
version: '1.0.0'
});
const App = () => {
const [userInfo, setUserInfo] = useState(null);
const [mntBalance, setMntBalance] = useState(null);
useEffect(() => {
if (userInfo) {
fetchMntBalance();
}
}, [userInfo]);
const fetchMntBalance = async () => {
const address = await smartAccount.getAddress();
const balance = await customProvider.getBalance(address);
setMntBalance(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>{mntBalance} MNT</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