@mantrachain/connect

Get Started • Docs • Hongbai

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

or

yarn add @mantrachain/connect

Usage

Under the hood the wraper provider is using wallet connect and so need a projectId. To use Hongbai testnet please use "manchaintestnet" as the chainName Any react hooks from the standard cosmos kit are available if used in a coponent wraped by the <MantraProvider /> wrapper

Quickstart

import React from 'react';
import { MantraProvider, ConnectModalWalletButton } from '@mantrachain/connect';
import '@mantrachain/connect/dist/style/global.css';
import { chakraUiTheme } from './path/to/your/theme/chakra-ui.theme';
import { SendTransactionComponent } from './your/component/path';

const App = () => {
  return (
    <ChakraProvider theme={chakraUiTheme}>
      <MantraProvider chaineName="mantrachaintestnet" projectId="123 ... 456">
        <h1>MANTRA DApp</h1>
        <ConnectModalWalletButton />
        <SendTransactionComponent />
      </MantraProvider>
    </ChakraProvider>
  );
}