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

Commit a0574ad

Browse files
kien-ngokien-ngo
committed
Update
1 parent 7ec9767 commit a0574ad

File tree

5 files changed

+316
-38
lines changed

5 files changed

+316
-38
lines changed

‎src/app/react/v5/migrate/cheatsheet/page.mdx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
### React Cheatsheet
2+
3+
| Task | `@thirdweb-dev/react` | `thirdweb` |
4+
| ---------------------| ----------------------------------------------------- | --------------------------------------------------- |
5+
| Provider | `import { ThirdwebProvider} from @thirdweb-dev/react` | [`import { ThirdwebProvider } from "thirdweb/react"`](/react/v5/ThirdwebProvider) |
6+
| Contract | `useContract(...)` | [`getContract(...) // not a hook`](/references/typescript/v5/getContract) |
7+
| Address | `useAddress(...)` | [`useActiveAccount(...) // account?.address`](/references/typescript/v5/useActiveAccount) |
8+
| Read | `useContractRead(...)` | [`useReadContract(...)`](/references/typescript/v5/useReadContract) |
9+
| Write | `useContractWrite(...)` | [`useSendTransaction()`](/references/typescript/v5/useSendTransaction) |
10+
| Extensions | `useNFTs(...)` | [`useReadContract(getNFTs, { ... })`](/references/typescript/v5/useReadContract) |
11+
| Get Signer | `useSigner()` | [`useActiveAccount()`](/references/typescript/v5/useActiveAccount) |
12+
| Get Wallet | `useWallet()` | [`useActiveWallet()`](/references/typescript/v5/useActiveWallet) |
13+
| Button | `Web3Button` | [`TransactionButton`](/react/v5/TransactionButton) |
14+
| Connect | `ConnectWallet` | [`ConnectButton`](/react/v5/ConnectButton) |
15+
| Connection Status | `useConnectionStatus()` | [`useActiveWalletConnectionStatus()`](/references/typescript/v5/useActiveWalletConnectionStatus) |
16+
| Switch Chain | `useSwitchChain()` | [`useSwitchActiveWalletChain()`](/references/typescript/v5/useSwitchActiveWalletChain) |
17+
| Get Connected Chain | `useChain()` | [`useSwitchActiveWalletChain()`](/references/typescript/v5/useSwitchActiveWalletChain) |
18+
19+
20+
### TypeScript Cheatsheet
21+
22+
| Task | `@thirdweb-dev/sdk` | `thirdweb` |
23+
| ---------- | -------------------------------------------------------- | ------------------------------------------------- |
24+
| Chains | `import { Sepolia } from "@thirdweb-dev/chains"` | [`import { sepolia } from "thirdweb/chains"`](/typescript/v5/chain) |
25+
| Wallets | `import { MetaMaskWallet } from "@thirdweb-dev/wallets"` | [`import { createWallet } from "thirdweb/wallets"`](/references/typescript/v5/createWallet) |
26+
| Initialize | `new ThirdwebSDK(...)` | [`createThirdwebClient({ ... })`](/references/typescript/v5/createThirdwebClient) |
27+
| Contract | `await sdk.getContract(...)` | [`getContract(...) // no await`](/references/typescript/v5/getContract) |
28+
| Read | `await contract.call(...)` | [`await readContract(...)`](/references/typescript/v5/readContract) |
29+
| Prepare | `await contract.prepare(...)` | [`prepareContractCall(...) // no await`](/references/typescript/v5/prepareContractCall) |
30+
| Send | `await contract.call(...)` | [`await sendTransaction(...)`](/references/typescript/v5/sendTransaction) |
31+
| Extensions | `await contract.erc721.getAll()` | [`await getNFTs(...)`](/references/typescript/v5/erc721/getNFTs) |
32+
| Deploy | `sdk.deployer.deployBuiltInContract(...)` | [`await deployPublishedContract(...)`](/references/typescript/v5/deploy/deployPublishedContract) |

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
[Migrate from React v4](/react/v5/migrate)
2+
3+
# Interacting with contracts
4+
5+
With SDK v4, you always have to "load" a contract with `useContract`. This process adds complexity to your app and inpacts its performance.
6+
In the latest version, a smart contract (type: [`ThirdwebContract`](/references/typescript/v5/ThirdwebContract)) represents a simple object containing info about the contract address, the chain it was deployed on, and the thirdweb client object.
7+
8+
Example for declaring a smart contract on Ethereum mainnet
9+
```tsx
10+
import { getContract, createThirdwebClient } from "thirdweb";
11+
import { ethereum } from "thirdweb/chains";
12+
13+
const client = createThirdwebClient({
14+
clientId: process.env.NEXT_PUBLIC_TW_CLIENT_ID,
15+
});
16+
17+
const contract = getContract({
18+
address: "0x....",
19+
chain: ethereum,
20+
client,
21+
});
22+
```
23+
24+
## Contract extensions
25+
26+
This is a new terminology that we introduced in the new SDK. Basically, each extension represents a method of a contract, be it a "write" or a "read" method.
27+
28+
An extension is a function that returns a [`PreparedTransaction`](/references/typescript/v5/PreparedTransaction) which in turn can be executed in a React hook for interacting with the contract. We will talk more about it in the section below.
29+
30+
One of the amazing updates that v5 brings is the rich set of prebuilt extensions. They are the contract methods that have been precompile to ensure a typesafe & performant developer experience.
31+
32+
Check out the list of over 100 prebuilt extensions [here](/typescript/v5/extensions/built-in), ranging from ERC20, ERC721, ERC1155 to top popular DeFi protocols like Uniswap, Farcaster & Lens.
33+
34+
Example: Import an ERC1155 "read" extension, for checking the balance of a wallet
35+
```tsx
36+
import { balanceOf } from "thirdweb/extension/erc1155";
37+
38+
const transaction = balanceOf({
39+
contract,
40+
owner: "0x...",
41+
tokenId: 0n,
42+
});
43+
```
44+
45+
## Reading states of a contract
46+
Given the task of calling `balanceOf` from an ERC1155 contract, we'll be comparing the code between v4 and v5
47+
48+
#### SDK v4
49+
```tsx
50+
import { useNFTBalance, useContract } from "@thirdweb-dev/react";
51+
52+
function App() {
53+
const { contract } = useContract(contractAddress);
54+
const { isLoading, data, error } = useNFTBalance(
55+
contract,
56+
"{{wallet_address}}",
57+
"{{token_id}}",
58+
);
59+
}
60+
61+
```
62+
63+
#### SDK v5
64+
```tsx
65+
import { getContract, createThirdwebClient } from "thirdweb";
66+
import { balanceOf } from "thirdweb/extensions/erc1155";
67+
import { ethereum } from "thirdweb/chains";
68+
import { client } from "@lib/client";
69+
70+
const contract = getContract({
71+
address: "0x....",
72+
chain: ethereum,
73+
client,
74+
});
75+
76+
function App() {
77+
const { data } = useReadContract(balanceOf, { contract, owner: "0x...", tokenId: 0n });
78+
}
79+
```
80+
81+
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".
82+
It is the perfect replacement for the old chunky React hooks from v4.

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import {
2+
ArticleCard,
3+
GithubTemplateCard,
4+
Grid,
5+
ExpandableGrid,
6+
createMetadata,
7+
OpenSourceCard,
8+
Stack,
9+
Steps,
10+
Step,
11+
InstallTabs,
12+
Callout
13+
} from "@doc";
14+
15+
[Migrate from React v4](/react/v5/migrate)
16+
17+
# Installation & Setups
18+
19+
Welcome to the migration guide for updating your React SDK from version 4 to version 5. This guide will walk you through the necessary steps to ensure a smooth transition. In this section, we'll cover the installation process for the new version of the SDK.
20+
21+
## Installation
22+
23+
#### Below is how you install thirdweb v4 SDKs
24+
<InstallTabs
25+
npm="npm i @thirdweb-dev/sdk @thirdweb-dev/react [email protected]"
26+
yarn="yarn add @thirdweb-dev/sdk @thirdweb-dev/react [email protected]"
27+
pnpm="pnpm i @thirdweb-dev/sdk @thirdweb-dev/react [email protected]"
28+
bun="bun i @thirdweb-dev/sdk @thirdweb-dev/react [email protected]"
29+
/>
30+
31+
#### With the latest version, everything comes in one single package
32+
<InstallTabs
33+
npm="npm i thirdweb"
34+
yarn="yarn add thirdweb"
35+
pnpm="pnpm i thirdweb"
36+
bun="bun i thirdweb"
37+
/>
38+
39+
40+
## Setups
41+
42+
Once you have installed the latest package (alongside the older version that you want to replace), you can start the migration process.
43+
44+
### ThirdwebProvider
45+
46+
In the latest SDK, the [`ThirdwebProvider`](/references/typescript/v5/ThirdwebProvider) no longer accepts any prop such as `activeChain`, `clientId` or any extra SDK options.
47+
Instead, you only need to pass the clientId when necessary (we'll talk more about this in a few sections below).
48+
49+
```tsx
50+
import { ThirdwebProvider } from "thirdweb/react";
51+
52+
<ThirdwebProvider>
53+
...
54+
</ThirdwebProvider>
55+
```
56+
57+
###### Progressive migration
58+
59+
60+
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.
61+
62+
In React, you can mix and match the v4 and v5 `ThirdwebProvider`, that gives you access to the hooks and functionality of both SDKs.
63+
This way, once you have moved away from all the v4 functionalities, you can finally remove the `ThirdwebProviderV4` from your app.
64+
65+
```tsx
66+
import { ThirdwebProvider as ThirdwebProviderV4 } from "@thirdweb-dev/react";
67+
import { ThirdwebProvider } from "thirdweb/react"; // v5
68+
69+
<ThirdwebProviderV4 activeChain={...} clientId={...}>
70+
<ThirdwebProvider>
71+
...
72+
</ThirdwebProvider>
73+
</ThirdwebProviderV4>
74+
```
75+
76+
### Connecting wallets
77+
78+
Similar to v4's `ConnectWallet` component, the latest version has the [`ConnectButton`](/connect/sign-in/ConnectButton) component which has the same functionality.
79+
80+
However, unlike with v4 where the number of supported wallets is limited (about 20), and adding more wallets mean your app becomes heavier,
81+
the SDK v5 supports [over 300 wallets](/typescript/v5/supported-wallets) with virtually no impact to your application.
82+
83+
Here's how you use the new `ConnectButton`:
84+
85+
```tsx
86+
import { createThirdwebClient } from "thirdweb";
87+
import { ConnectButton } from "thirdweb/react";
88+
89+
const client = createThirdwebClient({
90+
clientId: process.env.NEXT_PUBLIC_TW_CLIENT_ID,
91+
});
92+
93+
<ConnectButton client={client} />
94+
```
95+
96+
Notice how you are passing the thirdweb client to the component itself and not to the `ThirdwebProvider` like in v4?
97+
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!
98+
99+
100+
Tip: You can reuse the thirdweb client object by putting it in a file and export it.
101+
```ts
102+
// @lib/client.ts
103+
104+
import { createThirdwebClient } from "thirdweb";
105+
106+
export const client = createThirdwebClient({
107+
clientId: process.env.NEXT_PUBLIC_TW_CLIENT_ID,
108+
});
109+
110+
```

0 commit comments

Comments
 (0)