[SDK] Add EIP-5792 support for EIP1193.toProvider()

.changeset/smooth-ads-bathe.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add EIP-5792 support for EIP1193.toProvider()

apps/portal/src/app/wallets/adapters/page.mdx

@@ -63,10 +63,48 @@ export const config = createConfig({
 });
 ```
 
-Then in your application, you can use the connector to trigger the in-app wallet connection.
+### Using the ConnectButton or ConnectEmbed with a wagmi application
+
+You can use the thirdweb react connection components and hooks like ConnectButton, ConnectEmbed, useConnectModal, etc, but still keep using wagmi for the rest of the application.
+
+To do so, you will need to connect the `inAppWalletConnector` connector from the `@thirdweb-dev/wagmi-adapter` package with the connected thirdweb wallet.
+
+You can do this at any time after connecting the thirdweb wallet, a convenient place to do this is in the `onConnect` callback of the ConnectButton or ConnectEmbed.
+
+```tsx
+const { connectors, connect } = useConnect(); // from wagmi
+
+<ConnectButton
+    client={client}
+    onConnect={(wallet) => {
+      // connect the wagmi connector with the connected thirdweb wallet
+      const twConnector = connectors.find(
+        (c) => c.id === "in-app-wallet",
+      );
+      if (twConnector) {
+        const options = {
+          wallet, // pass the connected wallet
+        } satisfies ConnectionOptions; // for type safety
+        connect({
+          connector: twConnector,
+          chainId: chain.id,
+          ...options,
+        });
+      }
+    }}
+/>
+```
+
+Make sure your app is wrapped in a `<ThirdwebProvider>` as well as a `<WagmiProvider>` since both contexts will be used here. From there, the wallet state will be in sync between the 2 libraries.
+
+**Note:** the ConnectButton and ConnectEmbed handle reconnecting automatically on page reload. If not using those components (ie. useConnectModal or useConnect hooks directly), you will need to handle reconnecting by explicitely calling `useAutoConnect()`, and doing the same wagmi connection from the `onConnect` callback.
+
+### Using the connector directly (headless mode)
+
+You can also use the `inAppWalletConnector` connector directly in your application to connect to the thirdweb wallet without needing a `<ThirdwebProvider>` at all.
 
 ```ts
-const { connect, connectors } = useConnect();
+const { connect, connectors } = useConnect(); // from wagmi
 
 const onClick = () => {
   // grab the connector
@@ -79,9 +117,10 @@ const onClick = () => {
 };
 ```
 
+
 ### Converting a wagmi wallet client to a thirdweb wallet
 
-You can use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all of the react components and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
+You can also use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all of the react components and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
 
 ```ts
 // Assumes you've wrapped your application in a `<ThirdwebProvider>`

apps/wagmi-demo/src/App.tsx

@@ -2,11 +2,13 @@ import type { ConnectionOptions } from "@thirdweb-dev/wagmi-adapter";
 import { ConnectButton } from "thirdweb/react";
 import {
   useAccount,
+  useCallsStatus,
   useConnect,
   useDisconnect,
+  useSendCalls,
   useSendTransaction,
 } from "wagmi";
-import { chain, client } from "./wagmi.js";
+import { chain, client, thirdwebChainForWallet, wallet } from "./wagmi.js";
 
 function App() {
   const account = useAccount();
@@ -20,6 +22,17 @@ function App() {
     error: sendTxError,
     data: sendTxData,
   } = useSendTransaction();
+  const { sendCalls, data, isPending: isPendingSendCalls } = useSendCalls();
+  const {
+    data: callStatus,
+    isLoading: isLoadingCallStatus,
+    error: callStatusError,
+  } = useCallsStatus({
+    id: data?.id || "",
+    query: {
+      enabled: !!data?.id,
+    },
+  });
   return (
     <>
       <div>
@@ -44,6 +57,8 @@ function App() {
         <h2>Connect</h2>
         <ConnectButton
           client={client}
+          chain={thirdwebChainForWallet}
+          wallets={[wallet]}
           onConnect={(wallet) => {
             // auto connect to wagmi on tw connect
             const twConnector = connectors.find(
@@ -95,14 +110,40 @@ function App() {
           >
             Send Tx
           </button>
-          <div>{isPending ? "Sending..." : ""}</div>
+          <button
+            onClick={() =>
+              sendCalls({
+                calls: [
+                  {
+                    to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
+                    value: 0n,
+                  },
+                ],
+              })
+            }
+            type="button"
+          >
+            Send Calls
+          </button>
+          <div>
+            {isPending || isPendingSendCalls || isLoadingCallStatus
+              ? "Sending..."
+              : ""}
+          </div>
           <div>
             {isSuccess
               ? `Success: ${sendTxData}`
               : isError
                 ? sendTxError?.message
                 : ""}
           </div>
+          <div>
+            {callStatus
+              ? `Success: ${JSON.stringify(callStatus, null, 2)}`
+              : callStatusError
+                ? callStatusError?.message
+                : ""}
+          </div>
         </div>
       )}
     </>

apps/wagmi-demo/src/wagmi.ts

@@ -1,5 +1,6 @@
 import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
 import { createThirdwebClient, defineChain as thirdwebChain } from "thirdweb";
+import { inAppWallet } from "thirdweb/wallets/in-app";
 import { createConfig, http } from "wagmi";
 import { baseSepolia } from "wagmi/chains";
 
@@ -15,6 +16,13 @@ export const client = createThirdwebClient({
   clientId,
 });
 
+export const wallet = inAppWallet({
+  executionMode: {
+    mode: "EIP7702",
+    sponsorGas: true,
+  },
+});
+
 export const chain = baseSepolia;
 export const thirdwebChainForWallet = thirdwebChain(baseSepolia.id);
 
@@ -23,8 +31,8 @@ export const config = createConfig({
   connectors: [
     inAppWalletConnector({
       client,
-      smartAccount: {
-        chain: thirdwebChain(chain.id),
+      executionMode: {
+        mode: "EIP7702",
         sponsorGas: true,
       },
     }),