Add EIP-5792 wallet capabilities support

Author: joaquim-verges

apps/playground-web/src/app/connect/account-abstraction/5792/page.tsx

@@ -0,0 +1,106 @@
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+import { Eip5792GetCapabilitiesPreview } from "../../../../components/account-abstraction/5792-get-capabilities";
+import { Eip5792SendCallsPreview } from "../../../../components/account-abstraction/5792-send-calls";
+import { PageLayout } from "../../../../components/blocks/APIHeader";
+import { CodeExample } from "../../../../components/code/code-example";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "EIP-5792 Wallet Capabilities | thirdweb Connect",
+  description:
+    "EIP-5792 capabilities allow you to view the capabilities of the connected wallet",
+};
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <PageLayout
+        title="EIP-5792 Wallet Capabilities"
+        description={
+          <>
+            EIP-5792 capabilities allow you to view the capabilities of the
+            connected wallet.
+          </>
+        }
+        docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+      >
+        <div className="flex flex-col gap-14">
+          <Eip5792GetCapabilities />
+          <Eip5792SendCalls />
+        </div>
+      </PageLayout>
+    </ThirdwebProvider>
+  );
+}
+
+function Eip5792GetCapabilities() {
+  return (
+    <>
+      <CodeExample
+        header={{
+          title: "Getting the wallet capabilities",
+          description:
+            "Get the capabilities of the connected wallet using the useCapabilities hook",
+        }}
+        preview={<Eip5792GetCapabilitiesPreview />}
+        code={`\
+import { useCapabilities } from "thirdweb/react";
+
+function App() {
+  // requires a connected wallet
+  // try metamask or coinbase wallet to view their capabilities
+  // works with in-app wallets too!
+  const capabilities = useCapabilities();
+  console.log(capabilities);
+
+  return <div>Capabilities: {JSON.stringify(capabilities)}</div>;
+}
+`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function Eip5792SendCalls() {
+  return (
+    <>
+      <CodeExample
+        header={{
+          title: "Sending calls to the wallet",
+          description:
+            "Send batched calls to the connected wallet using the useSendCalls hook",
+        }}
+        preview={<Eip5792SendCallsPreview />}
+        lang="tsx"
+        code={`\
+import { useSendCalls } from "thirdweb/react";
+
+function App() {
+  const sendCalls = useSendCalls({
+    client,
+    waitForResult: true,
+  });
+
+  const handleClick = async () => {
+    const result = await sendCalls.mutateAsync({
+      calls: [firstTransaction, secondTransaction],
+    });
+    // result can be a either the transaction id
+    // or the full transaction receipt if waitForResult is true
+    if (typeof result === "string") {
+      console.log("Transaction id", result);
+    } else {
+      console.log("Transaction hash", result.receipts?.[0]?.transactionHash);
+    }
+  };
+
+  return <button onClick={handleClick}>Send calls</button>;
+}
+`}
+      />
+    </>
+  );
+}

apps/playground-web/src/app/connect/account-abstraction/7702/page.tsx

@@ -35,6 +35,11 @@ function Eip7702SmartAccount() {
   return (
     <>
       <CodeExample
+        header={{
+          title: "Turning in-app wallets into EIP-7702 smart accounts",
+          description:
+            "In-app wallets can be turned into EIP-7702 smart accounts by changing the execution mode",
+        }}
         preview={<Eip7702SmartAccountPreview />}
         code={`\
 import { claimTo } from "thirdweb/extensions/erc1155";

apps/playground-web/src/app/navLinks.ts

@@ -58,6 +58,10 @@ const staticSidebarLinks: SidebarLink[] = [
             name: "EIP-7702",
             href: "/connect/account-abstraction/7702",
           },
+          {
+            name: "EIP-5792",
+            href: "/connect/account-abstraction/5792",
+          },
           {
             name: "Native (zkSync)",
             href: "/connect/account-abstraction/native-aa",

apps/playground-web/src/components/account-abstraction/5792-get-capabilities.tsx

@@ -0,0 +1,55 @@
+"use client";
+import { sepolia } from "thirdweb/chains";
+import {} from "thirdweb/extensions/erc1155";
+import {
+  ConnectButton,
+  useActiveWallet,
+  useCapabilities,
+  useWalletInfo,
+} from "thirdweb/react";
+import { createWallet } from "thirdweb/wallets";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import CodeClient from "../code/code.client";
+
+export function Eip5792GetCapabilitiesPreview() {
+  const capabilities = useCapabilities();
+  const activeWallet = useActiveWallet();
+  const walletInfo = useWalletInfo(activeWallet?.id);
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      {capabilities.isLoading ? (
+        <div className="mt-24 w-full">Loading...</div>
+      ) : (
+        <>
+          <div className="flex flex-col justify-center gap-2 p-2">
+            <ConnectButton
+              client={THIRDWEB_CLIENT}
+              chain={sepolia}
+              wallets={[
+                createWallet("io.metamask"),
+                createWallet("com.coinbase.wallet"),
+              ]}
+              connectButton={{
+                label: "Login to view wallet capabilities",
+              }}
+            />
+          </div>
+          <p className="text-lg">
+            {walletInfo.data?.name || "Wallet"} Capabilities
+          </p>
+          {capabilities.data ? (
+            <CodeClient
+              code={JSON.stringify(capabilities.data, null, 2)}
+              lang="json"
+              loader={<div className="mt-24 w-full">Loading...</div>}
+              className="max-h-[500px] w-[400px] overflow-y-auto"
+              scrollableContainerClassName="h-full"
+              scrollableClassName="h-full"
+            />
+          ) : null}
+        </>
+      )}
+    </div>
+  );
+}

apps/playground-web/src/components/account-abstraction/5792-send-calls.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useState } from "react";
+import { getContract } from "thirdweb";
+import { sepolia } from "thirdweb/chains";
+import { claimTo } from "thirdweb/extensions/erc1155";
+import { getNFT, getOwnedNFTs } from "thirdweb/extensions/erc1155";
+import {
+  ConnectButton,
+  MediaRenderer,
+  useActiveAccount,
+  useReadContract,
+  useSendCalls,
+} from "thirdweb/react";
+import { shortenHex } from "thirdweb/utils";
+import { createWallet } from "thirdweb/wallets";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { Button } from "../ui/button";
+
+const chain = sepolia;
+
+const editionDropContract = getContract({
+  address: "0x7B3e0B8353Ad5cD6C60355B50550F63335752f9F",
+  chain,
+  client: THIRDWEB_CLIENT,
+});
+
+const editionDropContract2 = getContract({
+  address: "0xe2cb0eb5147b42095c2FfA6F7ec953bb0bE347D8",
+  chain,
+  client: THIRDWEB_CLIENT,
+});
+
+export function Eip5792SendCallsPreview() {
+  const [txHash, setTxHash] = useState<string | null>(null);
+  const activeEOA = useActiveAccount();
+  const { data: nft, isLoading: isNftLoading } = useReadContract(getNFT, {
+    contract: editionDropContract2,
+    tokenId: 0n,
+  });
+  const { data: nft2, isLoading: isNft2Loading } = useReadContract(getNFT, {
+    contract: editionDropContract,
+    tokenId: 1n,
+  });
+  const { data: ownedNfts } = useReadContract(getOwnedNFTs, {
+    contract: editionDropContract,
+    useIndexer: false,
+    // biome-ignore lint/style/noNonNullAssertion: handled by queryOptions
+    address: activeEOA?.address!,
+    queryOptions: { enabled: !!activeEOA },
+  });
+  const { data: ownedNfts2 } = useReadContract(getOwnedNFTs, {
+    contract: editionDropContract2,
+    useIndexer: false,
+    // biome-ignore lint/style/noNonNullAssertion: handled by queryOptions
+    address: activeEOA?.address!,
+    queryOptions: { enabled: !!activeEOA },
+  });
+
+  const sendCalls = useSendCalls({
+    client: THIRDWEB_CLIENT,
+    waitForResult: true,
+  });
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      {isNftLoading || isNft2Loading ? (
+        <div className="mt-24 w-full">Loading...</div>
+      ) : (
+        <>
+          <div className="flex flex-col justify-center gap-2 p-2">
+            <ConnectButton
+              client={THIRDWEB_CLIENT}
+              chain={sepolia}
+              wallets={[
+                createWallet("io.metamask"),
+                createWallet("com.coinbase.wallet"),
+              ]}
+              connectButton={{
+                label: "Login to mint!",
+              }}
+            />
+          </div>
+          <p className="font-semibold text-lg">Send batched transactions</p>
+          <div className="flex flex-row items-center gap-2 p-2">
+            {nft ? (
+              <MediaRenderer
+                client={THIRDWEB_CLIENT}
+                src={nft.metadata.image}
+                style={{ width: "100px", marginTop: "10px" }}
+              />
+            ) : null}
+            <p className="text-2xl">+</p>
+            {nft2 ? (
+              <MediaRenderer
+                client={THIRDWEB_CLIENT}
+                src={nft2.metadata.image}
+                style={{ width: "100px", marginTop: "10px" }}
+              />
+            ) : null}
+          </div>
+          {activeEOA ? (
+            <div className="flex flex-col justify-center gap-4 p-2">
+              <p className="mb-2 text-center font-semibold">
+                You own {ownedNfts?.[0]?.quantityOwned.toString() || "0"}{" "}
+                {nft?.metadata?.name} and{" "}
+                {ownedNfts2?.[0]?.quantityOwned.toString() || "0"}{" "}
+                {nft2?.metadata?.name}
+              </p>
+              <Button
+                onClick={async () => {
+                  const result = await sendCalls.mutateAsync({
+                    calls: [
+                      claimTo({
+                        contract: editionDropContract2,
+                        tokenId: 0n,
+                        to: activeEOA.address,
+                        quantity: 1n,
+                      }),
+                      claimTo({
+                        contract: editionDropContract,
+                        tokenId: 1n,
+                        to: activeEOA.address,
+                        quantity: 1n,
+                      }),
+                    ],
+                  });
+                  if (typeof result === "string") {
+                    setTxHash(result);
+                  } else {
+                    setTxHash(result?.receipts?.[0]?.transactionHash);
+                  }
+                }}
+              >
+                {sendCalls.isPending
+                  ? "Minting..."
+                  : "Batch Mint with EIP-5792"}
+              </Button>
+            </div>
+          ) : null}
+          {txHash ? (
+            <div className="flex flex-col justify-center p-2">
+              <p className="mb-2 text-center text-green-500">
+                Minted! Tx Hash:{" "}
+                <a
+                  href={`${chain.blockExplorers?.[0]?.url}/tx/${txHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  {shortenHex(txHash)}
+                </a>
+              </p>
+            </div>
+          ) : null}
+        </>
+      )}
+    </div>
+  );
+}