Tutorial 1 — Send your first gasless transaction

In this tutorial, you will submit your first fully-gasless transaction from an external smart account.

You will set up the necessary @permissionless/wagmi' PermissionlessProvider, paymasterService, ask Pimlico's verifying paymaster to sponsor it, and then ask external smartAccount to submit it on-chain.

Steps

Get a Pimlico API key

To get started, please go to our dashboard and generate a Pimlico API key.

Create a wagmi app

For new projects, it is recommended to set up your Wagmi app using the create-wagmi command line interface (CLI). This will create a new Wagmi project using TypeScript and install the required dependencies.

pnpm

pnpm create wagmi

Once the command runs, you'll see some prompts to complete. Make sure you select React as @permissionless/wagmi only supports React as of now.

After the prompts, create-wagmi will create a directory with your project name and install the required dependencies. Check out the README.md for further instructions (if required).

Install @permissionless/wagmi

pnpm

pnpm install @permissionless/wagmi

Create capabilities & config

Create capabilities for the chains that you would like to sponsor the transactions for the users.

export const config = createConfig({
    chains: [baseSepolia],
    connectors: [
        // coinbase wallet is one of the smart accounts that supports ERC-7677
        coinbaseWallet({ appName: "Pimlico", preference: "smartWalletOnly" })
    ],
    transports: {
        [baseSepolia.id]: http("https://sepolia.base.org")
    }
})
 
const capabilities = {
  paymasterService: {
    [baseSepolia.id]: {
        url: `https://api.pimlico.io/v2/${baseSepolia.id}/rpc?apikey=${pimlicoApiKey}`
    }
  }
}

In this example, you can integrate any service provider that complies with the ERC-7677 standard. For demonstration purposes, we are using Pimlico as the paymaster service provider.

Ensure you configure the service for all the blockchain networks where you plan to sponsor transactions. We are showcasing sponsorship for baseSepolia.

Wrap App in Context Provider

Wrap your app in the PermissionlessProvider React Context Provider and pass the capabilities you created earlier.

App.tsx

import { WagmiProvider } from "wagmi"
import { baseSepolia } from "wagmi/chains"
import { PermissionlessProvider } from "@permissionless/wagmi"
import { config, capabilities } from "./wagmi.ts"
 
ReactDOM.createRoot(root).render(
  <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
          <PermissionlessProvider
              capabilities={capabilities}
          >
              {/** ... */}
          </PermissionlessProvider>
      </QueryClientProvider>
  </WagmiProvider>
)

Check out the PermissionlessProvider docs to learn more about React Context in @permissionless/wagmi.

Use @permissionless/wagmi

Now that everything is set up, every component inside the Permissionless Provider can use Permissionless React Hooks.

App.tsx

import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi"
import {  
    useSendTransaction,  
    useWaitForTransactionReceipt  
} from "@permissionless/wagmi"
 
function App() {
  const {
    sendTransaction,
    data: transactionReference,
    isPending
  } = useSendTransaction()
  
  const { data: receipt, isPending: isReceiptPending } =
    useWaitForTransactionReceipt({
      id: transactionReference
    })
 
  const sendTransactionCallback = useCallback(async () => {
    console.log("Sending transaction...")
    sendTransaction({
      to: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
      data: "0x1234"
    })
  }, [sendTransaction])
 
  return (
    <div style={{ marginTop: 60 }}>
      <h2>Send test transaction</h2>
 
      {isPending && <div>Sending transaction...</div>}
 
      {transactionReference && (
        <div>Awaiting confirmation: {transactionReference}</div>
      )}
 
      {receipt && <div>{receipt.status}</div>}
 
      <button onClick={sendTransactionCallback} type="button">
        Send Transaction
      </button>
    </div>
  )
}

As you notice, @permissionless/wagmi exposes the same api as wagmi. @permissionless/wagmi is a drop-in replacement for wagmi that provides the same functionality, but with the added benefit of being able to use sponsor transactions.

To test the above code connect using Coinbase SmartAccount and try sending your first transaction. By sending this transaction, you will have:

Made Pimlico's verifying paymaster sponsor the user operation's gas fees
Executed a simple sponsored transaction to vitalik.eth's address from the Coinbase SmartAccount

All in a couple lines of code.

Congratulations, you are now a pioneer of Account Abstraction! 🎉

Please get in touch if you have any questions or if you'd like to share what you're building!