O obejetivo dessa aula é criar um botão de connect para conectar o seu site com a Metamask do usuário. Esse botão pode funcionar como uma espécie de login e após conectado exibe a wallet ID do usuário.

MetaMask é uma extensão ou plugin para navegadores da web que permite aos usuários interagir facilmente com os dApps do blockchain Ethereum. Isso é possível, pois MetaMask atua como uma ponte entre dApps e navegadores web, facilitando seu uso e aproveitamento. Ela é bem conhecida e muita utilizada como carteira digital de crypto moedas.

A MetaMask é pioneira nessa área e permite interações do usuário na Web3. Atualmente, está disponível como uma extensão do navegador e como um aplicativo móvel em dispositivos Android e iOS. Porém nessa aula vamos usar apenas a versão desktop, que é uma extensão para o Google Chrome.

Usarems a API da Metamask que facilita a comunicação com a Ethereum Provider API usando javascript. Essa API permite que os sites solicitem contas Ethereum dos usuários, leiam dados de blockchains aos quais o usuário está conectado e sugira que o usuário assine mensagens e transações.

Links Úteis:

• Extensão para o Chrome da Metamask
• Passo-a-passo para criar uma carteira Metamask

Dashboard simples com funções básicas criado como ambiente de testes.

Stack: React | Typescript | Styled-components

Libraries: FontAwesome | ESLint | Axios

Repositório para clone/fork: fabdash

1. Criar o botão "Connect", para conectar com a Metamask;
2. Detectar a Metamask no browser do usuário;
3. Trocar a rede (Network);
4. Connectar o site com a Metamask;
5. Pegar o ID da carteira da Metamask do usuário;
6. Mostrar o ID ao invés do botão de conectar quando conectado;

Rafael Perozin

“Sou senior frontend developer na BrandAlley, uma loja virtual com super descontos em marcas de roupas famosas que tem mais de 30 milhões de acesso diários. Sou um dos responsáveis por reconstruir todo o front da loja com React, React Native e Typescript. Para quem quiser me conhecer melhor pode me adicionar no LinkedIn, seguir meu canal no Instagram onde eu mostro um pouco do meu dia a dia aqui na Inglaterra e seguir o meu canal no Youtube onde eu falo sobre softskills e como é trabalhar fora.”

• Youtube: Rafael Perozin
• Linkedin: Rafael Perozin
• Instagram: @RafaelPerozin
• Twitter: @RafaelPerozin