Fix send transaction when multiple chains configured (#316)

* Fix tests

* Add changeset

* Support both single and multiple url configuration

.changeset/thin-peas-remain.md

@@ -0,0 +1,5 @@
+---
+"@permissionless/wagmi": patch
+---
+
+Fixed sendTransaction when multiple chainIds are configured

.gitignore

@@ -11,7 +11,7 @@ coverage
 node_modules
 tsconfig*.tsbuildinfo
 esbuild-why-permissionless*
-
+temp.ts
 # local env files
 .env
 .env.local

biome.json

@@ -11,7 +11,8 @@
             "_cjs",
             "_esm",
             "_types",
-            "bun.lockb"
+            "bun.lockb",
+            "temp.ts"
         ]
     },
     "organizeImports": {

packages/wagmi-demo/src/main.tsx

@@ -7,10 +7,9 @@ import ReactDOM from "react-dom/client"
 import { WagmiProvider } from "wagmi"
 
 import App from "./App.tsx"
-import { config } from "./wagmi.ts"
+import { capabilities, config } from "./wagmi.ts"
 
 import "./index.css"
-import { baseSepolia } from "viem/chains"
 
 globalThis.Buffer = Buffer
 
@@ -25,15 +24,7 @@ ReactDOM.createRoot(root).render(
         <WagmiProvider config={config}>
             <QueryClientProvider client={queryClient}>
                 {/* Call it generic 5792 provider */}
-                <PermissionlessProvider
-                    capabilities={{
-                        paymasterService: {
-                            [baseSepolia.id]: {
-                                url: `https://api.pimlico.io/v2/${baseSepolia.id}/rpc?apikey=`
-                            }
-                        }
-                    }}
-                >
+                <PermissionlessProvider capabilities={capabilities}>
                     <App />
                 </PermissionlessProvider>
             </QueryClientProvider>

packages/wagmi-demo/src/wagmi.ts

@@ -1,17 +1,30 @@
-import { baseSepolia } from "viem/chains"
+import { sepolia } from "viem/chains"
 import { http, createConfig } from "wagmi"
 import { coinbaseWallet } from "wagmi/connectors"
 
+const pimlicoApiKey = process.env.PIMLICO_API_KEY
+
 export const config = createConfig({
-    chains: [baseSepolia],
+    chains: [sepolia],
     connectors: [
-        coinbaseWallet({ appName: "Pimlico", preference: "smartWalletOnly" })
+        coinbaseWallet({
+            appName: "Pimlico Test",
+            preference: "smartWalletOnly"
+        })
     ],
     transports: {
-        [baseSepolia.id]: http("https://sepolia.base.org")
+        [sepolia.id]: http("https://sepolia.base.org")
     }
 })
 
+export const capabilities = {
+    paymasterService: {
+        [sepolia.id]: {
+            url: `https://api.pimlico.io/v2/${sepolia.id}/rpc?apikey=${pimlicoApiKey}`
+        }
+    }
+}
+
 declare module "wagmi" {
     interface Register {
         config: typeof config

packages/wagmi/hooks/useSendTransaction.ts

@@ -29,9 +29,24 @@ const sendTransactionMutationOptions = <config extends Config>(
     return {
         mutationFn(variables) {
             if (parameters.capabilities) {
+                const client = config.getClient({ chainId: variables.chainId })
+
+                const paymasterServiceUrl = parameters.capabilities
+                    ?.paymasterService?.url
+                    ? parameters.capabilities?.paymasterService?.url
+                    : parameters.capabilities?.paymasterService[client.chain.id]
+                          ?.url
+
                 return sendCalls(config, {
                     calls: [variables],
-                    capabilities: parameters.capabilities
+                    capabilities: {
+                        ...parameters.capabilities,
+                        paymasterService: paymasterServiceUrl
+                            ? {
+                                  url: paymasterServiceUrl
+                              }
+                            : undefined
+                    }
                 })
             }