Skip to main content

Keplr integration with Celestia

Keplr is a popular Cosmos-based wallet that allows anyone to connect to Tendermint chains from their browser.

You can learn more about installing Keplr here.

In this tutorial, we will have an interactive demo that goes over how you can add Celestia network parameters to Keplr.

Most of the overview of integration are found on Keplr's website here.

For our demonstration, we converted the Keplr code on their docs to React components in order to demonstrate how you can add a Celestia network to Keplr from inside the docs.

Add Celestia network to Keplr​

Before we demonstrate how to export the specific parameters for Celestia's testnets, we need to create a ReactJS component that allows us to connect directly to Keplr and pass it the network params.

In the following code, we show how you can export a component that detects whether Keplr is installed and sets the network params for it:

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.025,
                                                    high: 0.04,
                                            },
                                    },
                            ],
                            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>
  )
}

This example is just for using Celestia configs.

We still need to pass the Celestia network params for it.

We can do it for both testnets in the following section.

You can also test out the Connect button to add those params to your Keplr wallet. NOTE: You must have Keplr installed first.

Here is a demo button that allows you to add the blockspace race testnet to Keplr.

Try it out:

Behind the scenes, here are the params we are passing to the AddNetworkKeplr function:

import '@site/src/components/AddNetworkKeplr'

export const BLOCKSPACERACE_PARAMS = {
  chainId: 'blockspacerace',
  chainName: 'Blockspace Race Testnet',
  rpc: 'https://rpc-blockspacerace.pops.one',
  rest: 'https://api-blockspacerace.pops.one'
}

<AddNetworkKeplr params={BLOCKSPACERACE_PARAMS}/>