Integraciones de billeteras con Celestia

Esta página cubre cómo los desarrolladores pueden usar Keplr y React para agregar parámetros de red de Celestia a las billeteras, y cómo agregar redes personalizadas a Leap y Cosmostation.

Añadir los parámetros de red de Celestia a Keplr con React​

Antes de mostrar cómo exportar los parámetros específicos para las redes de prueba de Celestia, necesitamos crear un componente ReactJS que nos permite conectarnos directamente a Keplr y pasarle los parámetros de red.

En el siguiente código, mostramos cómo puedo exportar un componente que detecta si Keplr está instalado y establece los parámetros de red para él:

Keplrjsx

// @site/src/components/AddNetworkKeplr.js
import React from "react";
import styles from "./Keplr.module.css";

export default function AddNetworkKeplr({ params }) {
  async function add() {
    if (!window.keplr) {
      alert("Please install keplr extension");
    } else {
      if (window.keplr.experimentalSuggestChain) {
        try {
          await window.keplr.experimentalSuggestChain({
            chainId: params.chainId,
            chainName: params.chainName,
            rpc: params.rpc,
            rest: params.rest,
            bip44: {
              coinType: 118,
            },
            bech32Config: {
              bech32PrefixAccAddr: "celestia",
              bech32PrefixAccPub: "celestia" + "pub",
              bech32PrefixValAddr: "celestia" + "valoper",
              bech32PrefixValPub: "celestia" + "valoperpub",
              bech32PrefixConsAddr: "celestia" + "valcons",
              bech32PrefixConsPub: "celestia" + "valconspub",
            },
            currencies: [
              {
                coinDenom: "TIA",
                coinMinimalDenom: "utia",
                coinDecimals: 6,
                coinGeckoId: "celestia",
              },
            ],
            feeCurrencies: [
              {
                coinDenom: "TIA",
                coinMinimalDenom: "utia",
                coinDecimals: 6,
                coinGeckoId: "celestia",
                gasPriceStep: {
                  low: 0.01,
                  average: 0.02,
                  high: 0.1,
                },
              },
            ],
            stakeCurrency: {
              coinDenom: "TIA",
              coinMinimalDenom: "utia",
              coinDecimals: 6,
              coinGeckoId: "celestia",
            },
          });
        } catch {
          alert("Failed to suggest the chain");
        }
      }
      const chainId = params.chainId;
      // Enabling before using the Keplr is recommended.
      // This method will ask the user whether to allow access if they haven't visited this website.
      // Also, it will request that the user unlock the wallet if the wallet is locked.
      await window.keplr.enable(chainId);
    }
  }

  return (
    <div className={styles.center}>
      <button className={styles.keplrButton} onClick={add}>
        Add/switch To {params.chainName}
      </button>
    </div>
  );
}

Todavía tenemos que pasar los parámetros de la red Celestia a la AddNetworkKeplr función:

Mainnet Beta
import '@site/src/components/AddNetworkKeplr'

export const MAINNET_PARAMS = {`{
  chainId: 'celestia',
  chainName: 'Celestia',
  rpc: 'https://rpc.lunaroasis.net/',
  rest: 'https://api.lunaroasis.net/'
}`}

{<AddNetworkKeplr params={MAINNET_PARAMS}/>}

Mocha
import '@site/src/components/AddNetworkKeplr'

export const MOCHA_PARAMS = {`{
  chainId: 'mocha-4',
  chainName: 'Mocha testnet',
  rpc: 'https://rpc-mocha.pops.one/',
  rest: 'https://api-mocha.pops.one/'
}`}

{<AddNetworkKeplr params={MOCHA_PARAMS}/>}

Árabe
import '@site/src/components/AddNetworkKeplr'

export const ARABICA_PARAMS = {`{
  chainId: 'arabica-11',
  chainName: 'Arabica devnet',
  rpc: 'https://rpc.celestia-arabica-11.com/',
  rest: 'https://api.celestia-arabica-11.com'
}`}

{<AddNetworkKeplr params={ARABICA_PARAMS}/>}

Ahora, podemos conectarnos a la red que le gustaría usar en la billetera Keplr.

Agregar una cadena personalizada a Leap​

Si desea agregar una cadena personalizada a Leap, puede hacerlo mediante:

1. Al hacer clic en el logotipo de Cosmos en la esquina superior de la billetera Leap

2. Desplazarse hacia abajo y hacer clic en "Agregar nueva cadena"

Luego puede agregar los siguientes parámetros:

• Id. De cadena: arabica-11

• Nombre de cadena: Arabica devnet

• Nueva URL RPC: https://rpc.celestia-arabica-11.com/

• Nueva URL REST: https://api.celestia-arabica-11.com

• Prefijo de dirección: celestia

• Denoma nativa: utia

• Tipo de moneda: 118

• Decimales: 6

• URL del explorador de bloques (opcional ): https://explorer.celestia-arabica-10.com

Ahora haz clic Add chain y podrá ver el saldo y las transacciones de su cuenta Arábica en la billetera de salto.

Verás que está conectado a Arábica Devnet.

Agregar una cadena personalizada a Cosmostation​

Haga clic en el icono del menú de hamburguesas en la esquina superior de la billetera Cosmostation. Desplácese hacia abajo y hace clic en "Agregar cadena personalizada"

Luego puede agregar los siguientes parámetros:

• Nombre de cadena personalizado: Mocha testnet

• URL de descanso: https://api-mocha.pops.one

• Nueva URL RPC: https://rpc-mocha.pops.one

• Símbolo de moneda: TIA

• Prefijo de dirección: celestia

• Denoma: utia

• Imagen de símbolo URL (opcional ): https://raw.githubusercontent.com/cosmos/chain-registry/master/testnets/celestiatestnet/images/celestia.svg

• URL del explorador (opcional ): https://testnet.mintscan.io/celestia-testnet

• Tipo de moneda: 118

• Decimales: 6

• Velocidad del gas Diminuto: 0.1

• Velocidad de gas baja: 0.25

• Tasa de gas Promedio: 0.5

Ahora, haga clic Add a custom chain y poder ver el saldo y las transacciones de su cuenta de Celestia en la billetera Cosmostation.

¡Cambie las cadenas a "Mocha testnet" y verá que está conectado a Mocha testnet de Celestia!