Add how to use sponsorship policy with permissionless.js

docs/pages/infra/platform/sponsorship-policies/index.mdx

@@ -1,13 +1,52 @@
 # How to use Sponsorship Policies
 
+## What are Sponsorship Policies?
+
 Sponsorship Policies are hosted policies that allow you to define custom rules for sponsorships.
 
 You can put limits to the global amount of sponsorships, the amount of sponsorships per user, and per user operation.
 
-Start by going to the [sponsorship policies page](https://dashboard.pimlico.io/sponsorship-policies) on the Pimlico dashboard and clicking on the "Create Policy" button.
+Start by going to the [sponsorship policies page](/infra/platform/sponsorship-policies) on the Pimlico dashboard and clicking on the "Create Policy" button.
 
 ![](https://i.imgur.com/sJM7l7m.png)
 
+## Usage of Sponsorship Policies with permisionless.js
+
+If you are using [permissionless.js](/permissionless), you can use the `PimlicoPaymasterClient` to use sponsorship policies.
+
+:::::steps
+
+### Create the clients
+
+First we must create the public, bundler, and (optionally) paymaster clients that will be used to interact with the SimpleAccount.
+
+```ts
+// [!include ~/snippets/infra/platform/sponsorship-policies/index.ts:client]
+```
+
+### Create an account
+
+Now, create an account. This can any of the accounts supported by permissionless.js or custom accounts conforming to the interface. For this example, we'll use a Simple account.
+
+```ts
+// [!include ~/snippets/infra/platform/sponsorship-policies/index.ts:account]
+```
+
+### Create the smart account client with middleware
+
+When creating the `smartAccountClient`, we can pass in a `middleware.sponsorUserOperation` function that will be called before a user operation is signed and sent.
+This is where we can pass in the `sponsorshipPolicyId` that we want to use.
+
+```ts
+// [!include ~/snippets/infra/platform/sponsorship-policies/index.ts:smart-account-client]
+```
+
+
+:::::
+
+
+## Usage of Sponsorship Policies API
+
 After creating a policy, you can take its ID and use it by passing it into the `pm_sponsorUserOperation` method. If the user operation does not meet the requirements of the policy, the method will return an error.
 
 ```json

docs/snippets/how-to/paymasters/conditional-sponsoring.ts

@@ -55,7 +55,7 @@ export const smartAccountClient = createSmartAccountClient({
 			if (sequence < 10) {
 				// sponsor it for the user as the sequence is less than 10
 				// sequence is the number of transactions sent by the user for a given key
-				// by default key is 0x0000000000000000000000000000000000000000000000000000000000000000
+				// by default key is 0x0
 				return paymasterClient.sponsorUserOperation(args)
 			}
 

docs/snippets/infra/platform/sponsorship-policies/index.ts

@@ -0,0 +1,54 @@
+// [!region client]
+import { createPublicClient, http } from "viem"
+import {
+	createPimlicoBundlerClient,
+	createPimlicoPaymasterClient,
+} from "permissionless/clients/pimlico"
+import { ENTRYPOINT_ADDRESS_V07 } from "permissionless"
+
+const publicClient = createPublicClient({
+	transport: http("https://rpc.ankr.com/eth_sepolia"),
+})
+
+const bundlerClient = createPimlicoBundlerClient({
+	transport: http("https://api.pimlico.io/v2/sepolia/rpc?apikey=YOUR_PIMLICO_API_KEY"),
+	entryPoint: ENTRYPOINT_ADDRESS_V07,
+})
+
+const pimlicoPaymasterClient = createPimlicoPaymasterClient({
+	transport: http("https://api.pimlico.io/v2/sepolia/rpc?apikey=YOUR_PIMLICO_API_KEY"),
+	entryPoint: ENTRYPOINT_ADDRESS_V07,
+})
+// [!endregion client]
+
+// [!region account]
+import { privateKeyToSimpleSmartAccount } from "permissionless/accounts"
+
+export const simpleSmartAccount = await privateKeyToSimpleSmartAccount(publicClient, {
+	privateKey: "0xPRIVATE_KEY",
+	entryPoint: ENTRYPOINT_ADDRESS_V07,
+})
+// [!endregion account]
+
+// [!region smart-account-client]
+import { sepolia } from "viem/chains"
+import { createSmartAccountClient } from "permissionless"
+
+export const smartAccountClient = createSmartAccountClient({
+	account: simpleSmartAccount,
+	entryPoint: ENTRYPOINT_ADDRESS_V07,
+	chain: sepolia, // or whatever chain you are using
+	bundlerTransport: http("https://api.pimlico.io/v2/sepolia/rpc?apikey=YOUR_PIMLICO_API_KEY"),
+	middleware: {
+		gasPrice: async () => {
+			return (await bundlerClient.getUserOperationGasPrice()).fast // if using pimlico bundlers
+		},
+		sponsorUserOperation: async (args) => {
+			return pimlicoPaymasterClient.sponsorUserOperation({
+				...args,
+				sponsorshipPolicyId: "sp_my_policy_id",
+			})
+		},
+	},
+})
+// [!endregion smart-account-client]