WIP: Migration to v5 (#543)

* Update page.mdx

* update

* Update page.mdx

src/app/typescript/v5/migrate/page.mdx

@@ -1,13 +1,82 @@
 # Migration from SDK v4
 
-### High-level changes
+## Why you should migrate to SDK v5
+
+#### 1. Better performance, happier clients
+The new SDK is built with performance in mind and proper tree-shaking. Therefore, the minimum bundle size of your application is greatly reduced.
+
+Below is the comparison of 2 similar applications, using `ConnectWallet` (v4) & `ConnectButton` (v5), which are identical in term of functionality.
+
+|                     | SDK v4 | SDK v5
+| ------------------- | ------ | -------
+| Minimum bundle size | <span style={{color: 'red'}}>766kb</span>  | <span style={{color: 'green'}}>104kb</span>
+| Dependencies        | `"@thirdweb-dev/react": "^4.9.4"`<br/>`"@thirdweb-dev/sdk": "^4.0.99"`<br/>`"ethers": "^5.7.2"`| `"thirdweb": "^5.42.0"`
+
+_(Built with Next.js 14.2.5)_
+
+#### 2. More wallets supported
+The SDK v4 only supports a handful of web3 wallets and the more wallets you want to include in your app, the heavier it becomes.
+
+SDK v5 supports over 300 wallets and this number is increasing! You can [interact with wallets based on their unique IDs](/typescript/v5/wallets#example-connect-a-wallet-and-access-an-account-to-send-a-transaction).
+Hence, adding more wallets to your app has little to no effect to the final bundle.
+
+#### 3. Flexibility with React hooks
+When building a React web3 application with thirdweb SDK v4, you have access to a set of prebuilt React hooks which let you conveniently interact with your smart contracts.
+
+The issue with this approach is that, the number of smart-contract methods is ever-increasing, and for each hook that does not exist, we have to dedicate time & energy
+to write, test & maintain. This process is time-consuming & frankly, the more React hooks you add to your app, the slower and more unmaintainable your projects become.
+
+In SDK v5, we introduce a novel concept called "prebuilt extensions" - a set of read & write methods for popular contracts which you can _plug & play_. For example:
+###### Read contract states with v5
+```ts
+// Get a list of owned ERC721 tokens in a wallet
+import { useReadContract } from "thirdweb/react";
+import { getOwnedNFTs } from "thirdweb/extensions/erc721";
+
+const { data } = useReadContract(getOwned, { contract, owner });
+```
+
+###### Write to contract with v5
+```ts
+// Claim an NFT from thirdweb Drop contract
+import { useSendTransaction } from "thirdweb/react";
+import { claimTo } from "thirdweb/extensions/erc721";
+
+const { mutate: sendTx } = useSendTransaction();
+const transaction = claimTo({
+  contract,
+  to: "0x...",
+  quantity: 1n,
+});
+sendTx(transaction);
+```
+
+As you can see, by pairing the contract extensions with `useReadContract` (for read) and `useSendTransaction` (for write),
+we are able to greatly reduce the amount of code that is packaged & shipped to the end users. Plus, with this approach we can dedicate more time
+to building contract extensions. The SDK v5 currenty supports over hundreds of extensions, with some popular protocols like Uniswap, Farcaster, Lens & more to come.
+
+View a list of [supported extensions](/typescript/v5/extensions/built-in) here, or [build your own](/typescript/v5/extensions/create)!
+
+
+
+#### 4. Access to latest software
+Currently the SDK v4 is using `[email protected]` and `@tanstack/react-query@^4` which can be considered "outdated".
+We unfortunately do not have a plan to upgrade v4's dependencies to the latest versions. 
+We highly recommend you to migrate to the SDK v5 to receive the latest software with better security and performance.  
+Want to keep using ethers.js 5? Worry not! The SDK v5 comes with powerful adapters which let you use thirdweb with popular web3 frameworks like viem or ethers 5 & 6.  
+[Learn more](/typescript/v5/adapters#ethers-v5)  
+
+
+<hr/>
+
+## High-level changes
 
 - All imports from `@thirdweb-dev/*` should be replaced with `thirdweb` SDK with sub-exports.
 - The new SDK is `function` based rather than `class` based for better tree shaking and performance.
 - All contract calls are now prepared using `prepareContractCall` and sent using the `sendTransaction` function.
 - Transactions are submitted without waiting for receipt by default. You can call the `waitForReceipt` function to wait for the transaction to be mined.
 
-### Progressive migration
+## Progressive migration
 
 If you're currently using the `@thirdweb-dev/sdk`, you can progressively migrate to the new `thirdweb` SDK. Both SDKs can be used side by side and are interoperable with each other.
 
@@ -44,7 +113,7 @@ import { ThirdwebProvider as ThirdwebProviderV5 } from "thirdweb/react"
 </V4TWProvider>
 ```
 
-From thre, you can obtain the current signer using the `useSigner` hook, and convert it when needed using the `ethers5Adapter`:
+From there, you can obtain the current signer using the `useSigner` hook, and convert it when needed using the `ethers5Adapter`:
 
 ```tsx
 import { useSigner } from "@thirdweb-dev/react";
@@ -64,7 +133,7 @@ const onClick = async () => {
 };
 ```
 
-### TypeScript Cheatsheet
+## TypeScript Cheatsheet
 
 | Task       | `@thirdweb-dev/sdk`                                      | `thirdweb`                                        |
 | ---------- | -------------------------------------------------------- | ------------------------------------------------- |
@@ -79,7 +148,7 @@ const onClick = async () => {
 | Deploy     | `sdk.deployer.deployBuiltInContract(...)`                | [`await deployPublishedContract(...)`](/references/typescript/v5/deploy/deployPublishedContract)              |
 
 
-### React Cheatsheet
+## React Cheatsheet
 
 | Task                 | `@thirdweb-dev/react`                                 | `thirdweb`                                          |
 | ---------------------| ----------------------------------------------------- | --------------------------------------------------- |