Usando thirdweb na Tanssi¶

Introdução¶

thirdweb é um framework completo de desenvolvimento Web3 que fornece tudo o que você precisa para criar smart contracts, desenvolver dApps e muito mais.

Com o thirdweb, você acessa ferramentas para todas as fases do ciclo de desenvolvimento de dApps. É possível criar seus próprios contratos personalizados ou usar qualquer um dos contratos predefinidos do thirdweb para começar rapidamente. Em seguida, use a CLI do thirdweb para implantar seus smart contracts. Depois, interaja com eles criando uma aplicação Web3 na linguagem de sua escolha, incluindo, entre outras, React e TypeScript.

Este guia mostra alguns recursos do thirdweb que você pode usar para desenvolver smart contracts e dApps em redes EVM da Tanssi. Para ver todos os recursos que o thirdweb oferece, consulte o site de documentação do thirdweb.

Criar Contrato¶

Para criar um novo smart contract usando a CLI do thirdweb, siga estes passos:

No terminal, execute:
```
npx thirdweb create contract
```
Informe suas preferências nos prompts da linha de comando:
1. Dê um nome ao projeto
2. Escolha o framework: Hardhat ou Foundry
3. Nomeie seu smart contract
4. Escolha o tipo de contrato base: Empty, ERC20, ERC721 ou ERC1155
5. Adicione as extensões desejadas
Após criar, navegue até o diretório do projeto e abra-o no editor de código de sua preferência
Ao abrir a pasta contracts, você encontrará seu smart contract escrito em Solidity

O código a seguir é de um contrato ERC721Base sem extensões especificadas. Ele implementa toda a lógica contida no contrato ERC721Base.sol, que por sua vez implementa o padrão ERC721A.
```
// 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) {}
}
```
Este contrato herda a funcionalidade de ERC721Base pelas etapas:
- Importar o contrato ERC721Base
- Declarar que seu contrato herda ERC721Base
- Implementar os métodos necessários, como o builder
Depois de ajustar seu contrato com a lógica desejada, você pode implantá-lo em uma rede EVM da Tanssi usando o Deploy. Isso é coberto na próxima seção!

Como alternativa, é possível implantar um contrato predefinido para NFTs, tokens ou marketplace diretamente na página Explore do thirdweb:

Acesse a página Explore do thirdweb
Escolha o tipo de contrato que deseja implantar entre as opções disponíveis: NFTs, tokens, marketplace e mais
Siga os prompts na tela para configurar e implantar seu contrato

Para mais informações sobre os diferentes contratos disponíveis no Explore, consulte a documentação do thirdweb sobre contratos predefinidos.

Implantar Contrato¶

O Deploy é a ferramenta do thirdweb que permite implantar um smart contract em qualquer rede compatível com EVM sem configurar URLs RPC, expor chaves privadas, escrever scripts ou outras etapas adicionais como verificação do contrato.

Para implantar seu smart contract usando o Deploy, navegue até o diretório contracts do projeto e execute:
```
npx thirdweb deploy
```
Executar este comando aciona as seguintes ações:
- Compila todos os contratos no diretório atual
- Oferece a opção de escolher quais contratos você deseja implantar
- Envia o código-fonte (ABI) do seu contrato para o IPFS
Ao concluir, abrirá um dashboard para preencher os parâmetros:
- _name - nome do contrato
- _symbol - símbolo ou “ticker”
- _royaltyRecipient - endereço da carteira que receberá royalties de vendas secundárias
- _royaltyBps - basis points (bps) que serão pagos ao beneficiário a cada venda secundária, ex.: 500 = 5%
Selecione a rede desejada, por exemplo, a rede EVM de demonstração da Tanssi ou sua própria rede
Gerencie configurações adicionais no dashboard do contrato conforme necessário, como fazer upload de NFTs, configurar permissões e mais

Para informações adicionais sobre o Deploy, consulte a documentação do thirdweb.

Criar Aplicação¶

O thirdweb oferece SDKs para várias linguagens, como React, React Native, TypeScript e Unity. Você começará criando uma aplicação e depois poderá escolher qual SDK usar:

