Add Keplr Chain Documentation

This Library provides a convenient way to add chains to a Keplr wallet. The functionality is provided by using a button exported by the library. It is designed to be used on only React based applications.

Installation

npm install add-keplr-chain

Usage

The button exported from this library is unstlyed but can be replaced with another button or styled completely. The button is used to add a chain to the Keplr wallet. The button takes in a chain object as a prop. The chain object should have the following properties:

Using default button

import KeplrAddChainButton from "add-keplr-chain";

const chainInfo = {
  chainId: "nillion-chain-testnet-1",
  chainName: "Nillion Testnet",
  rpc: "https://testnet-nillion-rpc.lavenderfive.com",
  rest: "https://testnet-nillion-api.lavenderfive.com",
  chainSymbolImageUrl:
    "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/nillion-chain-testnet/nil.png",
  bip44: {
    coinType: 118,
  },
  bech32Config: {
    bech32PrefixAccAddr: "nillion",
    bech32PrefixAccPub: "nillionpub",
    bech32PrefixValAddr: "nillionvaloper",
    bech32PrefixValPub: "nillionvaloperpub",
    bech32PrefixConsAddr: "nillionvalcons",
    bech32PrefixConsPub: "nillionvalconspub",
  },
  currencies: [
    {
      coinDenom: "NIL",
      coinMinimalDenom: "unil",
      coinDecimals: 6,
      coinImageUrl:
        "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/nillion-chain-testnet/nil.png",
    },
  ],
  feeCurrencies: [
    {
      coinDenom: "NIL",
      coinMinimalDenom: "unil",
      coinDecimals: 6,
      coinImageUrl:
        "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/nillion-chain-testnet/nil.png",
      gasPriceStep: {
        low: 0.001,
        average: 0.001,
        high: 0.01,
      },
    },
  ],
  stakeCurrency: {
    coinDenom: "NIL",
    coinMinimalDenom: "unil",
    coinDecimals: 6,
    coinImageUrl:
      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/nillion-chain-testnet/nil.png",
  },
  features: [],
};

<KeplrAddChainButton
  chainInfo={chainInfo}
  buttonText='Add Nillion Testnet'
  loadingText='Adding Chain...'
  buttonClassName='px-6 py-3 text-lg font-semibold text-white bg-blue-600 rounded-full hover:bg-blue-700 active:bg-blue-800 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 mb-4'
/>;

Using custom button

import KeplrAddChainButton from "add-keplr-chain";

<KeplrAddChainButton
  chainInfo={chainInfo}
  buttonText='Add Nillion Testnet'
  loadingText='Adding Chain...'
  renderButton={({ onClick, disabled, isLoading, text }) => (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        padding: "12px 24px",
        fontSize: "16px",
        fontWeight: "bold",
        color: "white",
        backgroundColor: disabled ? "#a0aec0" : "#4a5568",
        border: "none",
        borderRadius: "8px",
        cursor: disabled ? "not-allowed" : "pointer",
        transition: "all 0.3s ease",
        boxShadow:
          "0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: "250px",
        height: "50px",
      }}>
      {isLoading ? (
        <div
          style={{
            width: "20px",
            height: "20px",
            border: "3px solid #ffffff",
            borderTop: "3px solid #4a5568",
            borderRadius: "50%",
            animation: "spin 1s linear infinite",
            marginRight: "10px",
          }}
        />
      ) : (
        <img
          src='https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/nillion-chain-testnet/nil.png'
          alt='Nillion Logo'
          style={{ width: "24px", height: "24px", marginRight: "10px" }}
        />
      )}
      {text}
    </button>
  )}
/>;

Props

| Prop Name | Type | Description | | --------------- | -------- | ---------------------------------------------------------------------- | | chainInfo | object | The chain object that contains the chain information. | | buttonText | string | The text to display on the button. | | loadingText | string | The text to display on the button when the chain is being added. | | renderButton | function | A function that returns a custom button. | | onSuccess | function | A function that is called when the chain is successfully added. | | onError | function | A function that is called when an error occurs while adding the chain. | | buttonStyle | object | The style object to apply to the button. | | buttonClassName | string | The class name to apply to the button. |