# [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](https://wagmi.sh/react/guides/migrate-from-v1-to-v2), 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:

```typescript
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:

```typescript
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 -&gt; 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 ☕️