WEB3DEV

Cover image for Como construir um Dapp com React Native usando WalletConnect
Adriano P. Araujo
Adriano P. Araujo

Posted on

Como construir um Dapp com React Native usando WalletConnect

Já se perguntou como é criar um dapp mobile web3 como Showtime ou OpenSea? Ser um desenvolvedor dapp mobile desbloqueia superpotências para entender como o provedor funciona, como as conexões do dapp e da carteira funcionam e como interagir com contratos inteligentes / RCP do Blockchain.

Neste tutorial, criaremos um simples dapp web3 com oWalletConnect Modal via React Native Expo, que capacita você com as fundações para ser um desenvolvedor web3 dapp.

O que vamos construir neste tutorial?

Neste tutorial simples, estaremos criando uma dapp simples que assina uma mensagem depois de ter se conectado à Blockchain do Ethereum, após a aprovação da carteira.

Recomendo fortemente passar pela documentação antes de começar.

O processo do tutorial é dividido em:

  • Pré-requisitos

  • Instalação

  • Configuração do projeto

Vamos começar 🫡

Também criei um tutorial do YouTube para me sentir à vontade para seguir aqui!

Tutorial no youtube

Pré-requisitos

Tenha um dispositivo móvel ( iOS ou Android ) com o Expo Go instalado. Registre uma conta em expo.dev para um fluxo mais fácil.

Instale também uma carteira móvel. Recomendamos a Alpha Wallet, Trust ou Zerion. Isso facilitará a conexão da carteira com dapp.

Instalação

Vamos começar iniciando um projeto Expo!


npx create-expo-app -t expo-template-blank-typescript

// Quando solicitado com "What is your app named"

// Tipo: reactnative_dapp_tutorial



cd reactnative_dapp_tutorial

npx expo start

Enter fullscreen mode Exit fullscreen mode

Conforme a Documentação da Expo.

Instale o aplicativo Expo Go no seu telefone iOS ou Android e conecte-se à mesma rede sem fio do seu computador. No Android, use o aplicativo Expo Go para digitalizar o QR code do seu terminal para abrir seu projeto. No iOS, use o scanner do QR code nativo do aplicativo de Camera padrão

do iOS 

Siga as instruções da Expo aqui para mais sobre a configuração.

Digitalize seu QR code com o dispositivo para executar a Expo em paralelo com o fluxo de código.

Um exemplo de como o QR code deve se parecer após executar o comando npx expo start é mostrado abaixo, juntamente com como ele deverá ser exibido em seu dispositivo móvel quando o Expo estiver em execução.


Agora vamos começar com os módulos WalletConnect.

De acordo com a documentação da WalletConnect, vamos instalar o seguinte.


npx expo install @walletconnect/modal-react-native

npx expo install @react-native-async-storage/async-storage react-native-get-random-values react-native-modal react-native-svg

Enter fullscreen mode Exit fullscreen mode

Inicializando o WalletConnect Modal

Obtenha um projectID do WalletConnect Cloud Platform

Com este tutorial, usaremos o projectID que é mostrado depois de você criar um projeto. Normalmente, adotamos uma abordagem .env, mas isso é complicado no React Native, por isso, prosseguiremos com o apenas copiar e colar o projectID para fins de desenvolvimento / tutorial.

  • Instalação

  • Tela

Configuração do projeto

Espero que você tenha lido a documentação do WalletConnect Modal.

⚠️⚠️ NOTA: Para aqueles utilizando Expo 48, consulte aqui para mais passos.⚠️⚠️

Alguns problemas com  expo / polyfill  são abordados nas etapas extras acima.

As principais funções que precisamos entender relacionadas ao pacote são:

  • WalletConnectModal

  • UseWalletConnectModal Hook

WalletConnectModal


<WalletConnectModal projectId={projectId} providerMetadata={providerMetadata} />

Enter fullscreen mode Exit fullscreen mode

Você pode pensar que este é o provedor que envolve toda a conexão do modal. Você passa o ID do projeto para usar a WalletConnect e fornece metadados extras para ajudar o lado da carteira a entender o que é esse dapp em relação ao nome, descrição, URL, ícones e links de redirecionamento.

Para mais informações sobre quais dependências os pacotes usar:


"dependencies": {

    "@ethersproject/shims": "5.7.0",

    "@walletconnect/core": "2.9.0",

    "@walletconnect/react-native-compat": "2.9.0",

    "@walletconnect/universal-provider": "2.9.0",

    "qrcode": "1.5.3",

    "valtio": "1.10.5"

  }

Enter fullscreen mode Exit fullscreen mode

A dependência mais importantes é a @walletconnect / universal-provider que usa a nossa API de Login , que permite aos usuários executar ações na blockchain. Mais informações podem ser encontradas aqui. 

Hook UseWalletConnectModal


 


import { useWalletConnectModal } from "@walletconnect/modal-react-native";

const { isOpen, open, close, provider, isConnected, address } = useWalletConnectModal();

