@mantrachain/connect

Overview

@mantrachain/connect is a lightweight and flexible integration library for React applications that provides seamless connection to the MANTRA Chain. Built on top of Cosmos Kit from Cosmology, Mantra Connect leverages a robust and well-maintained Cosmos ecosystem library. This ensures compatibility with Cosmos-based chains standards and offers a standardized approach to wallet and chain interactions.

With Mantra Connect, you can easily access all React hooks provided by Cosmos Kit for chain interaction. Once your application is wrapped with the <MantraProvider />, these hooks are available throughout your components, allowing you to interact with the chain effortlessly. Whether you need to connect a wallet, fetch account details, or handle transactions, Mantra Connect streamlines these processes, making it ideal for developers working with Cosmos-based blockchain applications.

Features

Cosmos Kit Integration: Built on top of Cosmos Kit from Cosmology, providing reliable chain interactions and wallet support.
Easy Integration: Connect to the MANTRA Chain effortlessly with the <MantraProvider /> wrapper.
Wallet Support: Built-in support for Leap and Keplr wallets, enabling users to interact with the MANTRA Chain.
React Hooks: Gain access to all Cosmos Kit React hooks for seamless chain interactions across your components.
Lightweight: Designed for flexibility and minimal overhead in your React applications.

Installation

Install the package via npm or yarn:

npm install @mantrachain/connect

yarn add @mantrachain/connect

Usage

MantraProvider is a wrapper that give you easy access to MANTRA Chain. It requires a few configuration options to properly manage connections to either mainnet or testnet, as well as handle mobile wallet connections.

chainName: MantraChain.Mainnet | MantraChain.Testnet | [Your local chain name] A string value to determine which Mantra Chain you connected to.

localOptions?: Optional When provided, this prop overrides the default chains and asset lists imported from the chain registry. This is particularly useful for local development or testing with custom configurations.

customWallets?: Optional By default, Mantra Connect utilizes Keplr, Leap, and Cosmostation as three default wallet configurations. However, you can easily override this behavior by providing your own wallet configurations. will prioritize your custom wallet array over the built‑in defaults.

walletConnectOption: Optional MantraProvider accepts this property as optional in order to handle mobile wallets.

Any react hooks from the standard cosmos-kit are available if used in a coponent wraped by the wrapper

Quickstart

import { MantraProvider, MantraChain } from '@mantrachain/connect';
import customChains from './localChains'; // Your local chain configuration
import customAssets from './localAssets'; // Your local asset configuration

const App = () => {
  return (
    <MantraProvider
      chainName={MantraChain.Mainnet}
      walletConnectOptions={walletConnectOptions}
      customWallets={wallets} 
      localOptions={{
        chains: customChains,
        assets: customAssets,
      }}
    >
      <h1>MANTRA DApp</h1>
    </MantraProvider>
  );
};