/application
directory contains a /const
directory, which has two files:
chains.ts
: Define the testnet and mainnet chains your smart contracts are deployed to.contracts.ts
: Define the addresses of your smart contracts on each chain.
Configuring Chains
The application assumes you have two separate environments. One for testing purposes and one for production. You can choose to use separate chains for each environment, or simply use the same chain for both. All you need to do is configure theDEVELOPMENT_CHAIN
and PRODUCTION_CHAIN
variables to your chosen chains, and you’re good to go.
By default, the application uses the Polygon Mumbai
test network for testing and the Polygon Mainnet
network for production:
Example: Use Mumbai for testing and Polygon for production
IS_DEV_ENV
detects whether you’re running the application in a development environment or not.
The CHAIN
variable uses that value to return your chosen development chain in development and your chosen production chain in production.
Configuring Contract Addresses
Thecontracts.ts
file is where you put the addresses of your smart contracts.
For each smart contract you want to connect to, you can follow the same pattern below:
- Define a variable containing the testnet address of your smart contract.
- Define a variable containing the mainnet address of your smart contract.
- Export a variable that returns the testnet address in development and the mainnet address in production (and cast it as the test network address’s type).
Generating Contract Types
Since we don’t copy smart contract ABIs into the application; our IDE doesn’t know what functions, views, events, etc. are available on each smart contract. Without this, we don’t get any help from our IDE when interacting with smart contracts. The thirdweb CLI comes with a generate command, which detects all smart contract addresses in the project and fetches their ABIs, pulling them into node_modules to enable type-safety on smart contract interactions like useContractRead and useContractWrite.If you prefer, you can just provide the contract ABIs as the second argument
to
useContract
to achieve the same effect of type-safety and performance gains.
yarn generate
from the application directory. This will create a thirdweb.json
file at the root of your app;
which you can modify and re-run yarn generate
to pull in new ABIs, or update existing ones.
yarn generate
with the below configuration inside thirdweb.json
will pull in the ABI for the
0x2E7
smart contract on the Polygon Mumbai
test network:
thirdweb.json
generate
, smart contract interactions become type-safe as the ABIs are now available to the IDE.
It also provides a performance increase as the function
doesn’t need to fetch the ABI at run-time.
Sometimes, you might need to restart the TypeScript
server
for the IDE to pick up the new types.
/node_modules/@thirdweb-dev/generated-abis/dist
directory.
Contract Interactions
Now you have set up your chains, contract addresses, and generated your contract types, you can start interacting with your smart contracts. The application comes with an example ContractInteraction component to showcase the useContract, useContractRead and useContractWrite hooks from thirdweb’s React SDK. For smart contracts that follow EIP standards, there is a range of other hooks such as useNFT documented in thirdweb’s React SDK.thirdweb’s hooks are powered by TanStack Query.Read my blog post on TanStack
Query
for a quick introduction.