[TWIL] Week of June 02, 2024

This week was the first full week of the Onchain Summer Buildathon. I signed up to participate, motivating myself to improve the UX on our platform and build great new features. To start, I upgraded a few npm packages to support the Base network and the Smart Wallet launched by the Coinbase Wallet team. Here are some of the things I learned along the way.

Caveats When Upgrading Web3 Packages

Wagmi V1 -> V2

I had to upgrade Wagmi from version V1 to V2. While the complete list of changes is documented here, the information on handling TypeScript types was somewhat lacking in detail.

Wagmi Core Method Types

Besides React hooks, Wagmi also provides regular async methods, such as sendTransaction, powered by a package called viem. In V2, you can also import and use TypeScript types for parameters and return types. However, you need to specify the config type you're using for the generics. Here's an example:

import { type SendTransactionParameters, sendTransaction } from "@wagmi/core";

const config = createConfig({
  // ...
});

export default async function sendWagmiTransaction(
  args: SendTransactionParameters<typeof config>,
) {
  const hash = await sendTransaction(config, args);
  return hash;
}

useWaitForTransactionReceipt Type

Parsing transaction receipt logs is a common task for dapps, and I've been using useWaitForTransactionReceipt, the hook to retrieve the transaction receipt. In V2, you can use WaitForTransactionReceiptData, which is the data type returned by useWaitForTransactionReceipt. Here's how to use it:

const chains = [
  mainnet,
  sepolia,
  goerli,
  polygon,
  polygonAmoy,
  base,
  baseSepolia,
] as const;

const chainIds = chains.map(({ id }) => id);

type ChainIds = typeof chainIds;

const config = createConfig({
  // ...
});

async function parseTxReceiptData(
  data: WaitForTransactionReceiptData<typeof config, ChainIds[number]>
) {
  // ...
}

async function main() {
  const { data } = useWaitForTransactionReceipt({ hash: "<tx-hash>" });
  const parsedData = await parseTxReceiptData(data);
}

Instead of just passing in config, you also need to pass in a union of all the chain IDs that config supports.

Ethers V5 -> V6

Ethers is another package I had to upgrade due to a conflict with Next 14. I was setting up a JSON RPC provider for all the chains we support, but it kept giving me an error message: Could not detect network. I discovered that ethers V5 has an issue with Next 14, which left me with two options:

• Keep ethers V5 and implement a temporary workaround

• Upgrade to ethers V6 and make the necessary changes to the codebase

Since I was using wagmi, there wasn't much use of ethers in the codebase, so I chose the second option. If you ever need to use ethers with Next 14, make sure your ethers package is V6 or higher.

That's it for this week. For the next few weeks, I'll be deeply focused on modifying and building new features for the Buildathon. After that, I'll share what I've learned. Happy hacking, everyone ☕️