No terminal, execute:
```
npx thirdweb create --app
```
Informe suas preferências nos prompts:
1. Dê um nome ao projeto
2. Escolha o framework: Next.js, Vite ou React Native. Para este exemplo, selecione Vite
Use o SDK de React ou TypeScript para interagir com as funções da sua aplicação. Isso será abordado na próxima seção sobre interação com contratos

Especificar o Client ID¶

Antes de lançar seu dApp (localmente ou em produção), você deve ter um Client ID do thirdweb associado ao projeto. O Client ID do thirdweb equivale a uma chave de API. Você pode criar uma chave de API gratuita fazendo login na sua conta do thirdweb, indo em Settings e clicando em API Keys.

Clique em Create API Key e siga estes passos:

Dê um nome para sua chave de API
Informe os domínios permitidos para receber requisições. É recomendado permitir apenas os domínios necessários; para desenvolvimento, pode selecionar Allow all domains
Clique em Next e confirme o prompt na página seguinte

Note

O nome da variável do Client ID varia conforme o framework escolhido; por exemplo, no Vite será VITE_TEMPLATE_CLIENT_ID, no Next.js será NEXT_PUBLIC_TEMPLATE_CLIENT_ID e no React Native será EXPO_PUBLIC_THIRDWEB_CLIENT_ID.

Por fim, informe seu Client ID (API Key) no arquivo .env. O .env deve estar no diretório raiz do projeto (por exemplo, não na pasta src).

Se você gerou o app thirdweb com Vite, terá um arquivo client.ts parecido com o abaixo. Se você criou o .env com a chave de API do thirdweb definida em VITE_TEMPLATE_CLIENT_ID, pode deixar o client.ts como está e seguir para a próxima seção.

client.ts

import { createThirdwebClient } from 'thirdweb';

// Substitua pela sua string de client ID.
// Consulte https://portal.thirdweb.com/typescript/v5/client para obter um client ID
const clientId = import.meta.env.VITE_TEMPLATE_CLIENT_ID;

export const client = createThirdwebClient({
  clientId: clientId,
});

Note

Se você não criar um Client ID e não o especificar corretamente no .env, verá uma tela em branco ao tentar gerar o app. Não aparece mensagem de erro sem abrir o console, então certifique-se de configurar o Client ID corretamente.

Executar Localmente¶

Para executar seu dApp localmente para testes e depuração, use:

yarn dev

O app será compilado e mostrará o host e a porta para acessar no navegador.

Configurar Rede¶

O thirdweb oferece poucas redes em @thirdweb/chains e não inclui as redes Tanssi, então você precisa especificar os detalhes da rede, como Chain ID e URL RPC. Crie uma rede personalizada com defineChain:

chains.ts

    import { defineChain } from 'thirdweb';
    const tanssi = defineChain({
      id: 5678,
      rpc: 'https://services.tanssi-testnet.network/dancelight-2001/',
    });

thirdweb SDK¶

As seções a seguir dão uma visão geral de métodos fundamentais do SDK do thirdweb e como interagir com eles. Cada trecho de código mostra os imports relevantes e demonstra o uso em um cenário típico. Este guia serve como referência rápida para os métodos mais comuns do thirdweb usados por desenvolvedores de dApps. Para detalhes de todos os recursos do thirdweb, visite o site de documentação.

Contas e Carteiras¶

O thirdweb diferencia contas e carteiras no SDK. Para o SDK, uma conta sempre tem um endereço de blockchain e pode assinar mensagens, transações e dados tipados, mas não pode ser “conectada” ou “desconectada”. Já uma carteira contém uma ou mais contas, pode ser conectada ou desconectada e delega a assinatura às contas.

O snippet abaixo mostra como inicializar e conectar uma carteira MetaMask com o SDK do thirdweb, depois assinar e enviar uma transação recuperando o hash. Esse processo se aplica a qualquer um dos mais de 300 conectores de carteira suportados pelo SDK.

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¶

Para conectar ao seu contrato, use o método getContract do SDK. Por exemplo, você pode buscar dados de um contrato incrementer na rede EVM de demonstração da Tanssi.

import { getContract } from 'thirdweb';
import { client } from './client';

const myContract = getContract({
  client,
  chain: tanssi,
  address: 0xC12f6fA2d1CA8f875bD25555e8883f1dDa40a93D, // Endereço do contrato Incrementer na demo EVM
  abi: '[{\"inputs\":[],\"name\":\"increment\",\"outputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"number\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"timestamp\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"}]';
});

