Implantando um Contrato Inteligente no Protocolo Fuel: Minha Primeira Experiência

Introdução

Neste artigo, compartilharei minha primeira experiência de implementação de um contrato inteligente no protocolo Fuel. O Fuel é um protocolo de blockchain descentralizado que oferece transações de alta velocidade e baixo custo. Eu o guiarei pelo processo de configuração da rede de teste, escrevendo e implantando o contrato inteligente e criando uma interface front-end para interagir com o contrato.

Usando o guia fornecido sobre a implementação de um contrato no protocolo Fuel, consegui configurar com sucesso a rede de teste e implementar meu próprio contrato inteligente. O vídeo que me ajudou nesse processo pode ser encontrado no seguinte link https://youtu.be/S6Fln4SreeQ. Recomendo fortemente que assista ao vídeo para obter instruções e explicações detalhadas sobre a configuração da rede de teste e a implantação de um contrato no protocolo Fuel.

Parte 1: Implantação do Contrato

Aqui está o desmembramento do código-fonte em seções, juntamente com as descrições de cada parte:

Essa linha simplesmente significa o início do código do contrato e serve como uma declaração de que estamos definindo um contrato.

Nesta seção, definimos a estrutura de armazenamento do nosso contrato inteligente. A variável counter é declarada como um número inteiro sem sinal de 64 bits (u64) e inicializada com o valor 0. Essa variável será usada para armazenar o valor do contador.

Aqui, definimos a ABI (Interface Binária de Aplicativo) para o nosso contrato. Ela especifica as funções que podem ser chamadas externamente para interagir com o contrato. A interface Counter inclui duas funções:

1. increment(): Essa função tem a notação #[storage(read, write)], indicando que ela lê e grava para o armazenamento. Ela não requer nenhum parâmetro de entrada. Essa função será responsável por incrementar o valor da variável counter.
2. count() -> u64: Essa função tem a notação #[storage(read)], indicando que ela apenas lê do armazenamento. Ela não leva nenhum parâmetro. Ele recupera o valor atual da variável counter e a retorna como um número inteiro sem sinal de 64 bits.

Nesta seção, associamos a interface Counter com o contrato principal, Contract. Isso permite que o contrato implemente as funções especificadas na interface.

• A função count() recupera o valor atual da variável counter do armazenamento usando o método try_read(). Se o valor não estiver disponível (por exemplo, se ele não tiver sido definido anteriormente) usamos unwrap_or(0) para que seja padronizado como 0. Essa função tem a finalidade de ler o valor da variável counter.
• A função increment() primeiro recupera o valor atual da variável counter do armazenamento usando o método try_read(). Adicionamos 1 ao valor recuperado e o armazenamos numa variável chamada incremented. Por fim, gravamos o valor atualizado de volta na variável counter usando o método write(), incrementando efetivamente o valor.

Em geral, esse contrato inteligente fornece funcionalidade para rastrear e incrementar um valor de contador. A função increment() aumenta o contador de 1, enquanto a função count() recupera o valor atual do contador. Ao desmembrar o código nessas seções, podemos ver claramente a declaração de armazenamento, a definição da ABI e a implementação das funções de contrato.

Parte 2: Construindo a Interface Frontend

Nesta seção, apresentarei uma visão geral do código front-end que desenvolvi para acompanhar meu contrato inteligente. Usando o React, uma biblioteca JavaScript popular para criar interfaces de usuário, criei uma interface amigável que permite que os usuários interajam com meu contrato inteligente. Para me conectar à blockchain e lidar com transações, integrei o Fuel Wallet SDK (SDK de Carteira Fuel) em meu código front-end.

O objetivo do front-end é proporcionar uma experiência intuitiva e perfeita para os usuários. Eles podem conectar facilmente suas carteiras, visualizar o valor atual do contador armazenado no contrato inteligente e incrementar o contador invocando a função apropriada. Ao desenvolver esse frontend, meu objetivo foi facilitar a interação dos usuários com meu contrato inteligente e aproveitar suas funcionalidades.

Nas seções a seguir, detalharei as diferentes partes do código front-end e explicarei como cada seção contribui para a funcionalidade geral do aplicativo.

Declarações de importação

Nesta parte, importei os módulos e as dependências necessárias para o aplicativo de front-end. Aqui está um detalhamento das importações:

• React é importado da biblioteca React para permitir a criação de componentes React.
• useEffect e useState são importados do React para usar os hooks (ganchos) correspondentes para gerenciar efeitos colaterais e de estado em componentes funcionais.
• @fuel-wallet/sdk é importado para acessar o SDK da Carteira Fuel, que fornece conectividade de blockchain.
• "./App.css" é importado para incluir o arquivo CSS para personalizar o aplicativo.
• { CounterContractAbi__factory } é importado do arquivo "./contracts". Essa importação é responsável por gerar a fábrica de contratos que será usada para interagir com o contrato inteligente.

ID do Contrato

Nesta parte, declarei uma variável constante CONTRACT_ID que representa o endereço do contrato implantado na rede de teste Fuel. Esse endereço será usado para conectar-se ao contrato e interagir com suas funções.

Componente App

Aqui, eu defini o principal componente funcional App(), que representa o aplicativo de front-end. Ele usa o gancho useState para definir diversas variáveis de estado:

• connected é um estado booleano que mantém o controle do status da conexão com a carteira Fuel. Ele é inicializado como false.
• account é um estado de string que armazena o endereço da conta selecionada no momento. Inicialmente, é uma string vazia.
• counter é um estado numérico que contém o valor atual do contador do contrato inteligente. Ele é inicialmente definido como 0.
• loaded é um estado booleano usado como sinalizador para indicar se o aplicativo terminou de carregar. Ele é inicialmente definido como false.

useEffect

Nessa parte, usei o gancho useEffect para executar determinadas ações quando o componente for criado ou quando o estado connected é alterado. Veja o que ele faz:

• Dentro da função effect, usei setTimeout para introduzir um pequeno atraso de 200 milissegundos.
• Depois do atraso, chamei a função checkConnection() que verifica se a Carteira Fuel está conectada.
• Quando o atraso termina e a conexão é verificada, eu defino o estado loaded para true.
• Se o estado connected muda, indicando uma conexão bem-sucedida, chamo a função getCount() para buscar o valor atual do contador do contrato inteligente.

Isso garante que a conexão seja verificada e que o valor do contador seja obtido quando o componente for ativado e sempre que o estado connected mudar.

Conclusão

Concluindo, tenho orgulho de ter desenvolvido com sucesso a interface front-end para meu projeto de contrato inteligente. Aproveitando o React e integrando o SDK de Carteira Fuel, criei uma interface amigável que permite que os usuários interajam com as funcionalidades do meu contrato inteligente sem problemas.

O front-end permite que os usuários conectem suas carteiras, visualizem o valor atual do contador armazenado no contrato inteligente e aumentem o contador conforme desejado. Ele oferece uma experiência simples e intuitiva, tornando conveniente para os usuários se engajarem ao meu contrato inteligente.

Estou animado para compartilhar meu projeto com outras pessoas e convido você a explorar o código e a documentação no meu repositório do GitHub: https://github.com/PaulZhemanov/fuel-counter-contract. Sinta-se à vontade para fornecer feedback ou sugestões de aprimoramento.

Esse artigo foi escrito por Paul e traduzido por Fátima Lima. O original pode ser lido aqui.