Quickstart
The Magmar Toolkit SDK provides two initialization options, tailored to different integration needs. Choose the method that best suits your use case:
🛠️ Initialization Method
For other integration methods, such as Metamask, Social Logins, or Private Key-based initialization, use the AAmagmar initialization method. This provides flexibility for various use cases when integrating the SDK into your application.
import { AAmagmar } from '@magmar-toolkit/magmar-aa-sdk';
const apiKey = 'YOUR_API_KEY'; // Replace with your API key
const client = new AAmagmar(apiKey);
const options = {
chainId: 1, // Required: Replace with the desired chain ID
privateKey: 'YOUR_PRIVATE_KEY', // Optional: Provide your private key if needed
rpcUrl: 'YOUR_RPC_URL', // Optional: Specify your custom RPC URL if needed
isSponsoredTrx: false, // Optional: Set to true if using sponsored transactions
paymasterEndpoint: 'PAYMASTER_ENDPOINT', // Optional: Specify your custom paymaster endpoint
paymaster: 'PIMLICO', // Optional: Choose a paymaster type ("PIMLICO" or "MAGMAR")
bundlerEndpoint: 'BUNDLER_URL'
};
const smartAccountAddress = await client.init(provider, options);
console.log("Smart account address", smartAccountAddress);Using Social Login
Social logins, such as Google, Facebook, X (formerly Twitter), Discord, and others, can be used to create wallets for users and utilize the signers provided by these platforms. Services like Web3Auth and Particle Auth simplify the process of creating Ethereum wallets using social login. Below is a guide to integrating these services with the Magmar SDK.
🌐 Particle Auth
Particle Auth makes it easy for Web2 users to transition to the Web3 ecosystem by offering familiar login methods. Users can log in to your dApp using platforms like Google, Apple ID, Facebook, and Twitter, as well as via email or mobile number without requiring a password.
Step 1: Include Particle Network SDK Script
To start, add the Particle Network SDK to your project using Yarn:
yarn add @particle-network/auth
// If you need support for EVM chains
yarn add @particle-network/provider
// If you need support for the Solana chain
yarn add @particle-network/solana-walletAlternatively, include the SDK directly in your browser with the following scripts:
<script src="https://static.particle.network/sdks/web/auth/1.2.1/auth.min.js"></script>
<!-- Optional: Add EVM Chains support -->
<script src="https://static.particle.network/sdks/web/provider/1.2.0/provider.min.js"></script>
<!-- Optional: Add Solana Chain support -->
<script src="https://static.particle.network/sdks/web/solana-wallet/1.0.2/solana-wallet.min.js"></script>Step 2: Set Up Developer API Key
Before adding the Auth Service to your app, create a Particle project. Visit the Particle Dashboard to set up your project and obtain your API key.
import { ParticleNetwork, WalletEntryPosition } from "@particle-network/auth";
import { ParticleProvider } from "@particle-network/provider";
import { SolanaWallet } from "@particle-network/solana-wallet";
import { Ethereum } from "@particle-network/chains";
import Web3 from "web3";
const particle = new ParticleNetwork({
projectId: "xx",
clientKey: "xx",
appId: "xx",
chainName: Ethereum.name, // Optional: Current chain name, default is Ethereum.
chainId: Ethereum.id, // Optional: Current chain ID, default is 1.
wallet: { // Optional: Wallet entry display settings
displayWalletEntry: true, // Show wallet entry on connection
defaultWalletEntryPosition: WalletEntryPosition.BR, // Position of wallet entry
uiMode: "dark", // Optional: Choose between light or dark mode
supportChains: [{ id: 1, name: "Ethereum"}, { id: 5, name: "Ethereum"}], // Optional: Supported chains
customStyle: {}, // Optional: Custom wallet style
},
securityAccount: { // Optional: Security account settings
promptSettingWhenSign: 1, // Prompt to set payment password: 0 - None, 1 - Once (default), 2 - Always
promptMasterPasswordSettingWhenLogin: 1 // Prompt to set master password: 0 - None (default), 1 - Once, 2 - Always
},
});
const particleProvider = new ParticleProvider(particle.auth);
// If you need support for Solana chain
const solanaWallet = new SolanaWallet(particle.auth);
// If using Web3.js
window.web3 = new Web3(particleProvider);
window.web3.currentProvider.isParticleNetwork // => true
// If using Ethers.js
import { ethers } from "ethers";
const ethersProvider = new ethers.providers.Web3Provider(particleProvider);Use this ethersProvider while initializing the Magmar SDK:
const client = new AAmagmar(apiKey);
const address = await client.init(ethersProvider, options);Follow the instructions in other modules to proceed with the setup.
🌉 Web3Auth
Web3Auth simplifies user onboarding for both mainstream and crypto-native users. It supports OAuth-based login systems and works seamlessly on both web and mobile platforms.
Step 1: Install Web3Auth
Install the Web3Auth package in your React project:
npm install --save @web3auth/modalStep 2: Get Your Client ID
Visit the Web3Auth Dashboard and create a new project. Use the Client ID from the project to start your integration.
Step 3: Initialize Web3Auth for Your Preferred Blockchain
Web3Auth should be initialized as soon as your app loads. Below is an example for initializing Web3Auth for Ethereum:
import { Web3Auth } from "@web3auth/modal";
// Initialize within useEffect()
const web3auth = new Web3Auth({
clientId: "YOUR_CLIENT_ID", // Replace with your Client ID
web3AuthNetwork: "sapphire_mainnet", // Web3Auth Network
chainConfig: {
chainNamespace: "eip155",
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth",
displayName: "Ethereum Mainnet",
blockExplorer: "https://goerli.etherscan.io",
ticker: "ETH",
tickerName: "Ethereum",
},
});
await web3auth.initModal();Step 4: Log In Your User and Get the Provider
After initialization, create a button to trigger the login modal for the user:
const web3authProvider = await web3auth.connect();
// If using Ethers.js
import { ethers } from "ethers";
const ethersProvider = new ethers.providers.Web3Provider(web3authProvider);Use this ethersProvider to initialize the Magmar SDK:
const client = new AAmagmar(apiKey);
const address = await client.init(ethersProvider, options);Then, follow the steps to send transactions according to your application's requirements.
🔐 For Telegram Login Integration
If you plan to use Telegram for login and authentication, use the MagmarTG initialization method. This option is ideal for enabling users to log in with their Telegram accounts and wallets linked to Telegram.
import { AAmagmarTG, TelegramClientOptions } from '@magmar-toolkit/magmar-aa-sdk';
const apiKey = 'YOUR_API_KEY'; // Replace with your API key
const clientOptions: TelegramClientOptions = {
chainId: 1, // Required: Replace with the desired chain ID
telegramUserId: 'YOUR_TELEGRAM_USER_ID', // Required: Specify the Telegram user ID
walletAddress: 'YOUR_WALLET_ADDRESS', // Required: Provide the wallet address
rpcUrl: 'YOUR_RPC_URL', // Optional: Specify your custom RPC URL if needed
isSponsoredTrx: false, // Optional: Set to true if using sponsored transactions
paymasterEndpoint: 'PAYMASTER_ENDPOINT', // Optional: Specify your custom paymaster endpoint
paymaster: 'MAGMAR', // Optional: Choose a paymaster type ("PIMLICO" or "MAGMAR")
bundlerEndpoint: 'BUNDLER_URL'
};
const client = new AAmagmarTG(apiKey, clientOptions);
const smartAccountAddress = await client.init(provider);
console.log("Smart account address", smartAccountAddress);🎉 You're Ready to Build
Now that you've successfully initialized the Magmar SDK, you're all set to start building your application and leveraging the power of account abstraction and blockchain interactions.
Explore the rest of the documentation for more advanced features and detailed guides. Enjoy using the SDK!
Last updated