Skip to content
This repository has been archived by the owner on Aug 5, 2024. It is now read-only.

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
kien-ngo committed Aug 1, 2024
1 parent a0574ad commit abd52d5
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 6 deletions.
94 changes: 92 additions & 2 deletions src/app/react/v5/migrate/contracts/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
```
2 changes: 2 additions & 0 deletions src/app/react/v5/migrate/installation/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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!

Expand Down
1 change: 1 addition & 0 deletions src/app/react/v5/migrate/use-v5-with-ethers/page.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# WIP
8 changes: 4 additions & 4 deletions src/app/react/v5/sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down

0 comments on commit abd52d5

Please sign in to comment.