Autenticação Web3 na blockchain Flow

O seguinte artigo é o primeiro de uma série de artigos que o ajudará a construir uma DAO na rede Flow usando a Cadence.

No artigo anterior, desenvolvemos e implantamos (para Testnet) nosso primeiro contrato inteligente Cadence: a Whitelist. Agora, vamos desenvolver uma aplicação básica de frontend que interagirá com nosso contrato inteligente na blockchain Flow. Não terá nenhum estilo elegante. Deixaremos isso para a próxima parte deste guia.

As Ferramentas

Para esse dApp usaremos o React com Vite. Não vamos usar. npx create-react-app. Ao invés disso, iremos usar npm create vite@latest

Por que? Bem, ‘create-react-app’ tem um par de problemas que vêm com a sua utilização. Primeiro, é muito lento durante o desenvolvimento e, segundo, não está pronto para produção ou scaling. Além disso, não tem recursos embutidos agradáveis; não há geração do lado do servidor; usar TypeScript é mais difícil do que necessário e esse é praticamente o caso de todas as muitas outras coisas extras que você simplesmente quer em seu aplicativo.

Agora, o Vite é muito semelhante para criar um app react, pois dá a você outputs semelhantes, mas de forma muito mais rápida.

Como? Bem, ao iniciar uma partida a frio o servidor dev, uma configuração de compilação baseada em bundler (como create-react-app) tem que engatinhar avidamente e construir todo o seu aplicativo antes que ele possa ser servido. O Vite melhora o tempo de início do servidor dev dividindo primeiro os módulos de um aplicativo em duas categorias: dependências e código-fonte.

O Vite fornece o código-fonte sobre o ESM nativo. Isto é essencialmente deixar que o navegador assuma parte do trabalho de um bundler (empacotador): O Vite só precisa transformar e servir o código-fonte sob demanda, conforme solicitado pelo navegador. O código por trás das importações dinâmicas condicionais só é processado se realmente utilizado na tela atual.

Vamos Começar!

No diretório raiz do seu projeto, abra o seu terminal e digite npm create vite@latest. Estou assumindo que você tenha o node.js e os requisitos prévios instalados. No interior do menu do console do Vite, digite o nome do seu aplicativo e do pacote, selecione React como seu framework e JavaScript como sua variante.

Agora, siga as instruções do Vite para instalar as dependências. Uma vez terminada a instalação das dependências, execute npm run dev no terminal e clique com o botão direito do mouse sobre o url local que ele lhe fornece. Você deve ver algo como isto

Uma vez dentro da pasta do seu aplicativo, você poderá ver uma pasta src contendo seu aplicativo react. Dentro da src vamos criar uma pasta chamada Flow e dentro dela vamos criar mais duas pastas: Scripts e Transactions.

A partir destas pastas importaremos nossos scripts e transações necessários para interagir com a blockchain. Mas antes disso, você precisa ter uma conta e para criar uma conta você precisa de uma carteira... e para integrar uma carteira Flow ao seu aplicativo você precisa de uma configuração Flow Client Library (FCL ou Biblioteca do Cliente Flow).

Abra o terminal e digite npm i @onflow/fcl nele. A seguir, no interior da biblioteca Flow, vamos criar um arquivo chamado config.js e dentro dele, copiaremos o seguinte:

import { config } from "@onflow/fcl";
config()
.put('app.detail.title', "Sample DAO")
.put('app.detail.icon', 'https://clipground.com/images/placeholder-logo-6.png')
.put('accessNode.api', 'https://rest-testnet.onflow.org')
.put('discovery.wallet', 'https://fcl-discovery.onflow.org/testnet/authn');

A FCL tem um mecanismo que lhe permite configurar vários aspectos da FCL. A idéia principal aqui (de uma perspectiva FCL) deve ser que quando você passar de uma instância da blockchain Flow para outra (emulador local para Testnet para Mainnet) a única coisa que você precisará mudar será sua configuração.

Os valores só precisam ser definidos uma única vez. Recomenda-se fazer isto uma vez e o mais cedo possível nos seus ciclos de vida. Para definir um valor de configuração, o método put na instância de configuração precisa ser chamado, o método put retorna a instância de configuração para que eles possam ser encadeados.

Eu explicarei o que está acontecendo aqui:

• app.detail.title — O título do seu aplicativo pode ser solicitado por carteiras e outros serviços.
• app.detail.icon — O Url para o ícone do seu aplicativo pode ser solicitado por carteiras e outros serviços.
• accessNode.api– O URL da Api para o Nó de Acesso à Blockchain Flow com o qual você deseja estar se comunicando.
• discovery.wallet– Aponta o FCL na Carteira ou mecanismo de Descoberta da Carteira.

