thirdwebDocs
GitHub

Using Account abstraction in Typescript

By using the wallet SDK alongside the TypeScript SDK, you can use smart accounts in your applications easily.

Example Use Cases

The wallet SDK with the TypeScript SDK is primarily used when creating a backend for your application or when creating a node script. In this guide, we will be using the wallet SDK to create a Node script but the logic for creating a backend is the same.

If you are working in a React environment, you are recommended to follow this guide.

  • Create an API key

    To use the bundler and paymaster, you must create an API key and a billing account.

    To create an API Key:

    • Head to the settings page in the dashboard and click the API Keys tab.
    • Click on Create API Key.
    • Follow the steps to create your API key.

    To use account abstraction infrastructure on mainnet you will also need to create an account and add a payment method.

  • Create a Node Script

    To use smart accounts in a node script, simply create a new Node.js project and install the thirdweb package.

    npm i thirdweb

    Create a .env file and add the following:

    THIRDWEB_SECRET_KEY=<YOUR_SECRET_KEY>
    PRIVATE_KEY=<A_TEST_WALLET_PRIVATE_KEY>

    Create an index.ts file where we'll write our script.

  • Creating the Personal Wallet Key

    This smart account is unlocked by a 'key' - a personal wallet. This key can be anything from a MetaMask wallet or an In-App Wallet or just a private key and is used as a way to 'sign in' to the smart account.

    To create a personal wallet key, we are going to use the privateKeyAccount, which we need to import from the thirdweb/wallets package.

    import { createThirdwebClient } from "thirdweb";
    import { privateKeyAccount } from "thirdweb/wallets";
     
    const client = createThirdwebClient({
      secretKey: process.env.THIRDWEB_SECRET_KEY as string,
    });
     
    const personalAccount = privateKeyAccount({
      client,
      privateKey: process.env.PRIVATE_KEY as string,
    });
    console.log("Personal account address:", personalAccount.address);

  • Creating the Smart account

    Now, let's create a smart account using the SmartWallet class from the @thirdweb-dev/wallets package. To do this, we need to pass a SmartWalletConfig object to the constructor. This object contains the following properties:

    • chain: the chain that the smart account will be deployed on.
    • sponsorGas: whether the smart account should have sponsored transactions or not.

    Once we have created the config and instantiated the SmartWallet class, we can connect the personal wallet to the smart account using the connect method.

    // Configure the smart wallet
    const wallet = smartWallet({
      chain: sepolia,
      sponsorGas: true,
    });
     
    // Connect the smart wallet
    const smartAccount = await wallet.connect({
      client,
      personalAccount,
    });

  • Using the Smart Account

    Now that we have created a smart account object and connected it, we can use it to perform onchain actions gaslessly.

    In this example, we will claim a NFT using the claimTo method and then send the transaction using the sendTransaction method.

    const balance = await getWalletBalance({
      client,
      chain,
      address: smartAccount.address,
    });
    console.log("Smart account balance:", balance.displayValue);
     
    const contract = getContract({
      client,
      chain: sepolia,
      address: "0x...", // deploy a drop contract from thirdweb.com/explore
    });
     
    const transaction = await claimTo({
      contract,
      to: smartAccount.address,
      quantity: 1,
    });
    const { transactionHash } = await sendTransaction({
      transaction,
      smartAccount,
    });
    console.log(`Minted NFT with transaction hash: ${transactionHash}`);

    We have also passed our secretKey to the SDK so that we can use the bundler and paymaster.

    We have also added some helpful logs to view the smart account address and balance using the associated balance and getAddress methods.

  • Run the Script

    To run the script, run the following command:

    bun index.ts

    As you can see in the terminal output, upon claiming the token, the smart account is deployed. This is because smart account contracts are deployed when the first transaction is initiated.

    We have successfully deployed a smart account and claimed an ERC20 token!

  • Conclusion

    In this guide, we have learned how to use the wallet SDK with the TypeScript SDK to create a smart account and claim an NFT.