diff --git a/docs/Biconomy AA Stack/Account/description.md b/docs/Biconomy AA Stack/Account/description.md index ea67e02f..d43f42ca 100644 --- a/docs/Biconomy AA Stack/Account/description.md +++ b/docs/Biconomy AA Stack/Account/description.md @@ -8,4 +8,4 @@ Building and sending UserOperations is a key offering of any toolkit designed fo The Biconomy account package achieves this by providing a comprehensive set of methods that enable developers to effortlessly create UserOperations. Combined with the sophisticated backend infrastructure of the Biconomy platform, it ensures efficient and reliable transmission of these operations across EVM networks. -The Biconomy account package also supports the addition of modules. Each module unlocks new Smart Account functionality such as passkeys, session keys, account recovery etc. +The Biconomy account package also supports the addition of modules. Each module unlocks new Smart Account functionality such as passkeys, session keys, account recovery etc. Lear more about Modules [here](/docs/category/modules) diff --git a/docs/Biconomy AA Stack/Bundler/description.md b/docs/Biconomy AA Stack/Bundler/description.md index ad7823b2..7ab1e350 100644 --- a/docs/Biconomy AA Stack/Bundler/description.md +++ b/docs/Biconomy AA Stack/Bundler/description.md @@ -3,4 +3,4 @@ sidebar_position: 1 --- # Description -In the context of Account Abstraction (ERC4337), A bundler plays a main role in the infrastructure. This concept is integral to the operation of account abstraction across any network that utilizes the Ethereum Virtual Machine (EVM). The main purpose of a bundler is to take UserOperations included in a mempool and and handle sending them to an entry point contract to be executed as a transaction onchain. \ No newline at end of file +The Bundler is a service that tracks userOps that exist in an alternative mem pool and as the name suggests, bundles them together to send to an Entry Point Contract for eventual execution onchain. This is the final piece of the flow where after constructing your userOp and then potentially signing it with data from a paymaster, you send the userOp on chain to be handled and executed as a transaction on the EVM. You can start using our Bundlers right now in your dApps; each of our [tutorials](/docs/category/tutorials) will walk you through how to use them in different scenarios. \ No newline at end of file diff --git a/docs/Biconomy AA Stack/Paymaster/description.md b/docs/Biconomy AA Stack/Paymaster/description.md index e2936a52..c5007c73 100644 --- a/docs/Biconomy AA Stack/Paymaster/description.md +++ b/docs/Biconomy AA Stack/Paymaster/description.md @@ -3,4 +3,18 @@ sidebar_position: 1 --- # Description -ERC4337, Account abstraction, introduces the concept of Paymasters. These specialised entities play a pivotal role in revolutionising the traditional gas payment system in EVM transactions. Paymasters, acting as third-party intermediaries, possess the capability to sponsor gas fees for an account, provided specific predefined conditions are satisfied. \ No newline at end of file +Biconomy offers a Paymaster service designed with one of the best developer experiences in mind. Simply use one URL and switch modes between our sponsorship paymaster and our Token Paymaster. + +## Sponsorship Paymaster + +![Sponsored](../../images/overview/sponsored.png) + +If the mode you choose in the request to the Paymaster URL is the sponsored mode, your users will benefit from gasless transactions, and you remove the friction point of needed native tokens to pay for gas on transactions. Learn how to set up your paymaster [here](/docs/dashboard/paymaster). + +## Token Paymaster + +![Erc20](../../images/overview/erc20gas.png) + +Switching the mode of your Paymster to ERC20 allows you to unlock an experience where users can pay gas in any of our supported ERC20 tokens on different networks. Check out the latest supported tokens [here](/docs/supportedchains/supportedTokens). + +Learn how to utilize either of these Paymasters by checking out our How To Guide on [Executing transactions](/docs/category/executing-transactions) \ No newline at end of file diff --git a/docs/addons/Social Login/_category_.json b/docs/addons/Social Login/_category_.json deleted file mode 100644 index 5b9d0128..00000000 --- a/docs/addons/Social Login/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Social Login", - "position": 5, - "link": { - "type": "generated-index", - "description": "Enable Social Login for your dApp" - } -} diff --git a/docs/addons/Social Login/other.md b/docs/addons/Social Login/other.md deleted file mode 100644 index 03595ee2..00000000 --- a/docs/addons/Social Login/other.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Using other Auth Providers - -Our documentation goes over using two modules for Social Login, this includes Particle Auth and Web3Auth. You are however able to use signer accounts from any other auth providers and SDK's. Let's take a look at the initilization object of our smart accounts again: - -```javascript -const biconomySmartAccountConfig: BiconomySmartAccountConfig = { - signer: 'Pass a signer from a Javascript Ethereum Provider', - chainId: '', -} -``` - -As long as you can provide a signer from a JavaScript Ethereum Provider in the configuration object, you can utilize various other SDKs and authentication providers seamlessly with our smart accounts. We recommend exploring our pre-integrated partners for a smoother and more user-friendly experience. \ No newline at end of file diff --git a/docs/addons/Social Login/particleAuth.md b/docs/addons/Social Login/particleAuth.md deleted file mode 100644 index 39714660..00000000 --- a/docs/addons/Social Login/particleAuth.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Biconomy and Particle Auth - -Particle Auth provides MPC (Multi-Party Computation)-based threshold signatures. This integration provides the auth module with the smart-account package combined. - -## Code Examples - -- [Implement Particle Auth With Biconomy SDK and React](https://github.com/bcnmy/sdk-examples/tree/master/react-vite-particle-auth) -- [Documentation for Particle Auth AA SDK](https://docs.particle.network/developers/account-abstraction/web-sdk) -- [Particle Auth Web Demo](https://github.com/Particle-Network/particle-web-demo) - -## Installation - -Install and import the package from the Biconomy SDK - -```bash -yarn add @biconomy/particle-auth -// or -npm install @biconomy/particle-auth -``` - -:::info -Particle Auth Keys can be obtained from the [Particle Dashboard](https://dashboard.particle.network/) -::: - -## Initialization - -The code snippet below containes the import and initialization object needed to set up the Particle Auth Social login widget. - - - -```javascript -import { - ParticleAuthModule, - ParticleProvider, - BiconomyAccountModule, -} from "@biconomy/particle-auth"; - -const particle = new ParticleAuthModule.ParticleNetwork({ - projectId: "", // get it from particle dashboard - clientKey: "", // get it from particle dashboard - appId: "", // get it from particle dashboard - chainName: "Ethereum", //optional: current chain name, default Ethereum. - chainId: 5, //optional: current chain id, default 1. - wallet: { - //optional: by default, the wallet entry is displayed in the bottom right corner of the webpage. - displayWalletEntry: true, //show wallet entry when connect particle. - defaultWalletEntryPosition: ParticleAuthModule.WalletEntryPosition.BR, //wallet entry position - uiMode: "dark", //optional: light or dark, if not set, the default is the same as web auth. - supportChains: [ - { id: 1, name: "Ethereum" }, - { id: 5, name: "Ethereum Goerli" }, - ], // optional: web wallet support chains. - customStyle: {}, //optional: custom wallet style - }, -}); - -``` - - -Once all values have been populated you can now trigger the social login: - -```javascript -const connect = async () => { - try { - const userInfo = await particle.auth.login(); - console.log("Logged in user:", userInfo); - const particleProvider = new ParticleProvider(particle.auth); - const ethersProvider = new ethers.providers.Web3Provider( - particleProvider, - "any" - ); - const accounts = await ethersProvider.listAccounts(); - console.log("Logged in user:", accounts[0]); - } catch (error) { - console.error(error); - } -}; - -``` - -Now you can create a smart account with Biconomy and begin making transactions - -:::info -Make sure to authorize the NFT contract in your Biconomy Dashboard and retrieve the neccasary dapp API key. The NFT contract in this guide is deployed [here](https://goerli.etherscan.io/address/0xdd526eba63ef200ed95f0f0fb8993fe3e20a23d0) -::: - -```javascript - -const getSmartAccount = async () => { - if (particle.auth === undefined) return; - const particleProvider = new ParticleProvider(particle.auth); - const wallet = new BiconomyAccountModule.SmartAccount(particleProvider, { - projectId: "", // get it from particle dashboard - clientKey: "", // get it from particle dashboard - appId: "", // get it from particle dashboard - networkConfig: [ - { - dappAPIKey: "", // get it from biconomy dashboard - chainId: 5, - }, - ], - }); - // AA address - const address = await wallet.getAddress(); - setScwAddress(address); - setSmartAccount(wallet); - // EOA address - const address = await smartAccount.getOwner(); - // load account more info. - const accountInfo = await smartAccount.getAccount(); -}; - -const doAATX = async () => { - const nftInterface = new ethers.utils.Interface([ - "function safeMint(address _to)", - ]); - const data = nftInterface.encodeFunctionData("safeMint", [scwAddress]); - const nftAddress = "0xdd526eba63ef200ed95f0f0fb8993fe3e20a23d0"; // test nft contract for goerli and mumbai - const tx = { - to: nftAddress, - data: data, - value: 0, - }; - const wrapProvider = new BiconomyAccountModule.BiconomyWrapProvider( - smartAccount, - BiconomyAccountModule.SendTransactionMode.Gasless - ); - const provider = new ethers.providers.Web3Provider(wrapProvider, "any"); - const signer = provider.getSigner(); - const txResponse = await signer.sendTransaction(tx); - console.log("Tx Response", txResponse); - const txReciept = await txResponse.wait(); - console.log("Tx hash", txReciept.transactionHash); -}; - -``` - -Congratulations you have now integrated social login and created a gasless transaction. Make sure to check the full code example at the top of this doc to go over any React level configuration needed! \ No newline at end of file diff --git a/docs/addons/_category_.json b/docs/addons/_category_.json deleted file mode 100644 index 6bde3129..00000000 --- a/docs/addons/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Add ons", - "position": 7, - "link": { - "type": "generated-index", - "description": "Additonal Add ons to give your AA stack superpowers" - } -} diff --git a/docs/audits.md b/docs/audits.md index becf8ef8..8b51fa86 100644 --- a/docs/audits.md +++ b/docs/audits.md @@ -9,9 +9,9 @@ sidebar_position: 12 | Audit Title | Link | | --------------- | --------------- | -| Kawach Smart Account | [Link to report](https://file.notion.so/f/s/1c85315c-1ad4-4839-b111-237b47441117/Biconomy_Smart_Wallet_Kawach_Audit_Report.pdf?id=97283eaa-7604-43f4-add3-692d471eb78a&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1693094400000&signature=IaWv3qQIlSEAYnWgPMZL8KU1Us3kTV-cblebjl7yS6k&downloadName=Biconomy+Smart+Wallet+Kawach+Audit+Report.pdf)| -| Zellic Biconomy Smart Account | [Link to report](https://file.notion.so/f/s/0c72e92e-50f4-439e-85f1-d768b7b8504d/Biconomy_Smart_Account_-_Zellic_Audit_Report.pdf?id=0e3038bd-cb07-4825-bd25-f1651f419d4c&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1693094400000&signature=TCXccm40TjzGKe5ROXzLD4oOUVVtCmsELKxA93LHEgY&downloadName=Biconomy+Smart+Account+-+Zellic+Audit+Report.pdf) | -| Zellic - PasskeyRegistry and SessionKey Manager| [Link to report](https://file.notion.so/f/s/52a464f3-bdea-4061-92b0-8c58e39deebc/Biconomy_PasskeyRegistry_and_SessionKeyManager_Zellic_Audit_Report.pdf?id=610a400c-8f7e-4caa-ba9d-03225bdcc1a6&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1693094400000&signature=VZ_RTpES21wboiCN_g7a9xCOPODn5PltMpihbMInqfM&downloadName=Biconomy_PasskeyRegistry_and_SessionKeyManager_Zellic_Audit_Report.pdf) | +| Kawach Smart Account | [Link to report](https://file.notion.so/f/s/1c85315c-1ad4-4839-b111-237b47441117/Biconomy_Smart_Wallet_Kawach_Audit_Report.pdf?id=97283eaa-7604-43f4-add3-692d471eb78a&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1695427200000&signature=FgFi1iS77is43aw9e32W3b253BPVLZ0WSrC8EYwntts&downloadName=Biconomy+Smart+Wallet+Kawach+Audit+Report.pdf)| +| Zellic Biconomy Smart Account | [Link to report](https://file.notion.so/f/s/0c72e92e-50f4-439e-85f1-d768b7b8504d/Biconomy_Smart_Account_-_Zellic_Audit_Report.pdf?id=0e3038bd-cb07-4825-bd25-f1651f419d4c&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1695427200000&signature=Rb4S8SD8y191FKXkc-twPoFulkIMjuKGcIjjk7ilM0M&downloadName=Biconomy+Smart+Account+-+Zellic+Audit+Report.pdf) | +| Zellic - PasskeyRegistry and SessionKey Manager| [Link to report](https://file.notion.so/f/s/52a464f3-bdea-4061-92b0-8c58e39deebc/Biconomy_PasskeyRegistry_and_SessionKeyManager_Zellic_Audit_Report.pdf?id=610a400c-8f7e-4caa-ba9d-03225bdcc1a6&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1695427200000&signature=jCr_ZE1CUjcAzxgXFxz_zyffTMSF6rr8vKNi9ydtgZk&downloadName=Biconomy_PasskeyRegistry_and_SessionKeyManager_Zellic_Audit_Report.pdf) | @@ -19,5 +19,5 @@ sidebar_position: 12 | Audit Title | Link | | --------------- | --------------- | -| Zellic Paymaster | [Link to report](https://file.notion.so/f/s/e4e3ca6d-d75e-4b18-abf6-e5248b94019f/Final_Biconomy_Security_Assessment_Report_(1).pdf?id=235ac9f0-9d66-45b0-8bfa-60c17986a2c4&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1693094400000&signature=TQUXiX-t7pDlmjCz7RcC3I3IeN2Zp7cjOny7W1rBAeI&downloadName=Final+Biconomy+Security+Assessment+Report+%281%29.pdf) | -| Zellic Token Paymaster| [Link to report](https://file.notion.so/f/s/4e24265c-325a-4586-8b20-2de279741fa0/Token_Paymaster_-_Zellic_Audit_Report.pdf?id=23ce7158-3cdd-498d-b6b3-40f5cc83dac5&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1693094400000&signature=0fI2yqKSOuMx8_Fxf9b0CQDgNDAqlxYh1iss8AUx6D4&downloadName=Token+Paymaster+-+Zellic+Audit+Report.pdf) | +| Zellic Paymaster | [Link to report](https://file.notion.so/f/s/4e24265c-325a-4586-8b20-2de279741fa0/Token_Paymaster_-_Zellic_Audit_Report.pdf?id=23ce7158-3cdd-498d-b6b3-40f5cc83dac5&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1695427200000&signature=snkMNlGFiHJ5SXjM3_V2GiVNt_tZOQxllUsUyoA3juQ&downloadName=Token+Paymaster+-+Zellic+Audit+Report.pdf) | +| Zellic Token Paymaster| [Link to report](https://file.notion.so/f/s/e4e3ca6d-d75e-4b18-abf6-e5248b94019f/Final_Biconomy_Security_Assessment_Report_(1).pdf?id=235ac9f0-9d66-45b0-8bfa-60c17986a2c4&table=block&spaceId=25dc957f-e7fd-41fb-a6a6-55939771f1ed&expirationTimestamp=1695427200000&signature=qt-B8G6j5M7T87yQT-5WW7-C6JwFZflv4ZSvVIzA188&downloadName=Final+Biconomy+Security+Assessment+Report+%281%29.pdf) | diff --git a/docs/howtos/_category_.json b/docs/howtos/_category_.json new file mode 100644 index 00000000..b5c53b5d --- /dev/null +++ b/docs/howtos/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "How to Guides", + "position": 5, + "link": { + "type": "generated-index", + "description": "Quick Recipes for implementing features into your code" + } +} diff --git a/docs/howtos/creatingAccounts/_category_.json b/docs/howtos/creatingAccounts/_category_.json new file mode 100644 index 00000000..74e37580 --- /dev/null +++ b/docs/howtos/creatingAccounts/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Creating Accounts", + "position": 1, + "link": { + "type": "generated-index", + "description": "The many different ways you can create a Biconomy Smart Account" + } +} diff --git a/docs/howtos/creatingAccounts/ethers.md b/docs/howtos/creatingAccounts/ethers.md new file mode 100644 index 00000000..8e931760 --- /dev/null +++ b/docs/howtos/creatingAccounts/ethers.md @@ -0,0 +1,154 @@ +--- +sidebar_label: 'Ethers JS' +sidebar_position: 2 +--- + +# Create Accounts with Ethers JS + +This section showcases two ways you can create Smart Accounts using Ethers JS. Using Private keys or using the Ethers Signer Object from a browser injected EOA. Note this is not a full implementation but a recipe to use and add to your existing projects. + +## Using Private Keys + +### Dependencies + +You will need the following dependencies to create a Smart Account this way: + +```bash +yarn add @biconomy/account @biconomy/bundler @biconomy/common @biconomy/core-type @biconomy/modules @biconomy/paymaster ethers@5.7.2 +``` + +### Imports + +```typescript +import { IPaymaster, BiconomyPaymaster } from '@biconomy/paymaster' +import { IBundler, Bundler } from '@biconomy/bundler' +import { BiconomySmartAccountV2, DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account" +import { Wallet, providers, ethers } from 'ethers'; +import { ChainId } from "@biconomy/core-types" +``` + +### Create a Signer using a Private Key: + +```typescript +const provider = new providers.JsonRpcProvider("https://rpc.ankr.com/polygon_mumbai") // or any other rpc provider link +const signer = new Wallet("private key" || "", provider); +// we recommend using environment variables for your private keys! +``` + +### Configuration Values + +Set up instances of Bundler, Paymaster, and ECDSA Module. Alternativedly you can also use the Multi chain Module this way. + +```typescript + +const bundler: IBundler = new Bundler({ + // get from biconomy dashboard https://dashboard.biconomy.io/ + bundlerUrl: '', + chainId: ChainId.POLYGON_MUMBAI,// or any supported chain of your choice + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + }) + + +const paymaster: IPaymaster = new BiconomyPaymaster({ + // get from biconomy dashboard https://dashboard.biconomy.io/ + paymasterUrl: '' +}) + +const module = await ECDSAOwnershipValidationModule.create({ + signer: wallet, + moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE +}) +``` + +### Create the Biconomy Smart Account + +```typescript +async function createAccount() { + let biconomySmartAccount = await BiconomySmartAccountV2.create({ + signer: wallet, + chainId: ChainId.POLYGON_MUMBAI,// or any supported chain of your choice + bundler: bundler, + paymaster: paymaster, + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + defaultValidationModule: module, + activeValidationModule: module +}) + console.log("owner: ", biconomySmartAccount.owner) + console.log("address: ", await biconomySmartAccount.getSmartAccountAddress()) + return biconomySmartAccount; +} + +createAccount() +``` + +## Using Ethers Signer from Browser EOA + +### Dependencies + +You will need the following dependencies to create a Smart Account this way: + +```bash +yarn add @biconomy/account @biconomy/bundler @biconomy/common @biconomy/core-type @biconomy/modules @biconomy/paymaster ethers@5.7.2 +``` +### Imports + +```typescript +import { IPaymaster, BiconomyPaymaster } from '@biconomy/paymaster' +import { IBundler, Bundler } from '@biconomy/bundler' +import { BiconomySmartAccountV2, DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account" +import { Wallet, providers, ethers } from 'ethers'; +import { ChainId } from "@biconomy/core-types" +``` + +### Configuration Values + +Set up instances of Bundler, Paymaster. Alternativedly you can also use the Multi chain Module this way. + +```typescript + +const bundler: IBundler = new Bundler({ + // get from biconomy dashboard https://dashboard.biconomy.io/ + bundlerUrl: '', + chainId: ChainId.POLYGON_MUMBAI,// or any supported chain of your choice + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + }) + + +const paymaster: IPaymaster = new BiconomyPaymaster({ + // get from biconomy dashboard https://dashboard.biconomy.io/ + paymasterUrl: '' +}) + +``` + +### Create the Biconomy Smart Account + +```typescript + +const connect = async () => { + const { ethereum } = window; + try { + const provider = new ethers.providers.Web3Provider(ethereum) + await provider.send("eth_requestAccounts", []); + const signer = provider.getSigner(); + const ownerShipModule = ECDSAOwnershipValidationModule.create({ + signer: signer, + moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE + }) + let biconomySmartAccount = await BiconomySmartAccountV2.create({ + signer: signer, + chainId: ChainId.POLYGON_MUMBAI, + bundler: bundler, + paymaster: paymaster, + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + defaultValidationModule: ownerShipModule, + activeValidationModule: ownerShipModule + }) + const address = await biconomySmartAccount.getAccountAddress() + console.log(address) + } catch (error) { + console.error(error); + } + }; + +``` \ No newline at end of file diff --git a/docs/howtos/creatingAccounts/introduction.md b/docs/howtos/creatingAccounts/introduction.md new file mode 100644 index 00000000..eab75dd2 --- /dev/null +++ b/docs/howtos/creatingAccounts/introduction.md @@ -0,0 +1,12 @@ +--- +sidebar_label: 'Introduction' +sidebar_position: 1 +--- + +# Introduction + +The Biconomy Smart Accounts can be created in many different ways. Your use case may be centered around web3 natives who want to use their EOA's to create smart accounts, or you may be catering towards non web3 natives who need a familiar social login. Either way we have you covered in creating smart accounts. + +Our Smart Account solution is compatible with any social provider that allows you to access the signer of the EOA that is created by the solution. Although we have packages available for you to build with we are also flexible in working with solutions you may have already built in to your dApp. Let's explore different ways you can create Smart Accounts with Biconomy. + +The following are code snippets that can be copy pasted into different frontend framewoks for creating smart accounts. \ No newline at end of file diff --git a/docs/howtos/creatingAccounts/socialLogin/_category_.json b/docs/howtos/creatingAccounts/socialLogin/_category_.json new file mode 100644 index 00000000..7eecf8a8 --- /dev/null +++ b/docs/howtos/creatingAccounts/socialLogin/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Social Login Providers", + "position": 3, + "link": { + "type": "generated-index", + "description": "Different ways of implementing Social Login providers to create Biconomy Smart Accounts. Create a PR on github if you would like your solution added." + } +} diff --git a/docs/howtos/creatingAccounts/socialLogin/byos.md b/docs/howtos/creatingAccounts/socialLogin/byos.md new file mode 100644 index 00000000..c6fcbc71 --- /dev/null +++ b/docs/howtos/creatingAccounts/socialLogin/byos.md @@ -0,0 +1,24 @@ +--- +sidebar_label: 'Bring your own Signer' +sidebar_position: 4 +--- + +# Bring your own Signer + +When looking through the ways you create a Biconomy Account, one thing remains the same: a signer is needed from any authentication method you choose. As long as you can export a signer any authentication method from a third party can be used along with our SDK. Let's take a look at the creation method of our smart accounts again: + +```typescript + +let biconomySmartAccount = await BiconomySmartAccountV2.create({ + signer: web3Provider.getSigner(), + chainId: ChainId.POLYGON_MUMBAI, + bundler: bundler, + paymaster: paymaster, + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + defaultValidationModule: module, + activeValidationModule: module + }) + +``` + +If your third party package of choice exports a provider that can be used in an Ethers JS provier instance you are all set to go with using it to create a smart account. \ No newline at end of file diff --git a/docs/howtos/creatingAccounts/socialLogin/magic.md b/docs/howtos/creatingAccounts/socialLogin/magic.md new file mode 100644 index 00000000..6236f1e3 --- /dev/null +++ b/docs/howtos/creatingAccounts/socialLogin/magic.md @@ -0,0 +1,98 @@ +--- +sidebar_label: 'Magic' +sidebar_position: 3 +--- + +# Magic Link + +Our Smart Accounts are signer agnostic, in this how to guide we'll show you how to incorporate Magic Link for creating a login experience that uses google login/email/or connect wallet all using the Magic Link UI. You can also add more features such as Social Login by building on top of these snippets, check out the official [Magic Documentation](https://magic.link/docs/dedicated/overview) for more information. + +## Dependencies + +You will need the following dependencies to create a Smart Account this way: + +```bash +yarn add @biconomy/account @biconomy/bundler @biconomy/common @biconomy/core-type @biconomy/modules @biconomy/paymaster magic-sdk ethers@5.7.2 +``` + +## Imports + +```typescript +import { IPaymaster, BiconomyPaymaster } from '@biconomy/paymaster' +import { IBundler, Bundler } from '@biconomy/bundler' +import { BiconomySmartAccountV2, DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account" +import { Wallet, providers, ethers } from 'ethers'; +import { ChainId } from "@biconomy/core-types" +import { Magic } from 'magic-sdk'; +``` +## Magic Link Configuration + +Magic will require api keys which you can get from the [Magic Dashboard](https://dashboard.magic.link/signup). + + +```typescript +import { Magic } from "magic-sdk" + +// Initialize the Magic instance +export const magic = new Magic("YOUR_API_KEY", { + network: { + rpcUrl: "", + chainId: 11155111, // or preferred chain + }, +}) +``` +## Biconomy Configuration Values + +Set up instances of Bundler, Paymaster. Alternativedly you can also use the Multi chain Module this way. + +```typescript + +const bundler: IBundler = new Bundler({ + // get from biconomy dashboard https://dashboard.biconomy.io/ + bundlerUrl: '', + chainId: ChainId.POLYGON_MUMBAI,// or any supported chain of your choice + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + }) + + +const paymaster: IPaymaster = new BiconomyPaymaster({ + // get from biconomy dashboard https://dashboard.biconomy.io/ + paymasterUrl: '' +}) + +``` + +## Create the Biconomy Smart Account + +```typescript + +const connect = async () => { + try { + await magic.wallet.connectWithUI() + const web3Provider = new ethers.providers.Web3Provider( + magic.rpcProvider, + "any" + ); + + const module = await ECDSAOwnershipValidationModule.create({ + signer: web3Provider.getSigner(), + moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE + }) + + let biconomySmartAccount = await BiconomySmartAccountV2.create({ + signer: web3Provider.getSigner(), + chainId: ChainId.POLYGON_MUMBAI, + bundler: bundler, + paymaster: paymaster, + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + defaultValidationModule: module, + activeValidationModule: module + }) + + const address = await biconomySmartAccount.getSmartAccountAddress() + } catch (error) { + console.error(error); + } + }; + +``` \ No newline at end of file diff --git a/docs/howtos/creatingAccounts/socialLogin/particle.md b/docs/howtos/creatingAccounts/socialLogin/particle.md new file mode 100644 index 00000000..7e02b896 --- /dev/null +++ b/docs/howtos/creatingAccounts/socialLogin/particle.md @@ -0,0 +1,104 @@ +--- +sidebar_label: 'Particle Network' +sidebar_position: 1 +--- + +# Particle Network + +One way to utilize Social Logins is via Particle Network. This section will give you code snippets for creating Biconomy Smart Accounts with Particle Network. Particle Network allows you to introduce familiar Web2 experiences, with the following code snippets you can unlock: authentication with email to create a smart account as well as authentication with different social providers to create a Smart Account. + + + +## Dependencies + +You will need the following dependencies to create a Smart Account this way: + +```bash +yarn add @biconomy/account @biconomy/bundler @biconomy/common @biconomy/core-type @biconomy/modules @biconomy/paymaster @biconomy/particle-auth ethers@5.7.2 +``` + +## Imports + +```typescript +import { IPaymaster, BiconomyPaymaster } from '@biconomy/paymaster' +import { IBundler, Bundler } from '@biconomy/bundler' +import { BiconomySmartAccountV2, DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account" +import { Wallet, providers, ethers } from 'ethers'; +import { ChainId } from "@biconomy/core-types" +import { ParticleAuthModule, ParticleProvider } from "@biconomy/particle-auth"; +``` + +## Particle Auth Configuration + +Particle auth will require api keys which you can get from the [Particle Dashboard](https://docs.particle.network/getting-started/dashboard). + + +```typescript + const particle = new ParticleAuthModule.ParticleNetwork({ + projectId: "", + clientKey: "", + appId: "", + wallet: { + displayWalletEntry: true, + defaultWalletEntryPosition: ParticleAuthModule.WalletEntryPosition.BR, + }, + }); +``` + +## Biconomy Configuration Values + +Set up instances of Bundler, Paymaster. Alternativedly you can also use the Multi chain Module this way. + +```typescript + +const bundler: IBundler = new Bundler({ + // get from biconomy dashboard https://dashboard.biconomy.io/ + bundlerUrl: '', + chainId: ChainId.POLYGON_MUMBAI,// or any supported chain of your choice + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + }) + + +const paymaster: IPaymaster = new BiconomyPaymaster({ + // get from biconomy dashboard https://dashboard.biconomy.io/ + paymasterUrl: '' +}) + +``` + +## Create the Biconomy Smart Account + +```typescript + +const connect = async () => { + try { + const userInfo = await particle.auth.login(); + console.log("Logged in user:", userInfo); + const particleProvider = new ParticleProvider(particle.auth); + const web3Provider = new ethers.providers.Web3Provider( + particleProvider, + "any" + ); + + const module = await ECDSAOwnershipValidationModule.create({ + signer: web3Provider.getSigner(), + moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE + }) + + let biconomySmartAccount = await BiconomySmartAccountV2.create({ + signer: web3Provider.getSigner(), + chainId: ChainId.POLYGON_MUMBAI, + bundler: bundler, + paymaster: paymaster, + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + defaultValidationModule: module, + activeValidationModule: module + }) + + const address = await biconomySmartAccount.getSmartAccountAddress() + } catch (error) { + console.error(error); + } + }; + +``` \ No newline at end of file diff --git a/docs/addons/Social Login/web3auth.md b/docs/howtos/creatingAccounts/socialLogin/web3auth.md similarity index 67% rename from docs/addons/Social Login/web3auth.md rename to docs/howtos/creatingAccounts/socialLogin/web3auth.md index c4b326bf..5a891eee 100644 --- a/docs/addons/Social Login/web3auth.md +++ b/docs/howtos/creatingAccounts/socialLogin/web3auth.md @@ -1,22 +1,29 @@ --- +sidebar_label: 'Web3Auth' sidebar_position: 2 --- -# Biconomy and Web3Auth -Our second Social Login example is via a pluggable auth infrastructure built on Web3Auth for dApp developers who want to integrate social login without hassle. Developers don't have to create clients or go to any dashboard to whitelist URLs. +# Web3Auth -## Steps To Enable Social Login +One way to utilize Social Logins is via Web3Auth. This section will give you code snippets for creating Biconomy Smart Accounts with Web3Auth. Web3Auth allows you to introduce familiar Web2 experiences, with the following code snippets you can unlock: authentication with email to create a smart account as well as authentication with different social providers to create a Smart Account -- Install and import the web3-auth package from the Biconomy SDK +## Dependencies + +You will need the following dependencies to create a Smart Account this way: ```bash -yarn add @biconomy/web3-auth -// or -npm install @biconomy/web3-auth +yarn add @biconomy/account @biconomy/bundler @biconomy/common @biconomy/core-type @biconomy/modules @biconomy/paymaster @biconomy/web3-auth ethers@5.7.2 ``` -```js +## Imports + +```typescript +import { IPaymaster, BiconomyPaymaster } from '@biconomy/paymaster' +import { IBundler, Bundler } from '@biconomy/bundler' +import { BiconomySmartAccountV2, DEFAULT_ENTRYPOINT_ADDRESS } from "@biconomy/account" +import { Wallet, providers, ethers } from 'ethers'; +import { ChainId } from "@biconomy/core-types" import SocialLogin from "@biconomy/web3-auth"; import "@biconomy/web3-auth/dist/src/style.css" ``` @@ -27,7 +34,6 @@ By installing this package you might get an error like These are polyfills errors that can be resolved by configuring the webpack properly. As mentioned [here](https://github.com/bcnmy/biconomy-client-sdk/issues/87#issuecomment-1329798362). ::: - ### SocialLogin Module Functions If you check the SocialLogin class you will find different methods which we've got to help you integrate social login @@ -82,26 +88,6 @@ console.log("EOA address", accounts) ## Setting Up Smart Account with Social Login -Next, you will need to connect the provider to the Biconomy Smart Account package. To install the smart account run the following command: - -```bash -yarn add @biconomy/account -yarn add @biconomy/bundler -yarn add @biconomy/paymaster -yarn add @biconomy/modules -// or -npm install @biconomy/account -npm install @biconomy/bundler -npm install @biconomy/paymaster -npm install @biconomy/modules -``` - -:::info -**You'll need a dApp API key to create Smart Accounts for your users.** -You can register your dApp and get an API key for it from the **Biconomy Dashboard.** - -If you have problems with using the Dashboard and configuring your dApp and Gas Tank, feel free to get in touch with us for spinning up personal test keys and gas tanks on other test networks. -::: ## Initialize Smart Account @@ -116,13 +102,16 @@ import { import { ECDSAOwnershipValidationModule, DEFAULT_ECDSA_OWNERSHIP_MODULE } from "@biconomy/modules"; const bundler: IBundler = new Bundler({ - bundlerUrl: 'https://bundler.biconomy.io/api/v2/80001/nJPK7B3ru.dd7f7861-190d-41bd-af80-6877f74b8f44', // you can get this value from biconomy dashboard. - chainId: ChainId.POLYGON_MUMBAI, - entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, -}) + // get from biconomy dashboard https://dashboard.biconomy.io/ + bundlerUrl: '', + chainId: ChainId.POLYGON_MUMBAI,// or any supported chain of your choice + entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS, + }) + const paymaster: IPaymaster = new BiconomyPaymaster({ - paymasterUrl: 'https://paymaster.biconomy.io/api/v1/80001/Tpk8nuCUd.70bd3a7f-a368-4e5a-af14-80c7f1fcda1a' + // get from biconomy dashboard https://dashboard.biconomy.io/ + paymasterUrl: '' }) const module = await ECDSAOwnershipValidationModule.create({ @@ -141,8 +130,4 @@ let biconomySmartAccount = await BiconomySmartAccountV2.create({ }) -``` - -:::info -If you have any questions please post them on the [Biconomy SDK Forum](https://forum.biconomy.io/) -::: +``` \ No newline at end of file diff --git a/docs/howtos/executinguserops/_category_.json b/docs/howtos/executinguserops/_category_.json new file mode 100644 index 00000000..3259bf62 --- /dev/null +++ b/docs/howtos/executinguserops/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Executing Transactions", + "position": 2, + "link": { + "type": "generated-index", + "description": "Build and send userOps, the new way of looking at transactions in ERC 4337" + } +} diff --git a/docs/howtos/executinguserops/gaslessTransactions.md b/docs/howtos/executinguserops/gaslessTransactions.md new file mode 100644 index 00000000..99e3cb4f --- /dev/null +++ b/docs/howtos/executinguserops/gaslessTransactions.md @@ -0,0 +1,137 @@ +--- +sidebar_label: 'Gasless Transactions' +sidebar_position: 2 +--- + +# Gasless Transactions + +:::info +This guide assumes you have already initialized the Biconomy SDK and just need to understand how to execute a user paid transaction. See our [tutorials](/docs/category/tutorials) for step by step setups. +::: + +In this guide we will look at executing a gasless transaction utilizing our sponsorship paymaster. + +## Imports + +These are the imports needed for the code snippets below: + +```javascript + +import { ethers } from "ethers"; +import abi from "some abi location" +import { + IHybridPaymaster, + SponsorUserOperationDto, + PaymasterMode +} from '@biconomy/paymaster' + +``` + +Additionally an Instance of the BiconomySmartAccount is needed as mentioned above. + +## Connect to Contract + +Connect to an instance of a contract, below is an example of using ethers JS to connect to an NFT contract. + +```javascript + +const nftAddress = "0x0a7755bDfb86109D9D403005741b415765EAf1Bc" + +const contract = new ethers.Contract( + nftAddress, + abi, + provider, + ) + +``` + +## Build Useroperation + +Using an instance of the smart account use the buildUserOp method to create a userOp. + +```javascript + + // use the ethers populateTransaction method to create a raw transaction + const minTx = await contract.populateTransaction.safeMint(address); + console.log(minTx.data); + const tx1 = { + to: nftAddress, + data: minTx.data, + }; + let userOp = await smartAccount.buildUserOp([tx1]); + +``` + +## Request Paymaster Data + +We now need to construct the `paymasterAndData` field of our userOp. This is done by making a request to the paymaster with the Paymaster mode set to sponsored and updating the userOp with the returned `paymasterAndData` response. + +```javascript + + const biconomyPaymaster = smartAccount.paymaster as IHybridPaymaster; + let paymasterServiceData: SponsorUserOperationDto = { + mode: PaymasterMode.SPONSORED, + }; + const paymasterAndDataResponse = await biconomyPaymaster.getPaymasterAndData( + userOp, + paymasterServiceData + ); + userOp.paymasterAndData = paymasterAndDataResponse.paymasterAndData; + +``` + +## Send UserOperation + +Send your userOp to our Bundler which will send the userOp to the entry point contract to handle executing it as a transaction on chain. + +```javascript + +const userOpResponse = await smartAccount.sendUserOp(userOp); + console.log("userOpHash", userOpResponse); + const { receipt } = await userOpResponse.wait(1); + console.log("txHash", receipt.transactionHash); + +``` + +## Mint NFT Function + +```javascript + + const handleMint = async () => { + const contract = new ethers.Contract( + nftAddress, + abi, + provider, + ) + try { + const minTx = await contract.populateTransaction.safeMint(address); + console.log(minTx.data); + const tx1 = { + to: nftAddress, + data: minTx.data, + }; + let userOp = await smartAccount.buildUserOp([tx1]); + console.log({ userOp }) + const biconomyPaymaster = + smartAccount.paymaster as IHybridPaymaster; + let paymasterServiceData: SponsorUserOperationDto = { + mode: PaymasterMode.SPONSORED, + }; + const paymasterAndDataResponse = + await biconomyPaymaster.getPaymasterAndData( + userOp, + paymasterServiceData + ); + + userOp.paymasterAndData = paymasterAndDataResponse.paymasterAndData; + const userOpResponse = await smartAccount.sendUserOp(userOp); + console.log("userOpHash", userOpResponse); + const { receipt } = await userOpResponse.wait(1); + console.log("txHash", receipt.transactionHash); + } catch (err: any) { + console.error(err); + console.log(err) + } + } + +``` \ No newline at end of file diff --git a/docs/howtos/executinguserops/userpaidTransactions.md b/docs/howtos/executinguserops/userpaidTransactions.md new file mode 100644 index 00000000..59e6c9d8 --- /dev/null +++ b/docs/howtos/executinguserops/userpaidTransactions.md @@ -0,0 +1,102 @@ +--- +sidebar_label: 'User Paid Transactions' +sidebar_position: 1 +--- + +# User Paid Transactions + +:::info +This guide assumes you have already initialized the Biconomy SDK and just need to understand how to execute a user paid transaction. See our [tutorials](/docs/category/tutorials) for step by step setups. +::: + +In this guide we will look at executing a user paid transaction. + +## Imports + +These are the imports needed for the code snippets below: + +```javascript + +import { ethers } from "ethers"; +import abi from "some abi location" + +``` + +Additionally an Instance of the BiconomySmartAccount is needed as mentioned above. + +## Connect to Contract + +Connect to an instance of a contract, below is an example of using ethers JS to connect to an NFT contract. + +```javascript + +const nftAddress = "0x0a7755bDfb86109D9D403005741b415765EAf1Bc" + +const contract = new ethers.Contract( + nftAddress, + abi, + provider, + ) + +``` + +## Build Useroperation + +Using an instance of the smart account use the buildUserOp method to create a userOp. + +```javascript + + // use the ethers populateTransaction method to create a raw transaction + const minTx = await contract.populateTransaction.safeMint(address); + console.log(minTx.data); + const tx1 = { + to: nftAddress, + data: minTx.data, + }; + let userOp = await smartAccount.buildUserOp([tx1]); + +``` + +## Send UserOperation + +Send your userOp to our Bundler which will send the userOp to the entry point contract to handle executing it as a transaction on chain. + +```javascript + +const userOpResponse = await smartAccount.sendUserOp(userOp); +console.log("userOpHash", userOpResponse); +const { receipt } = await userOpResponse.wait(1); +console.log("txHash", receipt.transactionHash); + +``` +## Mint NFT Function + +Here is a function putting all of this together: + +```javascript + +const mintNFT = () => { + +const nftAddress = "0x0a7755bDfb86109D9D403005741b415765EAf1Bc" + +const contract = new ethers.Contract( + nftAddress, + abi, + provider, + ) + +const minTx = await contract.populateTransaction.safeMint(address); + console.log(minTx.data); + const tx1 = { + to: nftAddress, + data: minTx.data, + }; + let userOp = await smartAccount.buildUserOp([tx1]); +} + +const userOpResponse = await smartAccount.sendUserOp(userOp); +console.log("userOpHash", userOpResponse); +const { receipt } = await userOpResponse.wait(1); +console.log("txHash", receipt.transactionHash); + +``` \ No newline at end of file diff --git a/docs/howtos/executinguserops/userpaiderc20.md b/docs/howtos/executinguserops/userpaiderc20.md new file mode 100644 index 00000000..bbb8d468 --- /dev/null +++ b/docs/howtos/executinguserops/userpaiderc20.md @@ -0,0 +1,224 @@ +--- +sidebar_label: 'Pay Gas with ERC20 Tokens' +sidebar_position: 4 +--- + +# Gasless Transactions + +:::info +This guide assumes you have already initialized the Biconomy SDK and just need to understand how to execute a user paid transaction. See our [tutorials](/docs/category/tutorials) for step by step setups. +::: + +In this guide we will look at executing a gasless transaction utilizing our sponsorship paymaster. + +## Imports + +These are the imports needed for the code snippets below: + +```javascript + +import { ethers } from "ethers"; +import abi from "some abi location" +import { + IHybridPaymaster, + SponsorUserOperationDto, + PaymasterMode +} from '@biconomy/paymaster' + +``` + +Additionally an Instance of the BiconomySmartAccount is needed as mentioned above. + +## Connect to Contract + +Connect to an instance of a contract, below is an example of using ethers JS to connect to an NFT contract. + +```javascript + +const nftAddress = "0x0a7755bDfb86109D9D403005741b415765EAf1Bc" + +const contract = new ethers.Contract( + nftAddress, + abi, + provider, + ) + +``` + +## Build Useroperation + +Using an instance of the smart account use the buildUserOp method to create a userOp. + +```javascript + + // use the ethers populateTransaction method to create a raw transaction + const minTx = await contract.populateTransaction.safeMint(address); + console.log(minTx.data); + const tx1 = { + to: nftAddress, + data: minTx.data, + }; + let userOp = await smartAccount.buildUserOp([tx1]); + +``` + +## Get Feequotes for ERC20 Token payment + +The example below gets the fee quotes for just USDC. If you pass an empty array for token List you will receive the feequotes for every supported ERC20 token on the network and can choose accordingly. + +```javascript + const biconomyPaymaster = smartAccount.paymaster as IHybridPaymaster; + + const feeQuotesResponse = + await biconomyPaymaster.getPaymasterFeeQuotesOrData(partialUserOp, { + mode: PaymasterMode.ERC20, + tokenList: ["0xda5289fcaaf71d52a80a254da614a192b693e977"], + }); + + const feeQuotes = feeQuotesResponse.feeQuotes as PaymasterFeeQuote[]; + const spender = feeQuotesResponse.tokenPaymasterAddress || ""; + const usdcFeeQuotes = feeQuotes[0]; + + finalUserOp = await smartAccount.buildTokenPaymasterUserOp(partialUserOp, { + feeQuote: usdcFeeQuotes, + spender: spender, + maxApproval: false, + }); + +``` + +## Request Paymaster Data + +We now need to construct the `paymasterAndData` field of our userOp. This is done by making a request to the paymaster with the Paymaster mode set to sponsored and updating the userOp with the returned `paymasterAndData` response. + +```javascript +let paymasterServiceData = { + mode: PaymasterMode.ERC20, + feeTokenAddress: usdcFeeQuotes.tokenAddress, + calculateGasLimits: true, // Always recommended and especially when using token paymaster +}; + +try { + const paymasterAndDataWithLimits = + await biconomyPaymaster.getPaymasterAndData( + finalUserOp, + paymasterServiceData + ); + finalUserOp.paymasterAndData = paymasterAndDataWithLimits.paymasterAndData; + if ( + paymasterAndDataWithLimits.callGasLimit && + paymasterAndDataWithLimits.verificationGasLimit && + paymasterAndDataWithLimits.preVerificationGas + ) { + + // Returned gas limits must be replaced in your op as you update paymasterAndData. + // Because these are the limits paymaster service signed on to generate paymasterAndData + // If you receive AA34 error check here.. + + finalUserOp.callGasLimit = paymasterAndDataWithLimits.callGasLimit; + finalUserOp.verificationGasLimit = + paymasterAndDataWithLimits.verificationGasLimit; + finalUserOp.preVerificationGas = + paymasterAndDataWithLimits.preVerificationGas; + } + } catch (e) { + console.log("error received ", e); + } + +``` + +## Send UserOperation + +Send your userOp to our Bundler which will send the userOp to the entry point contract to handle executing it as a transaction on chain. + +```javascript + +const userOpResponse = await smartAccount.sendUserOp(userOp); + console.log("userOpHash", userOpResponse); + const { receipt } = await userOpResponse.wait(1); + console.log("txHash", receipt.transactionHash); + +``` + +## Mint NFT Function + +```javascript + + const handleMint = async () => { + const contract = new ethers.Contract( + nftAddress, + abi, + provider, + ) + try { + const minTx = await contract.populateTransaction.safeMint(address); + console.log(minTx.data); + const tx1 = { + to: nftAddress, + data: minTx.data, + }; + let userOp = await smartAccount.buildUserOp([tx1]); + console.log({ userOp }) + const biconomyPaymaster = smartAccount.paymaster as IHybridPaymaster; + + const feeQuotesResponse = + await biconomyPaymaster.getPaymasterFeeQuotesOrData(partialUserOp, { + mode: PaymasterMode.ERC20, + tokenList: ["0xda5289fcaaf71d52a80a254da614a192b693e977"], + }); + + const feeQuotes = feeQuotesResponse.feeQuotes as PaymasterFeeQuote[]; + const spender = feeQuotesResponse.tokenPaymasterAddress || ""; + const usdcFeeQuotes = feeQuotes[0]; + + finalUserOp = await smartAccount.buildTokenPaymasterUserOp(partialUserOp, { + feeQuote: usdcFeeQuotes, + spender: spender, + maxApproval: false, + }); + + let paymasterServiceData = { + mode: PaymasterMode.ERC20, + feeTokenAddress: usdcFeeQuotes.tokenAddress, + calculateGasLimits: true, // Always recommended and especially when using token paymaster +}; + +try { + const paymasterAndDataWithLimits = + await biconomyPaymaster.getPaymasterAndData( + finalUserOp, + paymasterServiceData + ); + finalUserOp.paymasterAndData = paymasterAndDataWithLimits.paymasterAndData; + if ( + paymasterAndDataWithLimits.callGasLimit && + paymasterAndDataWithLimits.verificationGasLimit && + paymasterAndDataWithLimits.preVerificationGas + ) { + + // Returned gas limits must be replaced in your op as you update paymasterAndData. + // Because these are the limits paymaster service signed on to generate paymasterAndData + // If you receive AA34 error check here.. + + finalUserOp.callGasLimit = paymasterAndDataWithLimits.callGasLimit; + finalUserOp.verificationGasLimit = + paymasterAndDataWithLimits.verificationGasLimit; + finalUserOp.preVerificationGas = + paymasterAndDataWithLimits.preVerificationGas; + } + } catch (e) { + console.log("error received ", e); + } + + const userOpResponse = await smartAccount.sendUserOp(userOp); + console.log("userOpHash", userOpResponse); + const { receipt } = await userOpResponse.wait(1); + console.log("txHash", receipt.transactionHash); + + } catch (err: any) { + console.error(err); + console.log(err) + } + } + +``` \ No newline at end of file diff --git a/docs/addons/enable-fiat.md b/docs/howtos/fiatonramp.md similarity index 82% rename from docs/addons/enable-fiat.md rename to docs/howtos/fiatonramp.md index b736d072..2ce3317d 100644 --- a/docs/addons/enable-fiat.md +++ b/docs/howtos/fiatonramp.md @@ -1,14 +1,15 @@ --- -sidebar_position: 4 +sidebar_label: 'Enable Fiat On Ramp' +sidebar_position: 3 --- -# Enable Fiat On-Ramp & Off-Ramp +# Enable Fiat On-Ramp -BiconomySDK's Transak library is made for developers who just want on-ramp and off-ramp solutions and don't want to go through with all steps to integrate the SDK. +BiconomySDK's Transak library is made for developers who just want on-ramp solutions and don't want to go through with all steps to integrate the SDK. It is a typescript wrapper on `transak.js` SDK which abstracts a few steps for the developers and users. -## Steps to Enable Fiat On-Ramp & Off-Ramp +## Steps to Enable Fiat On-Ramp - Import the `@biconomy-sdk/transak` package into your project. @@ -41,7 +42,7 @@ transak.init(); ``` - On `transak.init()` Transak widget opens and users can buy on-ramp. -![Fiat-1](img/fiat-1.png) + ## Code Examples diff --git a/docs/addons/img/fiat-1.png b/docs/images/fiat-1.png similarity index 100% rename from docs/addons/img/fiat-1.png rename to docs/images/fiat-1.png diff --git a/docs/images/overview/erc20gas.png b/docs/images/overview/erc20gas.png new file mode 100644 index 00000000..709cb8bc Binary files /dev/null and b/docs/images/overview/erc20gas.png differ diff --git a/docs/images/overview/fulstackaa.png b/docs/images/overview/fulstackaa.png new file mode 100644 index 00000000..4255b438 Binary files /dev/null and b/docs/images/overview/fulstackaa.png differ diff --git a/docs/images/overview/modularsa.png b/docs/images/overview/modularsa.png new file mode 100644 index 00000000..9978aea8 Binary files /dev/null and b/docs/images/overview/modularsa.png differ diff --git a/docs/images/overview/sponsored.png b/docs/images/overview/sponsored.png new file mode 100644 index 00000000..043f6497 Binary files /dev/null and b/docs/images/overview/sponsored.png differ diff --git a/docs/overview.md b/docs/overview.md index 706f3402..3bb945e4 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -4,38 +4,43 @@ sidebar_position: 1 # Overview -The Biconomy Modular SDK is a comprehensive software development kit designed specifically for decentralized applications (dApps). Built on top of the ERC4337 solution, it offers a wide range of solutions, from user onboarding to sustained engagement, enhancing the overall user experience within your dApp. By leveraging modularity, the SDK offers enhanced customization, security, and functionality. This SDK operates in a non-custodial manner, providing a unified solution that combines simplicity and functionality in the realm of decentralized applications. +The Biconomy SDK is an Account Abstraction toolkit that enables the simplest UX on your dApp or wallet. Built on top of the ERC 4337 solution for Account Abstraction, we offer a full-stack solution for tapping into the power of our Smart Accounts Platform, Paymasters, and Bundlers. +![FullStakAA](./images/overview/fulstackaa.png) -## What’s Possible? -Biconomy SDK brings blockchain-agnostic, web2-like experiences to your dApp in a non-custodial manner. Here's what you can enable today: +## Smart Accounts Platform -- Easy User Onboarding: Simplifies the onboarding process for new users through social login, account creation, and recovery options, seamlessly integrating web2 users into your dApp. -- Fiat On Ramp: Allows your users to easily and reliably buy or sell cryptocurrencies within your dApp, facilitating the transition between traditional and blockchain-based assets -- Gasless Transactions: Sponsors gas fees for user interactions, making them as simple as web2 transactions, and improving the overall user experience. -- Paying Gas Fees In ERC20 Tokens: Enable users to utilize any ERC20 asset in their wallet to pay for gas fees, offering flexibility and convenience. -- Custom Transaction Bundling: Empower developers to build methods for transaction batching, allowing users to execute multiple actions in a single transaction, even across multiple chains. For example, users can approve and deposit in the same transaction without altering anything in the dApp smart contracts. +The Biconomy Smart Account is an ERC 4337-compliant solution that works with any Paymaster and Bundler service. Smart Accounts are governed by code instead of ECDSA, which allows for other types of signature algorithms to be used with the Smart Account. Additionally, the smart accounts package allows you to quickly and easily build and execute User Operations or userOps. These are pseudo-transaction objects that eventually execute as a transaction on the EVM. -## How Does It Work? +The Biconomy Smart Accounts are signer agnostic, which allows you to use any authorization package of your choice as long as you can pass a signer to our SDK upon the creation of a Smart Account. Check out different ways you can create a Biconomy Smart Account [here](/docs/category/creating-accounts). -In the Biconomy SDK, the Smart Contract Wallet (SCW) is the foundation of the system and is created for every new user who joins a dApp. The SCW address is generated instantly when the user logs in, without needing any on-chain deployment. The actual smart contract is deployed along with the user's first transaction. -The Smart Contract Wallet, also known as Smart Account, is associated with the user's Externally Owned Account (EOA), like a traditional MetaMask account or an account generated via Social Login. It provides enhanced security compared to EOAs by allowing users to deposit and withdraw funds securely at any time. +Smart Accounts are further enhanced by validation modules that allow you to execute arbitrary logic before validating a userOp. This allows you, as a developer, to build modules that allow for session keys, multi-chain validation modules, pass keys, and more. -One notable feature is that the SCW address remains consistent across different blockchain chains, enabling a chainless experience for users within the dApp. By leveraging transaction bundling with Smart Contract Wallets using the Biconomy SDK, dApps can offer seamless and efficient interactions for their users. +![ModularSA](./images/overview/modularsa.png) -## How Smart Contract Wallets Work +If you want to start diving into Smart Accounts you can do so [here](/docs/category/smart-accounts). If you know all about Smart Accounts and prefer to start working with modules, start learning about them [here](/docs/category/modules) or follow this step-by-step [tutorial](/docs/category/session-keys-tutorial) on how to build a dApp that utilizes session key modules. -- The Biconomy Modular SDK introduces Smart Contract Wallets (SCW) that serve as a fundamental component of the system. Each SC Wallet is associated with an Externally Owned Account (EOA), acting as its owner. +## Paymaster -- The SC Wallet offers extensibility through support for various modules, such as MultiSig, Social Recovery Module, Recurring Transaction Module, Transaction Automation, Session Key Module, among others. These modules enhance wallet functionality without necessitating upgrades, enabling developers to tailor the user experience based on specific requirements. +Biconomy offers a Paymaster service designed with one of the best developer experiences in mind. Simply use one URL and switch modes between our sponsorship paymaster and our Token Paymaster. -- Transactions executed through the SC Wallet are initiated by the EOA using a cryptographic signature. The transaction data, along with the signature, is then relayed by a Relayer, ensuring secure and efficient transaction processing. +### Sponsorship Paymaster -- Notably, the user's SC Wallet address is counterfactual, meaning it can be generated without deploying smart contract code on-chain, thanks to the CREATE2 opcode. This characteristic allows the SC Wallet address to remain consistent across different EVM chains, providing a seamless and chain-agnostic user experience within the dApp. +![Sponsored](./images/overview/sponsored.png) -- All interactions within a dApp, both on a single chain and across multiple chains, occur through the SC Wallet. This unified approach streamlines user interactions and fosters efficient cross-chain functionality. +If the mode you choose in the request to the Paymaster URL is the sponsored mode, your users will benefit from gasless transactions, and you remove the friction point of needed native tokens to pay for gas on transactions. Learn how to set up your paymaster [here](/docs/dashboard/paymaster). -- the SC Wallet doubles as a Gas Tank for users, allowing them to use any token held in the wallet (accepted by the Paymaster) to pay gas fees during the same transaction. This capability enables dApps to implement transaction batching, empowering users to execute multiple actions in a single transaction, simplifying processes like approving and depositing. +### Token Paymaster + +![Erc20](./images/overview/erc20gas.png) + +Switching the mode of your Paymster to ERC20 allows you to unlock an experience where users can pay gas in any of our supported ERC20 tokens on different networks. Check out the latest supported tokens [here](/docs/supportedchains/supportedTokens). + +Learn how to utilize either of these Paymasters by checking out our How To Guide on [Executing transactions](/docs/category/executing-transactions) + +## Bundler + +The Bundler is a service that tracks userOps that exist in an alternative mem pool and as the name suggests, bundles them together to send to an Entry Point Contract for eventual execution onchain. This is the final piece of the flow where after constructing your userOp and then potentially signing it with data from a paymaster, you send the userOp on chain to be handled and executed as a transaction on the EVM. You can start using our Bundlers right now in your dApps; each of our [tutorials](/docs/category/tutorials) will walk you through how to use them in different scenarios.