Connect 4337
Cometh ConnectCometh MarketplaceCometh Checkout
  • 🚀Quick start
    • What is Connect 4337
    • Getting started
    • Supported Networks
  • 🛠️CORE FEATURES
    • Create a Wallet
    • Send transactions
    • Go Gasless
    • Sign/Verify a message
    • Retrieve a wallet address
    • Handle owners
    • Import a safe into connect
  • 🥷ADVANCED
    • Session Keys
      • Tutorial
      • Policies
        • Sudo policy
        • Action policy
    • Social recovery
    • Add a passkey signer on a different OS
    • Capabilities
      • sendCalls
      • getCallsStatus
      • getCapabilities
      • grantPermissions
    • Other signers (Auth Providers)
      • EOA wallets (Metamask, Phantom...)
      • Magic signer
      • Web3Auth signer
      • Turnkey signer
      • Privy signer
  • 🔌Integrations
    • React hooks
      • ConnectProvider
      • useAccount
      • useConnect
      • useDisconnect
      • useGetGasPrice
      • useSendTransaction
      • useSignMessage
      • useVerifyMessage
      • useWriteContract
      • Handle owners
        • useRemoveOwner
        • useValidateAddDevice
        • useCreateNewSigner
        • useAddOwner
        • useGetOwners/EnrichedOwners
      • Session Keys
        • useGrantPermission
        • useSendPermission
        • useSessionKeyClient
        • useSessionKeySigner
      • Recovery
        • useIsRecoveryActive
        • useSetUpRecovery
        • useGetRecoveryRequest
        • useCancelRecoveryRequest
    • Mobile SDKs
      • IOS
      • Android
      • React Native
    • Wagmi
  • SDK Core
    • Signers (Auth Providers)
      • EOA wallets (Metamask, Phantom...)
      • Magic signer
      • Web3Auth signer
      • Turnkey signer
      • Privy signer
    • Handle owners
    • Capabilities
      • sendCalls
      • getCallsStatus
      • getCapabilities
  • SDK Session Keys
    • Setup Smart Account Client
    • Manage session keys
    • Policies
      • Sudo policy
      • Action policy
  • 📦Bundler
    • Bundler API
      • eth_sendUserOperation
      • eth_estimateUserOperationGas
      • eth_getUserOperationByHash
      • eth_getUserOperationReceipt
      • eth_supportedEntryPoints
  • 💳Paymaster
    • Paymaster API
  • 📖RESOURCES
    • Migrate from the connect legacy SDK
    • Connect Legacy SDKs (Unity, JS)
    • FAQ
Powered by GitBook
On this page
  • Setup
  • Integration
  1. ADVANCED
  2. Other signers (Auth Providers)

Magic signer

PreviousEOA wallets (Metamask, Phantom...)NextWeb3Auth signer

Last updated 2 months ago

is a popular embedded wallet provider that supports social logins, making it easier for users to onboard without managing private keys. However, users still need to acquire crypto to pay for gas, which can create friction.

By integrating Magic with Connect 4337, you can offer a seamless social login experience while using Cometh Connect's smart wallets to sponsor gas fees, batch transactions, and more. This combination allows you to abstract blockchain complexities and enhance the UX of your dApp.

Setup

To use Magic with Connect 4337, first create an application that integrates with Magic.

  • Refer to the for instructions on setting up an application with the Magic SDK.

  • For a quick start, Magic provides a CLI to create a starter project, available .

Integration

After following the Magic documentation, you will have access to a MagicBase object as shown below that you can pass as an owner to createSafeSmartAccount:

import { OAuthExtension } from "@magic-ext/oauth"
import { Magic as MagicBase } from "magic-sdk"
import { providerToSmartAccountSigner } from "@cometh/connect-sdk-4337";


const rpcUrl = process.env.RPC_URL;
const magicApiKey = process.env.MAGIC_API_KEY;

const magic = new MagicBase(magicApiKey as string, {
	network: {
		rpcUrl,
		chainId: arbitrumSepolia.id,
	},
	extensions: [new OAuthExtension()],
})
 
// Get the Provider from Magic and convert it to a signer
const magicProvider = await magic.wallet.getProvider()
const signer = await providerToSmartAccountSigner(magicProvider);
  

Use it with Connect 4337:

import {
    createComethPaymasterClient,
    createSafeSmartAccount,
    createSmartAccountClient,
} from "@cometh/connect-sdk-4337";
import { type Hex, type PublicClient, createPublicClient, http } from "viem";
import { arbitrumSepolia } from "viem/chains";


const apiKey = process.env.COMETH_API_KEY;
const bundlerUrl = process.env.4337_BUNDLER_URL;
const paymasterUrl = process.env.NEXT_PUBLIC_4337_PAYMASTER_URL;

const publicClient = createPublicClient({
    chain: arbitrumSepolia,
    transport: http(),
    cacheTime: 60_000,
    batch: {
        multicall: { wait: 50 },
    },
}) as PublicClient;

const smartAccount = await createSafeSmartAccount({
    apiKey,
    signer,
    chain: arbitrumSepolia,
    publicClient,
    smartAccountAddress //if smart account already exists
 });
 
const walletAddress = smartAccount.address

const paymasterClient = await createComethPaymasterClient({
    transport: http(paymasterUrl),
    chain: arbitrumSepolia,
    publicClient,
});

const smartAccountClient = createSmartAccountClient({
    account: smartAccount,
    chain: arbitrumSepolia,
    bundlerTransport: http(bundlerUrl, {
        retryCount: 5,
        retryDelay: 1000,
        timeout: 20_000,
    }),
    paymaster: paymasterClient,
    userOperation: {
        estimateFeesPerGas: async () => {
            return await paymasterClient.getUserOperationGasPrice();
        },
    },
});
  
🥷
Magic
Magic documentation site
here