[SDK] Add enclave wallet message signing and minimal account implementation

Author: joaquim-verges

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

@@ -0,0 +1,76 @@
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+import { Eip7702SmartAccountPreview } from "../../../../components/account-abstraction/7702-smart-account";
+import { PageLayout } from "../../../../components/blocks/APIHeader";
+import { CodeExample } from "../../../../components/code/code-example";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "EIP-7702 Smart Accounts",
+  description:
+    "EIP-7702 smart accounts allow you to turn your EOA into a smart account with no code changes",
+};
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <PageLayout
+        title="EIP-7702 Smart Accounts"
+        description={
+          <>
+            EIP-7702 smart accounts allow you to turn your EOA into a smart
+            account with no code changes.
+          </>
+        }
+        docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+      >
+        <Eip7702SmartAccount />
+      </PageLayout>
+    </ThirdwebProvider>
+  );
+}
+
+function Eip7702SmartAccount() {
+  return (
+    <>
+      <CodeExample
+        preview={<Eip7702SmartAccountPreview />}
+        code={`\
+import { claimTo } from "thirdweb/extensions/erc1155";
+import { TransactionButton } from "thirdweb/react";
+
+function App() {
+  return (
+    <>
+      <ConnectButton
+        client={client}
+        accountAbstraction={{
+          chain: zkSyncSepolia, // zkSync chain with native AA
+          sponsorGas: true, // sponsor gas for all transactions
+        }}
+        connectButton={{
+          label: "Login to mint this Kitten!",
+        }}
+      />
+      {/* since sponsorGas is true, transactions will be sponsored */}
+      <TransactionButton
+        transaction={() =>
+          claimTo({
+            contract,
+            to: "0x123...",
+            tokenId: 0n,
+            quantity: 1n,
+          })
+        }
+      >
+        Mint
+      </TransactionButton>
+    </>
+  );
+}`}
+        lang="tsx"
+      />
+    </>
+  );
+}