Enter fullscreen mode Exit fullscreen mode

Esse hook fornece acesso à abertura / fechamento do modal da  WalletConnect e verifica se ele está conectado e expõe o provedor com ações na Blockchain.

Então, vamos adicionar isso ao nosso código / App.tsx


import { WalletConnectModal } from '@walletconnect/modal-react-native';



const projectId = 'YOUR_PROJECT_ID';



const providerMetadata = {

  name: 'YOUR_PROJECT_NAME',

  description: 'YOUR_PROJECT_DESCRIPTION',

  url: 'https://your-project-website.com/',

  icons: ['https://your-project-logo.com/'],

  redirect: {

    native: 'YOUR_APP_SCHEME://',

    universal: 'YOUR_APP_UNIVERSAL_LINK.com'

  }

};



function App() {

  return (

    <>

      <WalletConnectModal projectId={projectId} providerMetadata={providerMetadata} />

    </>

  )

}

Enter fullscreen mode Exit fullscreen mode

Aqui inicializamos o WalletConnectModal com as propriedades

  • ProjectID

  • ProviderMetaData

Adicione seu ProjectID da nuvem e adicione seus próprios metadados.

Em seguida, queremos adicionar useWalletConnectModal e use o hook useWalletConnectModal.


import { StyleSheet, Text, View, Pressable } from "react-native";



import {

  WalletConnectModal,

  useWalletConnectModal,

} from "@walletconnect/modal-react-native";

//Adicione o hook useWalletConnectModal




const projectId = "...";



const providerMetadata = {

  name: "YOUR_PROJECT_NAME",

  description: "YOUR_PROJECT_DESCRIPTION",

  url: "https://your-project-website.com/",

  icons: ["https://your-project-logo.com/"],

  redirect: {

    native: "YOUR_APP_SCHEME://",

    universal: "YOUR_APP_UNIVERSAL_LINK.com",

  },

};



export default function App() {

  // Adicione o hook+ props useWalletConnectModal

  const { open, isConnected, address, provider } = useWalletConnectModal();



  // Função para lidar com o

  const handleButtonPress = async () => {

    if (isConnected) {

      return provider?.disconnect();

    }

    return open();

  };



  // Principal renderização da Interface do Usuário

  return (

    <View style={styles.container}>

      <Text style={styles.heading}>WalletConnect Modal RN Tutorial</Text>

      <Text>{isConnected ? address : "No Connected"}</Text>

      <Pressable onPress={handleButtonPress} style={styles.pressableMargin}>

        <Text>{isConnected ? "Disconnect" : "Connect"}</Text>

      </Pressable>



      <WalletConnectModal

        projectId={projectId}

        providerMetadata={providerMetadata}

      />

    </View>

  );

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: "#fff",

    alignItems: "center",

    justifyContent: "center",

  },

  heading: {

    fontSize: 18,

    fontWeight: "bold",

    marginBottom: 16,

  },

  pressableMargin: {

    marginTop: 16,

  },

});

Enter fullscreen mode Exit fullscreen mode

Sua interface do usuário deve ficar assim:

  • Deve permitir conectar-se à carteira (Carteira de confiança usada)

  • Em seguida, sua carteira deve solicitar uma solicitação de conexão

  • Então você será redirecionado para o dapp nativo do reator. ***

  • Você está agora conectado!

  • Você tem a opção de desconectar.

  • ** Nota: nem todas as carteiras móveis lidam bem com redirecionamentos. Isso depende da carteira de sua escolha.

Vamos mergulhar nas alterações de código aqui:

  1. Nós importamos o useWalletConnectModal

  2. Acessamos os props e funções com: open, isConnected, address e provider

  3. Criamos uma função  handleButtonPress para permitir .open( ), que permite a conexão e, se não estiver conectado, temos acesso ao provedor e desconectamos com o provider.disconnect( ). Para mais informações sobre provedores, leia aqui.

  4. O restante da interface do usuário na função de retorno + folha de estilo são autoexplicativos em relação ao gerenciamento da interface do usuário do React Native.

Você sabe que possui legos e blocos de construção fundamentais sobre como começar e criar seu primeiro dapp React Native Mobile 👐

Para expandir ainda mais o que você pode fazer no lado do dapp, você pode começar a explorar

  • ethers.js

  • wagmi / viem

Então você pode começar a aprender a interagir com o Blockchain RPC e os Contratos Inteligentes

  • Assinar / Enviar mensagens / transações

  • Interagir com contratos inteligentes (Ler ou Escrever )

Vou cobrir isso em outra postagem / tutorial do blog 🤝

Para aqueles com alguma dúvida sobre este tutorial, entre em contato comigo via Twitter ou abra um issue aqui em nosso React Native Repo/Issues


Este artigo foi escrito por Tom Terado e traduzido por Adriano P. de Araujo. O original em inglês pode ser encontrado aqui.

Oldest comments (0)