Chamar funções do contrato¶

Para chamar um contrato na versão mais recente do SDK, use prepareContractCall.

import { prepareContractCall, toWei } from 'thirdweb';

const tx = prepareContractCall({
  contract,
  // Assine a função que deseja chamar
  method: 'function mintTo(address to, uint256 amount)',
  // Passe os parâmetros para o método.
  // Os tipos são inferidos automaticamente pela assinatura
  params: ['0x123...', toWei('100')],
});

Voltando ao contrato incrementer, preparar uma chamada para incrementar o contrato fica assim:

import { prepareContractCall } from 'thirdweb';

const tx = prepareContractCall({
  contract,
  // Assine a função que deseja chamar
  method: 'function increment()',
  // Increment não recebe parâmetros, então deixe um array vazio
  params: [],
});

Preparar transações brutas¶

Você também pode preparar uma transação diretamente com dados codificados. Para isso, use o método prepareTransaction do thirdweb e especifique diretamente to, value, chain e client.

import { prepareTransaction, toWei } from 'thirdweb';

const transaction = prepareTransaction({
  // Conta que receberá
  to: '0x456...',
  // Valor em ether a enviar na transação
  value: toWei('1'),
  // Rede onde a transação será executada. Assume que você já configurou
  // a rede EVM demo da Tanssi como chain personalizada, conforme mostrado na seção de configuração
  chain: tanssi,
  // Seu client thirdweb
  client,
});

Ler Estado do Contrato¶

Use a função readContract para chamar funções de leitura do contrato informando a assinatura do método Solidity e eventuais parâmetros.

import { readContract } from 'thirdweb';

const balance = await readContract({
  contract: contract,
  method: 'function balanceOf(address) view returns (uint256)',
  params: ['0x123...'],
});

Para uma função sem parâmetros, como number, que retorna o número atual armazenado no contrato incrementer, basta informar o nome da função:

import { readContract } from 'thirdweb';

const number = await readContract({
  contract: contract,
  method: 'number',
  params: [],
});

Você sabia? Com a CLI do thirdweb, você gera facilmente funções para todas as chamadas possíveis de um contrato. Para isso, execute:

npx thirdweb generate INSERT_CHAIN_ID/INSERT_CONTRACT_ADDRESS

Chain ID e endereço do contrato são obrigatórios. Por exemplo, para gerar funções do contrato incrementer na demo EVM da Tanssi, use:

npx thirdweb generate 5678/0xC12f6fA2d1CA8f875bD25555e8883f1dDa40a93D

O arquivo gerado com todos os métodos correspondentes ficará em thirdweb/CHAIN_ID/CONTRACT_ADDRESS. No exemplo acima, o arquivo de saída fica em thirdweb/5678/0xC12f6fA2d1CA8f875bD25555e8883f1dDa40a93D.ts. Para mais informações, veja a documentação do thirdweb sobre a CLI.

Enviar uma Transação¶

Toda transação enviada com o SDK precisa ser preparada primeiro. Essa preparação é síncrona e leve, sem requisições de rede. Além disso, fornece definições type-safe para as chamadas de contrato.

Você pode preparar uma transação assim:

Prepare uma transação

import { prepareTransaction, toWei } from 'thirdweb';

const transaction = prepareTransaction({
  to: '0x1234567890123456789012345678901234567890',
  chain: tanssi,
  client: thirdwebClient,
  value: toWei('1.0'),
  gasPrice: 150n,
});

Depois de preparada, envie a transação assim:

Enviar uma transação

import { sendTransaction } from 'thirdweb';

const { transactionHash } = await sendTransaction({
  account,
  transaction,
});

Opcionalmente, use sendAndConfirmTransaction para aguardar a mineração. Isso é útil se você quiser bloquear o usuário até a confirmação.

Enviar e confirmar uma transação

import { sendAndConfirmTransaction } from 'thirdweb';
import { createWallet } from 'thirdweb/wallets';

const wallet = createWallet('io.metamask');
const account = await wallet.connect({ client });

const receipt = await sendAndConfirmTransaction({
  transaction,
  account,
});

Utilidades de Transação¶

