From abd52d5f32f73ea5d02f9bd6f1b91c085a53307c Mon Sep 17 00:00:00 2001 From: Kien Ngo Date: Thu, 1 Aug 2024 13:48:48 -0400 Subject: [PATCH] Update --- src/app/react/v5/migrate/contracts/page.mdx | 94 ++++++++++++++++++- .../react/v5/migrate/installation/page.mdx | 2 + .../v5/migrate/use-v5-with-ethers/page.mdx | 1 + src/app/react/v5/sidebar.tsx | 8 +- 4 files changed, 99 insertions(+), 6 deletions(-) create mode 100644 src/app/react/v5/migrate/use-v5-with-ethers/page.mdx diff --git a/src/app/react/v5/migrate/contracts/page.mdx b/src/app/react/v5/migrate/contracts/page.mdx index 610564db..aa2f6d9c 100644 --- a/src/app/react/v5/migrate/contracts/page.mdx +++ b/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. \ No newline at end of file +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 + +``` + +#### 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 ( + + claimNft({ + to: "{{wallet_address}}", // Use useAddress hook to get current wallet address + quantity: 1, + }) + } + > + Claim NFT + + ); +} +``` + +#### 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 +} +``` + +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 claimTo({ contract, quantity: 1n, to: "0x..." }) + }> + Claim + +} +``` \ No newline at end of file diff --git a/src/app/react/v5/migrate/installation/page.mdx b/src/app/react/v5/migrate/installation/page.mdx index 28484cbd..9930a20a 100644 --- a/src/app/react/v5/migrate/installation/page.mdx +++ b/src/app/react/v5/migrate/installation/page.mdx @@ -93,6 +93,8 @@ const client = createThirdwebClient({ ``` +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! diff --git a/src/app/react/v5/migrate/use-v5-with-ethers/page.mdx b/src/app/react/v5/migrate/use-v5-with-ethers/page.mdx new file mode 100644 index 00000000..1a1aebed --- /dev/null +++ b/src/app/react/v5/migrate/use-v5-with-ethers/page.mdx @@ -0,0 +1 @@ +# WIP \ No newline at end of file diff --git a/src/app/react/v5/sidebar.tsx b/src/app/react/v5/sidebar.tsx index 48b433a9..fae033f3 100644 --- a/src/app/react/v5/sidebar.tsx +++ b/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`,