Usando thirdweb na Tanssi¶
Introdução¶
thirdweb é um framework completo de desenvolvimento Web3 com ferramentas para criar contratos, dApps e muito mais. Você pode usar contratos predefinidos ou criar os seus, implantar via CLI e interagir com SDKs em várias linguagens (React, TypeScript, etc.). Para ver tudo o que o thirdweb oferece, consulte a documentação oficial.
Criar contrato¶
Para criar um novo contrato com a CLI do thirdweb:
- No terminal:
npx thirdweb create contract - Responda aos prompts:
- Nome do projeto
- Framework: Hardhat ou Foundry
- Nome do contrato
- Tipo base: Empty, ERC20, ERC721, ou ERC1155
- Extensões opcionais (lista)
- Abra o projeto no editor; o contrato estará em
contracts/.
Exemplo de contrato ERC721Base sem extensões:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import '@thirdweb-dev/contracts/base/ERC721Base.sol';
contract Contract is ERC721Base {
constructor(
string memory _name,
string memory _symbol,
address _royaltyRecipient,
uint128 _royaltyBps
) ERC721Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {}
}
Ele herda ERC721Base importando o contrato, declarando a herança e implementando o construtor.
Depois de ajustar a lógica, implante na rede EVM da Tanssi (veja Implantar).
Também é possível implantar contratos prontos (NFT, token, marketplace) direto da página Explore:
- Acesse a página Explore
- Escolha o tipo de contrato
- Siga os prompts para configurar e implantar
Implantar contrato¶
O deploy do thirdweb implanta contratos em qualquer rede EVM sem expor chave privada ou configurar RPC manualmente.
- No diretório
contractsdo projeto, execute:Isso compila os contratos, permite escolher qual implantar e envia o ABI para o IPFS.npx thirdweb deploy - No dashboard que abre, preencha parâmetros como:
_name– nome do contrato_symbol– símbolo_royaltyRecipient– carteira que recebe royalties de vendas secundárias_royaltyBps– basis points (ex.: 500 = 5%)- Selecione a rede (demo EVM da Tanssi ou sua própria).
- Ajuste configurações extras no dashboard (subir NFTs, permissões, etc.).
Mais detalhes em thirdweb Deploy.
Criar aplicação¶
O thirdweb oferece SDKs para React, React Native, TypeScript, Unity, etc. Para criar um app:
- No terminal:
npx thirdweb create --app - Escolha:
- Nome do projeto
- Framework: Next.js, Vite ou React Native (exemplo usa Vite)
Depois use o SDK (React/TypeScript) para interagir com o contrato.
Informar Client ID¶
Você precisa de um Client ID (API key) do thirdweb. Crie um gratuitamente em Settings → API Keys:
- Dê um nome ao API key
- Defina domínios permitidos (para dev, pode permitir todos)
- Confirme
Coloque o Client ID no .env na raiz do projeto. Exemplo (app Vite) em client.ts:
import { createThirdwebClient } from 'thirdweb';
// Substitua pelo seu Client ID
const clientId = import.meta.env.VITE_TEMPLATE_CLIENT_ID;
export const client = createThirdwebClient({
clientId: clientId,
});
Nota
Se não definir o Client ID corretamente no .env, o app pode aparecer em branco. Corrija o Client ID primeiro.
Rodar localmente¶
Para testar local:
yarn dev
Veja o endereço/porta no console e abra no navegador.
Configurar chain¶
Como Tanssi não vem na lista padrão de @thirdweb/chains, defina uma chain customizada com defineChain:
import { defineChain } from 'thirdweb';
const tanssi = defineChain({
id: 5678,
rpc: 'https://services.tanssi-testnet.network/dancelight-2001/',
});
SDK do thirdweb¶
Resumo de métodos comuns do SDK:
Contas e carteiras¶
Conta (SDK) = um endereço capaz de assinar; não “conecta/desconecta”. Carteira agrupa contas, conecta/desconecta e delega assinatura.
Exemplo: inicializar e conectar MetaMask, assinar e enviar transação. (Ver snippet initialize.ts):
initialize.ts
import { sendTransaction } from 'thirdweb';
// MetaMask wallet used for example, the pattern is the same for all wallets
import { createWallet } from 'thirdweb/wallets';
// Initialize the wallet. thirdweb supports 300+ wallet connectors
const wallet = createWallet('io.metamask');
// Connect the wallet. This returns a promise that resolves to the connected account
const account = await wallet.connect({
// Pass the client you created with `createThirdwebClient()`
client,
});
// Sign and send a transaction with the account. Returns the transaction hash
const { transactionHash } = await sendTransaction({
// Assuming you have called `prepareTransaction()` or `prepareContractCall()` before, which returns the prepared transaction to send
transaction,
// Pass the account to sign the transaction with
account,
});
Obter contrato¶
Use getContract para conectar-se a um contrato (ex.: incrementer na rede demo EVM da Tanssi):
import { getContract } from 'thirdweb';
const contract = await getContract({
client,
address: '0xC12f6fA2d1CA8f875bD25555e8883f1dDa40a93D',
});
Ler dados¶
Use readContract para ler estados:
import { readContract } from 'thirdweb';
const value = await readContract({
contract,
method: 'function number() view returns (uint256)',
params: [],
});
Escrever transações¶
Use sendTransaction para enviar transações (lembre-se de conectar carteira/conta):
import { sendTransaction, prepareContractCall } from 'thirdweb';
const transaction = prepareContractCall({
contract,
method: 'function increment()',
params: [],
});
const { transactionHash } = await sendTransaction({
account,
transaction,
});
Eventos¶
Obtenha logs com getContractEvents:
import { getContractEvents } from 'thirdweb';
const events = await getContractEvents({
contract,
fromBlock: 0n,
toBlock: 'latest',
});
Armazenamento IPFS¶
Use upload para enviar dados ao IPFS:
import { upload } from 'thirdweb/storage';
const uri = await upload({
client,
files: [
{
name: 'metadata.json',
data: JSON.stringify({ name: 'Meu NFT', description: 'Exemplo' }),
},
],
});
Conclusão¶
Com a CLI, o Deploy e os SDKs do thirdweb, você consegue criar, implantar e interagir com contratos na sua rede EVM da Tanssi com rapidez. Consulte a documentação do thirdweb para recursos avançados.
| Criada: 9 de dezembro de 2025