feat: set transport in config (#3)

package.json

@@ -18,7 +18,7 @@
     "@zerodev/permissions": "^5.2.5",
     "@zerodev/sdk": "^5.2.11",
     "@zerodev/session-key": "^5.2.2",
-    "@zerodev/waas": "0.1.11-alpha.0",
+    "@zerodev/waas": "0.1.11-alpha.1",
     "encoding": "^0.1.13",
     "next": "14.1.4",
     "permissionless": "^0.1.16",

src/components/Button/CreateCustomizedKernelButton.tsx

@@ -7,25 +7,36 @@ import {
   createKernelAccountClient,
   createZeroDevPaymasterClient,
 } from "@zerodev/sdk";
-import { useSetKernelClient } from "@zerodev/waas";
+import { useChainId, useChains, useSetKernelClient } from "@zerodev/waas";
 import { ENTRYPOINT_ADDRESS_V07 } from "permissionless";
 import { EntryPoint } from "permissionless/types";
 import { useState } from "react";
-import { getAbiItem, http, toFunctionSelector, zeroAddress } from "viem";
+import {
+  createPublicClient,
+  getAbiItem,
+  http,
+  toFunctionSelector,
+  zeroAddress,
+  type Chain,
+} from "viem";
 import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";
-import { useChains, usePublicClient } from "wagmi";
 
 export function CreateCustomizedKernelButton() {
   const [isLoading, setIsLoading] = useState(false);
-  const publicClient = usePublicClient();
   const chains = useChains();
+  const chainId = useChainId();
   const { setKernelClient, error } = useSetKernelClient();
 
   const createKernelClient = async () => {
-    const chain = chains[0];
-    if (!publicClient || !chain) return;
+    const chain = chains.find((c: Chain) => c.id === chainId);
+    if (!chain) return;
     setIsLoading(true);
 
+    const publicClient = createPublicClient({
+      chain: chain,
+      transport: http(getBundler(chain.id)),
+    });
+
     try {
       const entryPoint = ENTRYPOINT_ADDRESS_V07 as EntryPoint;
       const generatedAccount = privateKeyToAccount(generatePrivateKey());
@@ -65,20 +76,16 @@ export function CreateCustomizedKernelButton() {
           },
         },
       });
-
       setKernelClient(kernelClient);
-    } catch (err) {}
+    } catch (err) {
+      console.log(err);
+    }
 
     setIsLoading(false);
   };
 
   return (
-    <Button
-      disabled={isLoading || !publicClient}
-      loading={isLoading}
-      variant="outline"
-      onClick={createKernelClient}
-    >
+    <Button loading={isLoading} variant="outline" onClick={createKernelClient}>
       Generate Private key
     </Button>
   );

src/components/Button/SelectChainButton.tsx

@@ -1,6 +1,7 @@
 import { Button, Flex, Menu } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
 import { useChainId, useChains, useSwitchChain } from "@zerodev/waas";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export const CustomChevronDown = () => (
   <svg fill="none" height="7" width="14" xmlns="http://www.w3.org/2000/svg">
@@ -19,7 +20,16 @@ export function SelectChainButton() {
   const chainId = useChainId();
   const chains = useChains();
   const [chainSwitching, setChainSwitching] = useState();
-  const { switchChain, isPending } = useSwitchChain();
+  const { switchChain, isPending, error } = useSwitchChain();
+
+  useEffect(() => {
+    if (error) {
+      notifications.show({
+        color: "red",
+        message: error?.message || "Switch chain failed",
+      });
+    }
+  }, [error]);
 
   return (
     <Menu>

src/components/Provider/Providers.tsx

@@ -26,6 +26,10 @@ export default function Providers({ children }: { children: ReactNode }) {
       [arbitrum.id]: process.env.NEXT_PUBLIC_ZERODEV_APP_ARBITRUM_ID || "",
       [sepolia.id]: process.env.NEXT_PUBLIC_ZERODEV_APP_SEPOLIA_ID || "",
     },
+    transports: {
+      [arbitrum.id]: http(getBundler(arbitrum.id)),
+      [sepolia.id]: http(getBundler(sepolia.id)),
+    },
   });
 
   return (