Our SDK uses a Provider Pattern, meaning any component within the
ThirdwebProvider will have access to the SDK.
Let's take a look at a typical setup.
Configure the ThirdwebProvider
Specify the network your smart contracts are deployed to in the
activeChain prop and wrap your application like so:
Below is an example of where to set this up in your application:
Finally, we can run our app!
Connect to a wallet using ConnectWallet component
Interact With Contracts
Connect to your smart contract using the
useContract hook like so:
You pass the
contract object returned from
useContract to these hooks as the first parameter and the name of the function (or view/mapping, etc.) on your smart contract as the second parameter. If your function requires parameters, you can pass them as additional arguments.
For example, we can read the
name of our contract like so:
Each extension you implement in your smart contract unlocks new functionality in the SDK.
These hooks make it easy to interact with your smart contracts by implementing the complex logic for you under the hood.
For example, if your smart contract implements ERC721Supply, you unlock the ability to view all NFTs on that contract using the SDK; which fetches all of your NFT metadata and the current owner of each NFT in parallel. In the React SDK, that is available using
If we want to mint an NFT and our contract implements ERC721Mintable, we can use the
useMintNFT hook to mint an NFT from the connected wallet; handling all of the logic of uploading and pinning the metadata to IPFS for us behind the scenes.
ThirdwebProvider offers a number of configuration options to control the behavior of the React Native and Typescript SDK.
We provide defaults for all of them, but you customize them to suit your needs. For more info see the ThirdwebProvider reference.
Supported Wallets Behavior
- We render
localWalletas "Continue as Guest" in our ConnectWallet modal.
- When a single
supportedWalletis defined, we try to auto-connect to that wallet instead of showing the wallets modal with a single wallet.
Localizing our UI components
You can pass a
locale prop to the
ThirdwebProvider with the strings in the language of your preference. See the list of strings to translate here.
We support 'en' (English), 'es' (Spanish) and 'ja' (Japanese) out of the box. The default value is 'en'.
You can pass your own strings:
Note that you can also use this prop to replace any string in our UI components.