es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Llamando a una función desde un contrato inteligente a través de una aplicación (React Js + Android Capacitor)

Llamando a una función desde un contrato inteligente a través de una aplicación (React Js + Android Capacitor)

12 Jul, 2023 Programación

Tengo una aplicación de React Js y he agregado Capacitor Android para convertirla en una aplicación de Android. La aplicación funciona bien, pero ahora quiero agregar una característica que requiere interactuar con un contrato inteligente de Ethereum desplegado. Soy bastante nuevo en el campo, pero a través de la lectura, recopilé que el enfoque habitual para React es usando web3, y para aplicaciones móviles, usan web3j (por favor, corríjame si estoy equivocado).

Pero no sé cómo aplicarlo a mi caso, donde tengo una aplicación de React JS con Capacitor Android, porque hago cambios en las páginas usando React JS, pero quiero que funcione para Android. ¿Cómo puedo llamar a las funciones del contrato inteligente y qué biblioteca debo usar para que funcione en la aplicación final de Android?

(P.D. El objetivo aquí es hacer que funcione solo en la aplicación de Android).

Aquí hay un JavaScript donde llamo a la función de mi contrato inteligente:

const Contract = require('web3-eth-contract')
const Web3 = require('web3')
const Tx = require('ethereumjs-tx').Transaction;

Contract.setProvider('MY-INFURA-WSS');
var web3 = new Web3(new Web3.providers.HttpProvider('MY-INFURA-HTTPS'));
const abi = [mi-abi]

var contract = new Contract(abi, "MY-CONTRACT-ADDRESS");

contract.methods.MyMethod("MY-PARAMETER").call({from: "MY-ADDRESS"}).then((receipt)=>{
    console.log("Receipt: ", receipt);
})

Este script funciona perfectamente, pero cuando lo inserto en mi archivo .js en mi aplicación de React JS y uso capacitor para ejecutarlo en mi dispositivo móvil, resulta en este error:

Error: El proveedor no tiene un método de solicitud o envío para usar.

Creo que es un problema con el proveedor, pero no sé cómo solucionarlo. Entonces no sé si funciona o no porque apareció ese error (ni siquiera pude probar la llamada real al método).

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en TI especializado en Android, ReactJS, contratos inteligentes, capacitor y web3-react, aquí está mi sugerencia:

    Dado que tienes una aplicación ReactJS con capacitor de Android, puedes utilizar la biblioteca web3-react para interactuar con contratos inteligentes de Ethereum. Esta biblioteca está diseñada específicamente para funcionar con ReactJS y proporciona un conjunto de hooks y componentes de React para facilitar la integración con web3 y contratos inteligentes de Ethereum.

    Para instalar la biblioteca de web3-react, ejecuta el siguiente comando en el directorio de tu proyecto:

    npm install web3-react

    A continuación, importa los componentes y hooks necesarios de esta biblioteca:

    import { useWeb3React, Web3ReactProvider } from 'web3-react';
import { Web3Provider } from '@ethersproject/providers';
import { Contract } from '@ethersproject/contracts';

    Luego, crea una función para inicializar tu proveedor de Web3:

    function getLibrary(provider) {
  const library = new Web3Provider(provider);
  library.pollingInterval = 10000;
  return library;
}

    Ahora, envuelve tu aplicación con Web3ReactProvider y utiliza el hook useWeb3React para acceder al contexto de Web3:

    function App() {
  const { active, error, account, library } = useWeb3React();

  console.log(active); // true si está conectado al proveedor de web3
  console.log(error); // cualquier error
  console.log(account); // dirección de cuenta actual
  console.log(library); // instancia de la biblioteca ethers.js

  return (
    <div>
      {/* tus componentes de la aplicación aquí */}
    </div>
  );
}

ReactDOM.render(
  <web3reactprovider getlibrary="{getLibrary}">
    <app></app>
  </web3reactprovider>,
  document.getElementById('root'),
);

    Finalmente, utiliza la clase Contract de ethers.js para interactuar con tu contrato inteligente:

    const abi = [tu-abi];
const contractAddress = 'TU-DIRECCION-DE-CONTRATO';
const contract = new Contract(contractAddress, abi, library.getSigner());

async function callMyMethod(parameter) {
  const result = await contract.myMethod(parameter);
  console.log(result);
}

    Ten en cuenta que debes reemplazar tu-abi, TU-DIRECCION-DE-CONTRATO, myMethod y parameter con tus valores reales.

    ¡Espero que esto te ayude! Avísame si tienes alguna pregunta.

Comments are closed.