New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →

Book a Demo Sign in

react-keplr

Package Overview

Advanced tools

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

npm

Version: 1.0.12

Version published: 3 years ago

Maintainers: 1

Created: 3 years ago

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

FAQs

What is react-keplr?

Is react-keplr well maintained?

Package last updated on 01 Jun 2023

Did you know?

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

react-keplr

react-keplr

Installation

Basic Usage

chain-info.json example

Contributing

License

Keywords

Related posts

Socket Selected for OpenAI's Cybersecurity Grant Program

Feross on the 10 Minutes or Less Podcast: Nobody Reads the Code