# 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.

:::tip[Let your coding agent do it]
Install the [Pimlico CLI](/references/platform/cli) and ask your coding agent:

> Follow docs.pimlico.io/references/permissionless/wagmi/tutorial/tutorial-1: create a Pimlico API key with the pimlico CLI and add gasless transactions to my wagmi app.
:::

## Steps

::::steps
### Get a Pimlico API key

Either use [our dashboard](/guides/create-api-key#using-the-dashboard) or the [Pimlico CLI](/guides/create-api-key#using-the-cli-recommended).

### 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.

:::code-group
```bash [pnpm]
pnpm create wagmi
```

```bash [npm]
npm create wagmi@latest
```

```bash [yarn]
yarn create wagmi
```

```bash [bun]
bun 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

:::code-group
```bash [pnpm]
pnpm install @permissionless/wagmi
```

```bash [npm]
npm install @permissionless/wagmi
```

```bash [yarn]
yarn install @permissionless/wagmi
```

```bash [bun]
bun install @permissionless/wagmi
```
:::

### Create capabilities & config

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

```tsx
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.

:::code-group
```tsx [App.tsx]
import { WagmiProvider } from "wagmi"
import { baseSepolia } from "wagmi/chains"
import { PermissionlessProvider } from "@permissionless/wagmi" // [!code focus]
import { config, capabilities } from "./wagmi.ts" // [!code focus]

ReactDOM.createRoot(root).render(
  <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
          <PermissionlessProvider // [!code focus]
              capabilities={capabilities} // [!code focus]
          > // [!code focus]
              {/** ... */}
          </PermissionlessProvider> // [!code focus]
      </QueryClientProvider>
  </WagmiProvider>
)
```

```tsx [wagmi.ts]
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")
    }
})

export const capabilities = {
  paymasterService: {
    [baseSepolia.id]: {
        url: `https://api.pimlico.io/v2/${baseSepolia.id}/rpc?apikey=${pimlicoApiKey}`
    }
  }
}
```
:::

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.

```tsx [App.tsx]
import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi" // [!code --] // [!code focus]
import {  // [!code ++] // [!code focus]
    useSendTransaction,  // [!code ++] // [!code focus]
    useWaitForTransactionReceipt  // [!code ++] // [!code focus]
} from "@permissionless/wagmi"  // [!code ++] // [!code focus]

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.

:::info
The above code will sponsor transactions only when the external account is a smart account and supports ERC-7677. If the external account doesn't have the capability, the transaction will be sent as a normal transaction.
:::
::::

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](https://t.me/pimlicoHQ) if you have any questions or if you'd like to share what you're building!