Construir el frontend de la dApp

Para construir interfaces web, necesitarás el arch3.js npm package para conectar tu página web a la Red Archway.

Conexión con Archway

Necesitaremos que nuestra dapp se conecte a los monederos de los usuarios con una extensión de navegador como Keplr.

Tras instalar la extensión, observará que Keplr se expone a las páginas web como una propiedad del objeto ventana de JavaScript.

Keplr también necesita metadatos específicos sobre la cadena a la que se está conectando. A continuación se indican los parámetros necesarios para establecer una conexión con la red de prueba Constantine de Archway.

const ChainInfo = {
  chainId: 'constantine-3',
  chainName: 'Constantine Testnet',
  rpc: 'https://rpc.constantine.archway.tech',
  rest: 'https://api.constantine.archway.tech',
  stakeCurrency: { coinDenom: 'CONST', coinMinimalDenom: 'aconst', coinDecimals: 18 },
  bip44: { coinType: 118 },
  bech32Config: {
    bech32PrefixAccAddr: 'archway',
    bech32PrefixAccPub: 'archwaypub',
    bech32PrefixValAddr: 'archwayvaloper',
    bech32PrefixValPub: 'archwayvaloperpub',
    bech32PrefixConsAddr: 'archwayvalcons',
    bech32PrefixConsPub: 'archwayvalconspub',
  },
  currencies: [{ coinDenom: 'CONST', coinMinimalDenom: 'aconst', coinDecimals: 18 }],
  feeCurrencies: [{ coinDenom: 'CONST', coinMinimalDenom: 'aconst', coinDecimals: 18 }],
  coinType: 118,
  gasPriceStep: { low: 0, average: 0.1, high: 0.2 },
  features: ['cosmwasm'],
};

Ahora podemos utilizar ChainInfo para configurar Keplr para Constantine testnet.

import { SigningArchwayClient } from '@archwayhq/arch3.js';
let accounts, CosmWasmClient, queryHandler;
async function connectKeplrWallet() {
  if (window['keplr']) {
    if (window.keplr['experimentalSuggestChain']) {
      await window.keplr.experimentalSuggestChain();
      await window.keplr.enable(ChainInfo.chainId);
      window.keplr.defaultOptions = {
        sign: {
          preferNoSetFee: true,
        }
      }
      const offlineSigner = await window.getOfflineSignerAuto(ChainInfo.chainId);
      CosmWasmClient = await SigningArchwayClient.connectWithSigner(ChainInfo.rpc, offlineSigner);
      // This async waits for the user to authorize your dapp
      // it returns their account address only after permissions
      // to read that address are granted
      accounts = await this.offlineSigner.getAccounts();
      // A less verbose reference to handle our queries
      queryHandler = CosmWasmClient.queryContractSmart;
      console.log('Wallet connected', {
        offlineSigner: offlineSigner,
        CosmWasmClient: CosmWasmClient,
        accounts: accounts,
        chain: ChainInfo,
        queryHandler: queryHandler,
      });
    } else {
      console.warn('Error accessing experimental features, please update Keplr');
    }
  } else {
    console.warn('Error accessing Keplr, please install Keplr');
  }
}

Información

Una cosa a tener en cuenta es que, por defecto, Keplr anula las tarifas establecidas por el frontend. Para evitar que Keplr anule estas tarifas, establezca el valor de la opción interactiva preferNoSetFee en true, como se muestra en el ejemplo anterior. Puede encontrar más información sobre estas opciones de anulación aquí.

Consultando el contador

En el paso anterior guardamos una referencia a CosmWasmClient.queryContractSmart. La utilizaremos para consultar nuestro punto de entrada QueryMsg::GetCount del contrato Increment.

Al igual que cuando consultamos desde CLI, necesitamos convertir los argumentos de entrada a minúsculas y mayúsculas. En JavaScript los argumentos se convierten en {get_count: {}}.

const getCount = async () => {
  // Your contract address
  const ContractAddress = process.env.CONTRACT_ADDRESS;
  // Query arguments
  let entrypoint = {
    get_count: {}
  };
  // Do query type 'smart'
  let queryResult = await queryHandler.query(ContractAddress, entrypoint);
  console.log('GetCount Query', queryResult);
},

Incrementar el contador

Para emitir transacciones llamamos a la función execute usando nuestra referencia anterior CosmWasmClient. Llamamos a esta función con los siguientes parámetros:

1. userAddress - la dirección que emite la transacción

2. ContractAddress - la dirección del contrato con el que el usuario está realizando una transacción.

3. entrypoint - argumentos a ejecutar que coinciden con un punto de entrada en el contrato

4. Fee - con arch3.js las tasas de transacción se pueden calcular automáticamente usando "auto".

Convertimos las mayúsculas y minúsculas de los argumentos del punto de entrada y las volvemos a repetir, de modo que ExecuteMsg::Increment {} de nuestro contrato Rust se convierte en {increment: {}} en nuestro JavaScript.

const incrementCounter = async () => {
  // Your contract address
  const ContractAddress = process.env.CONTRACT_ADDRESS;
  // Tx arguments
  let entrypoint = {
    increment: {},
  };
  // Send Tx
  let tx = await CosmWasmClient.execute(userAddress, ContractAddress, entrypoint, 'auto');
  console.log('Increment Tx', tx);
};

Clonalo y prueba tu mismo!

En el repositorio de ejemplos de dapp encontrarás ejemplos de dapp frontends para la plantilla de código Increment starter.

Optimizacion de la funcionalidad de la Dapp con indexadores

Después de completar esta guía, integre SubQuery para una recuperación de datos eficiente y una funcionalidad mejorada. Este indexador de blockchain va más allá de los datos históricos, permitiendo consultas rápidas, soportando contratos inteligentes y proporcionando datos en tiempo real para aplicaciones. Mejore las experiencias de usuario y libere todo el potencial de su dapp en diversos casos de uso aprovechando estos potentes indexadores.