Salve seu arquivo de configuração e agora crie outro arquivo na pasta Flow chamado actions.js e nele importaremos nossa configuração fcl.

import * as fcl from "@onflow/fcl";
import './config';

Nosso arquivo de configuração permitirá que nossas funções saibam com qual rede Flow nosso dApp deve se conectar e com qual fornecedor/es de carteira.

Agora, precisamos criar um par de funções lifecycle em torno da autorização, conexão e desconexão de nossos usuários. Logo abaixo de nossas importações, escreva o seguinte código:

// Funções Auth FCL Lifecycle 
export const logOut = () => fcl.unauthenticate();
export const logIn = async () => await fcl.logIn();
export const signUp = () => fcl.signUp();
export const currentUser = () => fcl.currentUser()

O conceito de autenticação em FCL está intimamente ligado ao conceito de currentUser do FCL, então vamos olhar para a currentUser.

Como desenvolvedor dApp, usando FCL, nosso pensamento atual é permitir três elementos principais de funcionalidade.

• Como conhecer a currentUser e se elas estão logadas.
• Como fazer login de um usuário.
• Como fazer logout do usuário.

Devido à natureza do funcionamento da FCL, o login e a inscrição de um usuário são a mesma coisa.

Começando a Integração Frontend

Agora podemos registrar, fazer login e logout de nossos usuários e também podemos gravar dados deles. Vamos provar isso muito rapidamente, testando em nosso frontend. Em nosso arquivo App.jsx, vamos importar nossa funcionalidade fcl desta forma:

import {
logIn,
currentUser,
logOut,
} from "./Flow/actions";

Após a importação de nossas funções, nosso arquivo deve se parecer com o seguinte:

E agora vamos salvá-lo e tentar executar npm run dev para ver como fica no navegador. Ah, espere; não há nada lá!

Meu navegador está completamente em branco (e não deveria) e isso aconteceu logo após eu importar essas funções da action.js. O que está acontecendo?

Bem, trabalhar com a Flow Client Library traz um desafio inesperado ao tentar integrá-la a um frontend construído e desenvolvido com o Vite. Isto é principalmente porque a Flow Client Library usa um método chamado node-fetch que não funciona do lado do cliente, de modo que trava o aplicativo.

Então, para resolver este problema, vamos executar npm i isomorphic-fetch e depois vamos mudar nosso arquivo vite.config.js para:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [react()],
 resolve: {
   alias: {
     'node-fetch': 'isomorphic-fetch',
   },
  },
});

A linha que acrescentei à configuração do Vite muda todos os métodos do "node-fetch" para o isomorphic-fetch, que funciona no lado do cliente. Uma vez feito isso, tente executar o npm run dev novamente e verifique seu navegador.

Agora que corrigimos isso, vamos integrar nossas funções e para isso precisamos de um par de botões. Dentro do cartão div, introduza dois botões como este:

     <div className="card">
       <button onClick={() => logIn()}>
         Connect
       </button>
       <button onClick={() => logOut()}>
         Disconnect
       </button>
     </div>

Isto nos permitirá conectar e desconectar nossas contas do dApp, mas uma vez que clicamos nelas não notaremos nenhuma diferença! Portanto, vamos incluir uma variável para exibir o endereço do usuário conectado e para isso precisaremos importar as funções UseEffect e UseState da biblioteca react.

Primeiro, criaremos uma variável de usuário com useState e a definiremos como nula.

const [user, setUser] = useState(null);

A seguir, usaremos useEffect para inscrever nosso usuário atual. A FCL oferece duas formas de obter as informações dos usuários atuais. Uma maneira é o compromisso de retornar um snapshot das informações, enquanto a outra permite que você se registre para a info, chamando uma função callback com as últimas informações sempre que elas mudarem. Esta função callback será setUser.

 useEffect(() => {
   currentUser().subscribe(setUser);
 }, []);

E logo abaixo do nosso título Vite + React, vamos incorporar

     <h1>User's Address: {user?.addr}</h1>

No final, tudo deve ficar assim.

Muito bem, vamos testá-lo! Clique em connect e um modal deverá aparecer e lhe dará uma lista de fornecedores de carteiras que você pode escolher. Para este cenário, vamos clicar em Blocto

Ele solicitará seu endereço de e-mail para lhe enviar um código que você terá que digitar para confirmar sua identidade. Uma vez feito isso, você estará conectado à rede Flow através de nossa autenticação de carteira e agora você tem uma conta que está vinculada ao seu e-mail. O endereço de sua conta deve agora ser mostrado no navegador.

No próximo artigo, faremos o frontend um pouco mais organizado e estilizado e aprenderemos como silenciar e ler a blockchain a partir do nosso dApp.

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