¿Alguna vez te has preguntado cómo es crear una aplicación descentralizada (Dapp) móvil web3 como Showtime u OpenSea? Ser un desarrollador de Dapps móviles desbloquea superpoderes para comprender cómo funciona el proveedor, cómo funcionan las conexiones entre la Dapp y la billetera, y cómo interactuar con contratos inteligentes / RCP de la blockchain.
En este tutorial, crearemos una sencilla Dapp web3 con WalletConnect Modal a través de React Native Expo, lo que te proporcionará los fundamentos para convertirte en un desarrollador de Dapps web3.
...
¿Qué vamos a construir en este tutorial?
En este tutorial sencillo, crearemos una Dapp que firma un mensaje después de haberse conectado a la blockchain de Ethereum, una vez aprobada la billetera.
Recomiendo encarecidamente revisar la documentación antes de comenzar.
El proceso del tutorial se divide en:
Requisitos previos
Instalación
Configuración del proyecto
¡Empecemos!
También creé un tutorial de YouTube sobre este tema. Siéntete libre de seguirlo aquí.
Requisitos Previos
Necesitarás un dispositivo móvil (iOS o Android) con Expo Go instalado. Registra una cuenta en expo.dev para un flujo más sencillo.
También instala una billetera móvil. Recomendamos Alpha Wallet, Trust o Zerion. Esto facilitará la conexión de la billetera con la Dapp.
Instalación
¡Empecemos creando un proyecto Expo!
npx create-expo-app -t expo-template-blank-typescript
// Cuando se le solicita con "What is your app named"
// Tipo: reactnative_dapp_tutorial
cd reactnative_dapp_tutorial
npx expo start
Según la Documentación de Expo.
Instala la aplicación Expo Go en tu teléfono iOS o Android y conéctalo a la misma red inalámbrica que tu computadora. En Android, utiliza la aplicación Expo Go para escanear el código QR en tu terminal y abrir tu proyecto. En iOS, utiliza el escáner de códigos QR nativo de la aplicación de la cámara estándar de iOS.
Sigue las instrucciones de Expo aquí para obtener más información sobre la configuración.
Escanea el código QR con tu dispositivo para ejecutar Expo en paralelo con el flujo de código.
A continuación, se muestra un ejemplo de cómo debería verse el código QR después de ejecutar el comando npx expo start, junto con cómo se verá en tu dispositivo móvil cuando Expo esté en funcionamiento.
Ahora vamos a empezar con los módulos de WalletConnect.
Según la documentación de WalletConnect, vamos a instalar lo siguiente.
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
Inicializando el WalletConnect Modal
Obtén un projectID de la plataforma en la nube de WalletConnect.
Con este tutorial, utilizaremos el projectID que se muestra después de que creas un proyecto. Normalmente, adoptamos un enfoque .env, pero esto es complicado en React Native, por lo que continuaremos simplemente copiando y pegando el projectID con fines de desarrollo / tutorial.
Instalación
Pantalla
Configuración del proyecto
Espero que hayas leído la documentación del WalletConnect Modal.
⚠️⚠️ NOTA: Para aquellos que utilizan Expo 48, consulta aquí para obtener más pasos. ⚠️⚠️
Algunos problemas con expo/polyfill se abordan en los pasos adicionales mencionados anteriormente.
Las principales funciones que debemos entender relacionadas con el paquete son:
WalletConnectModal
UseWalletConnectModal Hook
WalletConnectModal
<WalletConnectModal projectId={projectId} providerMetadata={providerMetadata} />
Puedes pensar en este como el proveedor que envuelve toda la conexión del modal. Pasas el ID del proyecto para utilizar WalletConnect y proporcionas metadatos adicionales para ayudar al lado de la billetera a entender qué es esta Dapp en relación con el nombre, descripción, URL, íconos y enlaces de redirección.
Para obtener más información sobre las dependencias que los paquetes utilizan:
"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"
}
Una de las dependencias más importantes es @walletconnect/universal-provider, que utiliza nuestra API de Firma que permite a los usuarios realizar acciones en la blockchain.
useWalletConnectModal Hook
import { useWalletConnectModal } from "@walletconnect/modal-react-native";
const { isOpen, open, close, provider, isConnected, address } = useWalletConnectModal();
Este hook proporciona acceso para abrir/cerrar el modal de WalletConnect y verifica si está conectado, exponiendo el proveedor con acciones en la blockchain.
Así que agreguemos esto a nuestro 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} />
</>
)
}
Aquí inicializamos el WalletConnectModal con las propiedades
- ProjectID
- ProviderMetaData
Agrega tu ProjectID de la nube y agrega tus propios metadatos.
A continuación, queremos agregar useWalletConnectModal y usar el hook useWalletConnectModal.
import { StyleSheet, Text, View, Pressable } from "react-native";
import {
WalletConnectModal,
useWalletConnectModal,
} from "@walletconnect/modal-react-native";
// Añade el useWalletConnectModal hook
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() {
// Añade el useWalletConnectModal hook + props
const { open, isConnected, address, provider } = useWalletConnectModal();
// Función para manejar el
const handleButtonPress = async () => {
if (isConnected) {
return provider?.disconnect();
}
return open();
};
// Main UI Render
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,
},
});
Su interfaz de usuario debería verse así:
- Te permite conectarte a la billetera (Used Trust Wallet).
- Luego, tu billetera debería pedir una solicitud de conexión.
- Después, serás redirigido a la Dapp de React Native. ***
- ¡Ahora estás conectado!
- Tienes la opción de desconectar.
- ** Nota: No todas las billeteras móviles manejan bien las redirecciones. Esto depende de la billetera que elijas.
Vamos a profundizar en los cambios de código aquí:
1.Importamos useWalletConnectModal.
2.Accedemos a las propiedades y funciones con: open, isConnected, address y provider.
3.Creamos una función handleButtonPress para permitir .open(), que permite la conexión y, si no está conectado, tenemos acceso al proveedor y desconectamos con provider.disconnect(). Para obtener más información sobre proveedores, lee aquí.
4.El resto de la interfaz de usuario en la función de retorno + hoja de estilo se explican por sí mismos en la gestión de la interfaz de usuario de React Native.
Ahora tienes los bloques de construcción fundamentales para comenzar y crear tu primera Dapp móvil en React Native 👐
Para ampliar aún más lo que puedes hacer en el lado de la Dapp, puedes comenzar a explorar:
- ethers.js
- wagmi/viem
Luego, puedes aprender cómo interactuar con la RPC de la blockchain y los contratos inteligentes:
- Firmar / Enviar Mensajes / Transacciones
- Interactuar con Contratos Inteligentes (Leer o Escribir)
Esto lo cubriré en otro artículo de blog o tutorial 🤝
Para aquellos que tengan preguntas sobre este tutorial, por favor contáctame a través de Twitter o abre un problema aquí en nuestro Repositorio/Issues de React Native.
Este artículo es una traducción realizada por @bananlabs. Puedes encontrar el artículo original aquí
Discussion (0)