WEB3DEV

Cover image for Tutorial: Construa com a Infura na rede Celo de camada 1 compatível com a Ethereum
Jhonattan Farias
Jhonattan Farias

Posted on

Tutorial: Construa com a Infura na rede Celo de camada 1 compatível com a Ethereum

A Infura tem o prazer de anunciar a adição da rede Celo à plataforma Infura. A Celo é uma rede de camada 1 compatível com a EVM, construído com a esperança de acelerar o bem social por meio da blockchain. É um ator importante no ReFi, ou “Finanças Regenerativas”, um movimento que emprega a Web3 para resolver questões sociais como mudanças climáticas, desigualdade de renda e biodiversidade.

Como grande parte do mundo opera a partir de seus smartphones, a Celo trata os celulares como cidadãos de primeira classe em sua rede. A carteira criptográfica móvel Valora foi desenvolvida pela primeira vez dentro da Celo antes de ser lançada em 2021.

A Celo apoia os louváveis objetivos acima através de uma série de iniciativas e recursos técnicos, tais como:

  • Usando provas de conhecimento zero (zero knowledge) e um mecanismo de consenso de prova de participação (Proof of Stake, ou PoS) negativo em carbono para reduzir sua pegada ambiental. O PoS negativo de carbono da Celo é alcançado por meio de compensações diárias por meio de seu trabalho com o Projeto Wren.

  • Garantindo taxas de gás baixas, que podem ser pagas em ETH, no token CELO ou em qualquer uma das moedas estáveis nativas da Celo, como cUSD, cEUR ou cREAL

  • Priorizando o uso de dispositivos móveis primeiro por meio do desenvolvimento do projeto externo Valora e enfatizando linguagens otimizadas para dispositivos móveis, como React, React Native e Flutter.

Todos esses recursos tornam a Celo atraente para quem deseja usar a blockchain para sempre. Você está pronto para construir sobre ela? Neste tutorial, vamos mostrar como é fácil começar a usar o Celo Composer usando Infura e Truffle. Ao final deste artigo, você será capaz de implantar um contrato inteligente na rede de teste Celo e criar um front-end em React dapp.

Pré-requisitos

Antes de começar, certifique-se de ter todos os lanches necessários para esta viagem incrível:

Começando

Crie uma nova chave de acesso Web3 com endpoints Celo
Começaremos criando uma nova chave de acesso Infura Web3 (anteriormente, ID do projeto) com os endpoints Celo ativados. Esta chave será utilizada pelo nosso aplicativo para executar transações contra a rede Celo. Veja como fazer isso com a Infura (ou siga este guia de introdução).

  • Faça login na página principal da Infura

  • Clique no botão do lado direito - Criar nova chave

  • Do modal que aparece:

  • Selecione Rede → API Web3

  • Digite o que quiser no campo Nome 🙂

  • Clique em “Criar”

  • Role para baixo até localizar Celo

  • No menu suspenso de rede, selecione o endpoint da rede de teste (testnet) Alfajores

  • Clique no ícone certo para copiar o conteúdo

A saída deve ser:

https://celo-alfajores.infura.io/v3/
Anote isso, pois isso será útil mais adiante neste tutorial.

Celo Composer
O Celo Composer fornece modelos fáceis para iniciar o desenvolvimento. Você pode usar o Celo Composer seguindo as etapas no Leia-me.

Para usar o Truffle, você precisa fazer alguns ajustes.

Você tem duas opções:

  1. Você pode clonar o repositório original e descomentar as linhas do Truffle (aqui, aqui e aqui)
    ou

  2. Você pode fazer um fork de um repositório onde cuidamos disso para você:
    Clone do Git http://www.github.com/cooganb/celo-infura-truffle

Fundos da rede de teste
Vamos precisar de alguns testfunds da Alfajores, testnet da Celo. Pegue sua conta de desenvolvedor MetaMask mais próxima e pegue algum dinheiro grátis para diversão. (O site da testnet adicionará Alfajores à sua conta MetaMask se você permitir. Se, por algum motivo, você não for solicitado, verifique Chainlist.)

Agora que temos algum dinheiro para trabalhar, vamos implantar nosso contrato na testnet da Celo. Faremos isso de duas maneiras diferentes. Primeiro, usaremos a implantação da linha de comando Infura e Truffle. Em seguida, usaremos o Truffle Dashboards com um complemento personalizado da Infura.

Implantando o contrato

Método 1: implantação da linha de comando
Para esta demonstração, vamos compilar um contrato básico Greeter para a Celo que já foi escrito e preparado. Estamos usando o Truffle para compilar contratos. Certifique-se de ter o Truffle instalado e execute os seguintes comandos:

cd packages/truffle
yarn install
truffle compile
Enter fullscreen mode Exit fullscreen mode

Para a implantação do contrato, precisamos criar e adicionar nossa chave privada que contém nossos fundos da testnet da Celo a um arquivo .env no diretório do Truffle.

Você também precisará adicionar as informações da sua conta Infura ao arquivo de configuração do Truffle. Preencha isso aqui; também é mostrado abaixo:

