[TWIL] Week of June 09, 2024

This week marked the second week of the Onchain Summer Buildathon, where I focused on integrating Base, an L2 chain from Coinbase, with Smart Wallet. Here’s a detailed account of what I learned while working on the Smart Wallet integration.

Sign in with Ethereum (SIWE) is a popular authentication method that allows decentralized applications (dapps) to remember their users. Our website leverages this method via the siwe npm package. Initially, I assumed that integrating Smart Wallet, a new smart contract wallet from Coinbase, would be straightforward. However, I encountered an unexpected technical hurdle.

Smart Wallet requires dapps to be compatible with EIP-6492, which outlines the signature validation for a pre-deployed smart contract account. Unfortunately, the siwe package doesn’t support this validation yet, meaning it can't validate Smart Wallet’s signature out-of-the-box.

Thankfully, the community already had an answer to this problem. Someone responded to a GitHub issue with a small package that supports both EIP-1271 and EIP-6492 signature validations. This package offers a verifyMessage function that enables us to validate signatures from Smart Wallet seamlessly. If your dapp needs to support SIWE for Smart Wallet, you can use AmbireTech's signature-validator package.

USDC Permit

Beyond SIWE, our dapp also supports EIP-2612, which allows ERC20 tokens to be approved and transferred within a single transaction. Since USDC has already implemented EIP-2612, our dapp could use a permit function within our NFT marketplace smart contract. However, EIP-2612 doesn't support EIP-1271, meaning a Smart Wallet account signature isn't supported on EIP-2612.

Fortunately, Smart Wallet supports batch transactions. To address this, I separated the permit function logic into approve and transfer transactions and batched them using the useWriteContracts hook from the Wagmi package. Here’s an example code snippet:

import { useWriteContracts } from "wagmi/experimental";

function Component() {
  const usdcApprove = {
    address: "<usdc-contract-address>",
    abi,
    functionName: "approve",
    args: ["<spender-address>", "<amount>"]
  }

  const usdcTransfer = {
    address: "<usdc-contract-address>",
    abi,
    functionName: "transferFrom",
    args: ["<from-address>", "<to-address>", "<amount>"]
  }

  const { writeContracts } = useWriteContracts();

  const handleUsdc = () => {
    writeContracts({
      contracts: [usdcApprove, usdcTransfer]
    });
  }
}

Although externally owned accounts (EOAs) will have to go through two separate transactions, Smart Wallet accounts will enjoy a simpler user experience with just one click of transaction confirmation.

That’s it for this week. With two weeks left in the OCS Buildathon, I'll continue building and sharing my progress. Happy hacking, everyone! ☕️