New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

react-keplr

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-keplr

A package that provides integration between React and Keplr Wallet for blockchain connection. With this package, you can easily connect to Keplr Wallet and perform basic functions such as sending signed transactions and querying the blockchain. The packag

latest
Source
npmnpm
Version
1.0.12
Version published
Maintainers
1
Created
Source

react-keplr

This project provides integration between React and Keplr Wallet for blockchain connection. With this project, you can use Keplr Wallet across all dapp components and perform basic functions such as sending signed transactions and querying the blockchain.

A git repository is an early alpha version, which means that it is still in its experimental stages and may contain bugs or issues that have not yet been addressed.Please use with caution.

Installation

To install this project, simply run:

npm install react-keplr

Basic Usage

To use the Keplr Wallet in your dApp, wrap your app with the SigningCosmWasmProvider component. This will give you access to custom hooks that allow you to call the wallet and execute transactions in any space.

import { SigningCosmWasmProvider } from "react-keplr";
import chainInfo from "../chain.info";

export default function App(props: Properties) {
  const { Component, pageProps } = props;

  return (
    <SigningCosmWasmProvider networkConfig={chainInfo}>
      <Head>
        <title>NFText</title>
      </Head>
      <Component {...pageProps} />
    </SigningCosmWasmProvider>
  );
}

Here are the available hooks:

  • useWalletAddress: Returns the current wallet address.
  • useClient: Returns the current client.
  • useSigningClient: Returns the current signing client.
  • useLoading: Returns a boolean indicating whether a request is loading.
  • useError: Returns any errors that occurred during a request.
  • useConnectWallet: Connects the wallet to the app.
  • useDisconnect: Disconnects the wallet from the app.

Here's an example of how to use these hooks:

import { KeplrProvider, useWalletAddress, useSigningClient } from 'react-keplr';

...
const { connectWallet, signingClient } = useSigningClient();

  useEffect(() => {
    connectWallet();
  }, []);

  ...
  import { calculateFee } from "@cosmjs/stargate";  // TODO: integrate into library + config
  function handleMinting() {
    signingClient
      ?.execute(
        walletAddress,
        cw721Address,
        {
          mint: {
            token_id: token_id.toString(),
            owner: `${walletAddress}`,
            token_uri: `data:application/json;base64, ${encodedMetadata}`,
          },
        },
        calculateFee(600_000, "20uconst")
      )
      .then((response: any) => {
        dappState.setOff();
        alert("Successfully minted!");
      })
  }

chain-info.json example

// https://docs.keplr.app/api/suggest-chain.html

const DENOM_MINI = process.env.NEXT_PUBLIC_STAKING_DENOM;
const DENOM = DENOM_MINI?.substring(1).toUpperCase();
const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID;
const CHAIN_NAME = process.env.NEXT_PUBLIC_CHAIN_NAME;
const RPC = process.env.NEXT_PUBLIC_CHAIN_RPC_ENDPOINT;
const REST = process.env.NEXT_PUBLIC_CHAIN_REST_ENDPOINT;
const BECH32 = process.env.NEXT_PUBLIC_CHAIN_BECH32_PREFIX;
const NEXT_PUBLIC_FAUCET = process.env.NEXT_PUBLIC_FAUCET;

const chainInfo = {
  chainId: CHAIN_ID,
  chainName: CHAIN_NAME,
  rpc: RPC,
  rest: REST,
  stakeCurrency: {
    coinDenom: DENOM,
    coinMinimalDenom: DENOM_MINI,
    coinDecimals: 6,
  },
  bip44: {
    coinType: 118,
  },
  bech32Config: {
    bech32PrefixAccAddr: BECH32,
    bech32PrefixAccPub: `${BECH32}pub`,
    bech32PrefixValAddr: `${BECH32}valoper`,
    bech32PrefixValPub: `${BECH32}valoperpub`,
    bech32PrefixConsAddr: `${BECH32}valcons`,
    bech32PrefixConsPub: `${BECH32}valconspub`,
  },
  currencies: [
    {
      coinDenom: DENOM,
      coinMinimalDenom: DENOM_MINI,
      coinDecimals: 6,
      // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
      // coinGeckoId: ""
    },
  ],
  feeCurrencies: [
    {
      coinDenom: DENOM,
      coinMinimalDenom: DENOM_MINI,
      coinDecimals: 6,
    },
  ],
  coinType: 118,
  gasPriceStep: {
    low: 0,
    average: 0.1,
    high: 0.2,
  },
  faucets: [NEXT_PUBLIC_FAUCET],
  features: ["cosmwasm"],
};

export default chainInfo;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Keywords

react
keplr
wallet
blockchain

FAQs

Package last updated on 01 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign

Security News

Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign

Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.

By Sarah Gooding  -  Apr 03, 2026