Update

Author: kien-ngo

src/app/react/v5/migrate/contracts/page.mdx

@@ -78,5 +78,95 @@ function App() {
 }
 ```
 
-As you can see from the example above, we introduced the hook [`useReadContract`](/references/typescript/v5/useReadContract) in v5. You should use it to perform any contract "read".
-It is the perfect replacement for the old chunky React hooks from v4. 
+As you can see from the example above, we introduced the hook [`useReadContract`](/references/typescript/v5/useReadContract) in v5.
+You should use it to perform any contract "read" in your React app.
+It is the perfect replacement for the old chunky React hooks from v4. 
+
+The formula for reading a contract state is:
+```
+useReadContract + <the read contract method>
+```
+
+#### If the extension you are looking for is not included in the SDK
+You can always use the function signature with `useReadContract` (It's also typesafe)
+```tsx
+useReadContract({
+  contract,
+  method: "function balanceOf(address _owner, uint256 tokenId) view returns (uint256)",
+  ...
+})
+```
+
+#### Tips for getting a function's signature
+Go to the thirdweb Dashboard's explorer page and select the function that you want to interact with.
+You should see the "Use this function in your app" section with the code snippet for the signature of the function.
+
+[An example](https://thirdweb.com/avalanche-fuji/0xd5e815241882676F772A624E3892b27Ff3a449c4/explorer?name=balanceOf)
+
+
+## Writing to a contract
+In v5, you can utilize the following hooks for writing to contracts: [`useSendTransaction`](/references/typescript/v5/useSendTransaction) and [`useSendAndConfirmTransaction`](/references/typescript/v5/useSendAndConfirmTransaction).
+The main difference between the 2 hooks is that `useSendTransaction` will mark the request as "complete" once the transaction is sent,
+while `useSendAndConfirmTransaction` will wait until the transaction is included in the blockchain.
+
+Given the task of claiming an NFT from an NFT Drop collection, let's compare the code between the SDK v4 and v5
+
+
+#### SDK V4
+```tsx
+import { useContract, useClaimNFT } from "@thirdweb-dev/react";
+
+function App() {
+  const { contract } = useContract(contractAddress);
+  const {
+    mutateAsync: claimNft,
+    isLoading,
+    error,
+  } = useClaimNFT(contract);
+
+  return (
+    <Web3Button
+      contractAddress={contractAddress}
+      action={() =>
+        claimNft({
+          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
+          quantity: 1,
+        })
+      }
+    >
+      Claim NFT
+    </Web3Button>
+  );
+}
+```
+
+#### SDK v5
+```tsx
+import { useSendTransaction } from "thirdweb/react";
+import { claimTo } from "thirdweb/extension/erc721";
+
+function App() {
+  const transaction = claimTo({ contract, quantity: 1n, to: "0x..." });
+  const { mutateAsync: claimNft } = useSendTransaction();
+
+  return <button onClick={() => claimNft(transaction)}>
+    Claim
+  </button>
+}
+```
+
+Another beautiful thing about the SDK v5 is that it comes with the [`TransactionButton`](/references/typescript/v5/TransactionButton) 
+which allows you to make a contract call _without_ having to use the above React hooks. As you can see, the code is much cleaner this way!
+
+```tsx
+import { TransactionButton } from "thirdweb/react";
+import { claimTo } from "thirdweb/extension/erc721";
+
+function App() {
+  return <TransactionButton transaction={
+    () => claimTo({ contract, quantity: 1n, to: "0x..." })
+  }>
+    Claim
+  </TransactionButton>
+}
+```

src/app/react/v5/migrate/installation/page.mdx

@@ -93,6 +93,8 @@ const client = createThirdwebClient({
 <ConnectButton client={client} />
 ```
 
+To learn more about the new `ConnectButton`, head over to the [Playground](https://thirdweb.com/dashboard/connect/playground).
+
 Notice how you are passing the thirdweb client to the component itself and not to the `ThirdwebProvider` like in v4?
 By not putting every config inside the context wrapper, we were able to make the SDK v5 much more lightweight since you only load what you need!
 

src/app/react/v5/migrate/use-v5-with-ethers/page.mdx

@@ -0,0 +1 @@
+# WIP

src/app/react/v5/sidebar.tsx

@@ -305,10 +305,10 @@ export const sidebar: SideBar = {
 					name: "Interacting with contracts",
 					href: `${slug}/migrate/contracts`,
 				},
-				{
-					name: "Using v5 with ethers",
-					href: `${slug}/migrate/usage-v5-with-ethers`,
-				},
+				// {
+				// 	name: "Using v5 with ethers",
+				// 	href: `${slug}/migrate/use-v5-with-ethers`,
+				// },
 				{
 					name: "Cheatsheet",
 					href: `${slug}/migrate/cheatsheet`,