apps/playground-web/src/components/account-abstraction/7702-smart-account.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import { getContract, sendTransaction } from "thirdweb";
+import { sepolia } from "thirdweb/chains";
+import { claimTo } from "thirdweb/extensions/erc1155";
+import { getNFT, getOwnedNFTs } from "thirdweb/extensions/erc1155";
+import {
+  ConnectButton,
+  MediaRenderer,
+  TransactionButton,
+  useActiveAccount,
+  useReadContract,
+} from "thirdweb/react";
+import { shortenHex } from "thirdweb/utils";
+import { inAppWallet } from "thirdweb/wallets";
+import { engineAccount } from "thirdweb/wallets/engine";
+import { create7702MinimalAccount } from "thirdweb/wallets/smart";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { Button } from "../ui/button";
+
+const chain = sepolia;
+const editionDropAddress = "0x7B3e0B8353Ad5cD6C60355B50550F63335752f9F";
+const editionDropTokenId = 1n;
+
+const editionDropContract = getContract({
+  address: editionDropAddress,
+  chain,
+  client: THIRDWEB_CLIENT,
+});
+
+export function Eip7702SmartAccountPreview() {
+  const [txHash, setTxHash] = useState<string | null>(null);
+  const activeEOA = useActiveAccount();
+  const { data: nft, isLoading: isNftLoading } = useReadContract(getNFT, {
+    contract: editionDropContract,
+    tokenId: editionDropTokenId,
+  });
+  const { data: ownedNfts } = useReadContract(getOwnedNFTs, {
+    contract: editionDropContract,
+    // biome-ignore lint/style/noNonNullAssertion: handled by queryOptions
+    address: activeEOA?.address!,
+    queryOptions: { enabled: !!activeEOA },
+  });
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      {isNftLoading ? (
+        <div className="mt-24 w-full">Loading...</div>
+      ) : (
+        <>
+          <div className="flex flex-col justify-center gap-2 p-2">
+            <ConnectButton
+              client={THIRDWEB_CLIENT}
+              chain={chain}
+              wallets={[inAppWallet()]}
+              connectButton={{
+                label: "Login to mint!",
+              }}
+            />
+          </div>
+          {nft ? (
+            <MediaRenderer
+              client={THIRDWEB_CLIENT}
+              src={nft.metadata.image}
+              style={{ width: "300px", marginTop: "10px" }}
+            />
+          ) : null}
+          {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}
+              </p>
+              <Button
+                onClick={async () => {
+                  const executor = engineAccount({
+                    engineUrl:
+                      "https://tw-unreal-demo.engine-usw2.thirdweb.com",
+                    authToken:
+                      "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIweEEyMjRjRTVFMjM2ZDM5RkJkYzM3MzJGYzdGNzk4NWM5NDVhRTkxNmIiLCJzdWIiOiIweDRmQTkyMzBmNEU4OTc4NDYyY0U3QmY4ZTZiNWEyNTg4ZGE1RjQyNjQiLCJhdWQiOiJ0aGlyZHdlYi5jb20iLCJleHAiOjQ4OTk0MDg0NTUsIm5iZiI6MTc0NTgwODQ1NSwiaWF0IjoxNzQ1ODA4NDU1LCJqdGkiOiI2NTRlYjM0MC0yMTYxLTQ1ZTYtYWY2Mi0zYTA5N2QzOWJlZDUiLCJjdHgiOnsicGVybWlzc2lvbnMiOiJBRE1JTiJ9fQ.MHhkOTc5YWQzYWU0Yjg5NTRmZWZjZjMyOGYwYjRlNWJkOTdkZDAxZGUxMzkxOGFiNDcxNmViODUwNDAxMjIxMzNmNDQzODExMGZiMTQ0NGIwMjMyNjU5MmZiMTAzOTBjOGY5NWM3M2NlMWM4M2M4ODNmYmI2YzQ1ODg4MDBkZjNjZDFj",
+                    walletAddress: "0x059be73eFc2A234BE5993802d13333266878f8E8",
+                  });
+                  const smartAccount = create7702MinimalAccount({
+                    client: THIRDWEB_CLIENT,
+                    adminAccount: activeEOA,
+                    // executorAccount: executor,
+                  });
+                  const result = await sendTransaction({
+                    transaction: claimTo({
+                      contract: editionDropContract,
+                      tokenId: editionDropTokenId,
+                      to: activeEOA.address,
+                      quantity: 1n,
+                    }),
+                    account: smartAccount,
+                  });
+                  setTxHash(result.transactionHash);
+                }}
+              >
+                Mint Smart
+              </Button>
+              <TransactionButton
+                transaction={() =>
+                  claimTo({
+                    contract: editionDropContract,
+                    tokenId: editionDropTokenId,
+                    to: activeEOA.address,
+                    quantity: 1n,
+                  })
+                }
+                payModal={{
+                  metadata: nft?.metadata,
+                }}
+                onError={(error) => {
+                  alert(`Error: ${error.message}`);
+                }}
+                onClick={() => {
+                  setTxHash(null);
+                }}
+                onTransactionConfirmed={async (receipt) => {
+                  setTxHash(receipt.transactionHash);
+                }}
+              >
+                Mint EOA
+              </TransactionButton>
+            </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>
+  );
+}

packages/thirdweb/scripts/generate/abis/erc7702/MinimalAccount.json

@@ -0,0 +1,27 @@
+[
+  "error AllowanceExceeded(uint256 allowanceUsage, uint256 limit, uint64 period)",
+  "error CallPolicyViolated(address target, bytes4 selector)",
+  "error CallReverted()",
+  "error ConditionFailed(bytes32 param, bytes32 refValue, uint8 condition)",
+  "error InvalidDataLength(uint256 actualLength, uint256 expectedLength)",
+  "error InvalidSignature(address msgSender, address thisAddress)",
+  "error LifetimeUsageExceeded(uint256 lifetimeUsage, uint256 limit)",
+  "error MaxValueExceeded(uint256 value, uint256 maxValuePerUse)",
+  "error NoCallsToExecute()",
+  "error SessionExpired()",
+  "error SessionExpiresTooSoon()",
+  "error SessionZeroSigner()",
+  "error TransferPolicyViolated(address target)",
+  "error UIDAlreadyProcessed()",
+  "event Executed(address indexed to, uint256 value, bytes data)",
+  "event SessionCreated(address indexed signer, (address signer, bool isWildcard, uint256 expiresAt, (address target, bytes4 selector, uint256 maxValuePerUse, (uint8 limitType, uint256 limit, uint256 period) valueLimit, (uint8 condition, uint64 index, bytes32 refValue, (uint8 limitType, uint256 limit, uint256 period) limit)[] constraints)[] callPolicies, (address target, uint256 maxValuePerUse, (uint8 limitType, uint256 limit, uint256 period) valueLimit)[] transferPolicies, bytes32 uid) sessionSpec)",
+  "function createSessionWithSig((address signer, bool isWildcard, uint256 expiresAt, (address target, bytes4 selector, uint256 maxValuePerUse, (uint8 limitType, uint256 limit, uint256 period) valueLimit, (uint8 condition, uint64 index, bytes32 refValue, (uint8 limitType, uint256 limit, uint256 period) limit)[] constraints)[] callPolicies, (address target, uint256 maxValuePerUse, (uint8 limitType, uint256 limit, uint256 period) valueLimit)[] transferPolicies, bytes32 uid) sessionSpec, bytes signature)",
+  "function eip712Domain() view returns (bytes1 fields, string name, string version, uint256 chainId, address verifyingContract, bytes32 salt, uint256[] extensions)",
+  "function execute((address target, uint256 value, bytes data)[] calls) payable",
+  "function executeWithSig(((address target, uint256 value, bytes data)[] calls, bytes32 uid) wrappedCalls, bytes signature) payable",
+  "function getCallPoliciesForSigner(address signer) view returns ((address target, bytes4 selector, uint256 maxValuePerUse, (uint8 limitType, uint256 limit, uint256 period) valueLimit, (uint8 condition, uint64 index, bytes32 refValue, (uint8 limitType, uint256 limit, uint256 period) limit)[] constraints)[])",
+  "function getSessionExpirationForSigner(address signer) view returns (uint256)",
+  "function getSessionStateForSigner(address signer) view returns (((uint256 remaining, address target, bytes4 selector, uint256 index)[] transferValue, (uint256 remaining, address target, bytes4 selector, uint256 index)[] callValue, (uint256 remaining, address target, bytes4 selector, uint256 index)[] callParams))",
+  "function getTransferPoliciesForSigner(address signer) view returns ((address target, uint256 maxValuePerUse, (uint8 limitType, uint256 limit, uint256 period) valueLimit)[])",
+  "function isWildcardSigner(address signer) view returns (bool)"
+]

packages/thirdweb/scripts/generate/generate.ts

@@ -336,6 +336,7 @@ export function ${f.name}(
       nonce: async () => (await asyncOptions()).overrides?.nonce,
       extraGas: async () => (await asyncOptions()).overrides?.extraGas,
       erc20Value: async () => (await asyncOptions()).overrides?.erc20Value,
+      authorizationList: async () => (await asyncOptions()).overrides?.authorizationList,
       `
         : ""
     }
@@ -885,7 +886,7 @@ async function main() {
   for (const folder of folders) {
     const OUT_PATH = join(EXTENSIONS_FOLDER, folder, "__generated__");
     // delete the "__generated__" folder inside the extension folder
-    await rmdir(OUT_PATH, { recursive: true });
+    await rmdir(OUT_PATH, { recursive: true }).catch(() => {});
 
     // create the "__generated__" folder inside the extension folder
     await mkdir(OUT_PATH, { recursive: true });

packages/thirdweb/src/contract/actions/get-bytecode.ts

@@ -27,6 +27,7 @@ export function getBytecode(contract: ThirdwebContract): Promise<Hex> {
       address: contract.address,
       blockTag: "latest",
     });
+    console.log("getBytecode", result);
     if (result === "0x") {
       BYTECODE_CACHE.delete(contract);
     }

packages/thirdweb/src/contract/actions/resolve-abi.ts

@@ -1,4 +1,5 @@
 import { type Abi, formatAbi, parseAbi } from "abitype";
+import { sepolia } from "viem/chains";
 import { download } from "../../storage/download.js";
 import { getClientFetch } from "../../utils/fetch.js";
 import { withCache } from "../../utils/promise/withCache.js";
@@ -39,7 +40,11 @@ export function resolveContractAbi<abi extends Abi>(
       }
 
       // for local chains, we need to resolve the composite abi from bytecode
-      if (contract.chain.id === 31337 || contract.chain.id === 1337) {
+      if (
+        contract.chain.id === 31337 ||
+        contract.chain.id === 1337 ||
+        contract.chain.id === sepolia.id // FIXME remove this once contract API handles 7702 delegation
+      ) {
         return (await resolveCompositeAbi(contract as ThirdwebContract)) as abi;
       }
 

packages/thirdweb/src/exports/wallets/smart.ts

@@ -42,3 +42,5 @@ export {
   DEFAULT_ACCOUNT_FACTORY_V0_7,
   TokenPaymaster,
 } from "../../wallets/smart/lib/constants.js";
+
+export { create7702MinimalAccount } from "../../wallets/in-app/core/eip7702/minimal-account.js";