networks: {
    alfajores: {
        network_id: 44787,
        provider: () =>
            new PrivateKeyProvider(
                PRIVATE_KEY,
                `https://celo-alfajores.infura.io/v3/${INFURA_API_KEY}`,
    ),
},
celoMainnet: {
    network_id: 42220,
    provider: () =>
        new PrivateKeyProvider(
            PRIVATE_KEY,
            `https://celo-mainnet.infura.io/v3/${INFURA_API_KEY}`
            ),
    },
},
Enter fullscreen mode Exit fullscreen mode

Depois de definir os detalhes acima, podemos implantar o contrato usando o seguinte comando:

truffle deploy --network alfajores

Supondo que tenhamos fundos suficientes e tenhamos configurado truffle-config.js corretamente, devemos ver nosso contrato implantado com sucesso no terminal.

Método 2: implantação do painel Infura + truffle
Se você já implantou o contrato usando o método acima, pode pular para “Construindo o Frontend”

Claro, há mais de uma maneira de implantar seu contrato inteligente, então vamos dar uma olhada em como adicionar a Infura como um endpoint personalizado. Truffle tem um ótimo recurso chamado Dashboard (painel), onde tudo o que precisamos fazer é garantir que usamos a conta MetaMask do exemplo anterior. É uma ótima opção que podemos usar para implantar nossos contratos com segurança e rastrear métricas de nosso painel Infura.

Primeiro, vamos adicionar nosso endpoint Infura Celo à MetaMask. Nas configurações de “Rede” na MetaMask, clique em “Adicionar rede”:

Imagem mostra todas as redes disponiveis para selecionar na metamask

Em seguida, adicione os detalhes da rede, mas usando seu endpoint RPC da Celo específico da Infura:

Imagem mostra preenchendo os campos necessário para adicionar uma nova rede a metamask

Clique em “Salvar” e você terá seu endpoint de rede Alfajores habilitado na Infura pronto para usar.

Inicie o Truffle Dashboard em um novo terminal com:

truffle dashboard

Você deve ver uma janela do navegador aberta. Clique em “Conectar carteira” e verifique se você está em sua conta de endpoint personalizada da Infura:

Imagem mostra o truffle pedindo para confirmar a conexão com a testnet celo alfajores

Abra um novo terminal e execute o seguinte comando para implantar o contrato Greeter:

truffle deploy --network dashboard

Imagem mostra o dashboard do truffle com uma transação

Clique em “Processar” na transação e ele solicitará a abertura do MetaMask. Confirme a transação.

Supondo que você tenha recursos e tudo corra bem, o contrato deve ser implantado.

Construindo o Front-end

Agora, vamos configurar o lado front-end das coisas. Vamos configurar o React, mas você pode usar React Native (com ou sem Expo) ou Flutter também.

Vá para a pasta de pacotes react-app, instale as dependências e tenha um ambiente de desenvolvimento funcionando:

cd ../packages/react-app
yarn install
yarn dev
Enter fullscreen mode Exit fullscreen mode

Abra localhost:3000 (a menos que você tenha alterado a porta padrão) em seu navegador e conecte sua carteira. Ao contrário do Ethereum, com o Celo existem várias opções de carteira diferentes, incluindo o Valora. Isso fala da diversidade de desenvolvimento que está acontecendo na rede Celo.

Depois de conectar-se à conta que você financiou por meio da Alfajores, você verá o seguinte:

Imagem mostra o dashboard do celo composer com alguns dados da carteira

Clique no índice 0 na barra de ferramentas e você obterá as informações sobre o contrato Greeter que implantamos:

Imagem mostra os dados do contrato implantado pelo celo composer

A partir daqui, você pode ler ou definir o valor greet do nosso contrato. Faça uma tentativa!

Conclusão

Este é apenas o começo do que é possível na Celo com o celo-composer. Se você quiser construir algo com o template, use npx @celo/celo-composer e selecione o template react-with-tailwind. O Celo-composer também tem suporte para mais linguagens que priorizam os dispositivos móveis, como Flutter e React Native.

A Celo também tem um novo recurso interessante que será lançado em breve chamado SocialConnect, um “protocolo de código aberto para criar atestados mapeando identificadores fora da cadeia”, como números de telefone celular, contas do Twitter ou endereços de e-mail”. Ele permite que os usuários do Celo enviem dinheiro para esses identificadores, mesmo que os usuários por trás dessas contas ainda não tenham uma conta Celo. Depois de fazer login e reivindicar o identificador, eles podem reivindicar os fundos. É uma abordagem inovadora que pode ter um impacto enorme na indústria de remessas, já que as pessoas podem usar o SocialConnect para enviar fundos em stablecoins para amigos e parentes.

Tudo isso fala do foco do cLabs, da Fundação Celo e do protocolo Celo para levar eficiência, inclusão e outros benefícios da blockchain aos locais que mais precisam de assistência financeira e ambiental. A Infura está entusiasmada em se juntar à Celo nesses esforços.

Para começar a construir com a Celo na Infura, cadastre-se para uma conta gratuita agora.

Para obter mais documentação técnica, visite nossos documentos.

Este artigo foi escrito pelo https://blog.infura.io/post/tutorial-build-with-infura-on-celo e traduzido por Jhonattan Farias

Top comments (0)