O thirdweb fornece diversos utilitários para preparar e enviar transações.

Você pode estimar o gas usado por uma transação:

Estimando gas

import { estimateGas } from 'thirdweb';

const gasEstimate = await estimateGas({ transaction });
console.log('gas estimado', gasEstimate);

Também é possível estimar o custo em Ether e Wei:

Estimando custo de gas

import { estimateGas } from 'thirdweb';

const gasCost = await estimateGasCost({ transaction });
console.log('custo em ether', gasCost.ether);

O thirdweb também oferece uma forma prática de simular transações e verificar a integridade antes de submetê-las. Você pode simular uma transação assim:

Simular uma transação

import { simulateTransaction } from 'thirdweb';

const result = await simulateTransaction({ transaction });
console.log('resultado da simulação', result);

Você pode codificar dados da transação para usar depois:

Codificar dados da transação

import { encode } from 'thirdweb';

const data = await encode(transaction);
console.log('dados codificados', data);

ConnectButton¶

Provavelmente a primeira interação do usuário com seu dApp será conectar a carteira. O thirdweb fornece uma maneira fácil e altamente personalizável de habilitar isso. O ConnectButton pode ser adaptado às carteiras desejadas. O ConnectButton aceita um parâmetro opcional wallets com um array de carteiras. Você pode adicionar ou remover carteiras do array para alterar as opções disponíveis aos usuários. O thirdweb também oferece um Playground do ConnectButton para personalizar e ver as alterações em tempo real, dada a alta flexibilidade do botão.

ConnectButton

import { ConnectButton } from 'thirdweb/react';
import { createWallet, inAppWallet } from 'thirdweb/wallets';

const wallets = [
  inAppWallet(),
  createWallet('io.metamask'),
  createWallet('com.coinbase.wallet'),
  createWallet('me.rainbow'),
];

function Example() {
  return (
    <div>
      <ConnectButton client={client} wallets={wallets} />
    </div>
  );
}

Implantar a Aplicação¶

Relembrando, você pode compilar o projeto de exemplo localmente executando:

yarn dev

Para hospedar sua aplicação web estática em armazenamento descentralizado, execute:

npx thirdweb deploy --app

Executar esse comando cria a build de produção e armazena usando o Storage, a solução descentralizada de arquivos do thirdweb. Ele envia a aplicação construída para o IPFS, uma rede de armazenamento descentralizada, e gera uma URL única que fornece um local persistente para hospedar sua aplicação na web.

Se tiver dúvidas ou encontrar problemas durante o processo, contate o suporte do thirdweb em support.thirdweb.com.

As informações apresentadas aqui foram fornecidas por terceiros e estão disponíveis apenas para fins informativos gerais. A Tanssi não endossa nenhum projeto listado e descrito no Site de Documentação da Tanssi (https://docs.tanssi.network/). A Tanssi Foundation não garante a precisão, integridade ou utilidade dessas informações. Qualquer confiança depositada nelas é de sua exclusiva responsabilidade. A Tanssi Foundation se exime de toda responsabilidade decorrente de qualquer confiança que você ou qualquer outra pessoa possa ter em qualquer parte deste conteúdo. Todas as declarações e/ou opiniões expressas nesses materiais são de responsabilidade exclusiva da pessoa ou entidade que as fornece e não representam necessariamente a opinião da Tanssi Foundation. As informações aqui não devem ser interpretadas como aconselhamento profissional ou financeiro de qualquer tipo. Sempre busque orientação de um profissional devidamente qualificado em relação a qualquer assunto ou circunstância em particular. As informações aqui podem conter links ou integração com outros sites operados ou conteúdo fornecido por terceiros, e tais sites podem apontar para este site. A Tanssi Foundation não tem controle sobre esses sites ou seu conteúdo e não terá responsabilidade decorrente ou relacionada a eles. A existência de qualquer link não constitui endosso desses sites, de seu conteúdo ou de seus operadores. Esses links são fornecidos apenas para sua conveniência, e você isenta e exonera a Tanssi Foundation de qualquer responsabilidade decorrente do uso dessas informações ou das informações fornecidas por qualquer site ou serviço de terceiros.

Última atualização: 7 de janeiro de 2026
| Criada: 7 de janeiro de 2026