open-index/open-npm huggingface dataset:
npm package: @leapwallet/connect-kit-react
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 1.0.4

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
```
npm package: @leapwallet/cosmos-social-login-capsule-provider-ui
Description: ## Overview
Latest version: 0.0.59

# Custom Capsule ModalView

## Overview

The `CustomCapsuleModalView` component is a customizable modal view for integrating the Capsule authentication and wallet creation flow into your React application. This component incorporates various steps such as email verification, biometric verification, and wallet creation.

## Installation

To use the `CustomCapsuleModalView` component in your project, you need to install the required dependencies. Run the following command:

```bash
npm install @leapwallet/cosmos-social-login-provider-ui @leapwallet/cosmos-social-login-capsule-provider
```

## Usage

### Importing the Component

```javascript
import CustomCapsuleModalView, {
  lightTheme,
  defaultTheme,
} from "@leapwallet/cosmos-social-login-provider-ui";
```

### Rendering the Component

```javascript
<CustomCapsuleModalView
  capsule={capsuleInstance}
  showCapsuleModal={showModal}
  setShowCapsuleModal={setShowModal}
  onAfterLoginSuccessful={handleAfterLogin}
  onLoginFailure={handleLoginFailure}
  theme="light" // Optional: Specify 'light' or 'dark' theme
/>
```

- `capsule`: An instance of the Capsule object.
- `showCapsuleModal`: A boolean indicating whether to show the Capsule modal.
- `setShowCapsuleModal`: A function to control the visibility of the Capsule modal.
- `onAfterLoginSuccessful`: A callback function to execute after successful login.
- `onLoginFailure`: A callback function to handle login failure.
- `theme`: (Optional) Specify the theme for the modal ('light' or 'dark').

## Theming

The component supports light and dark themes, which can be specified using the `theme` prop. The default theme is dark, and the `lightTheme` and `defaultTheme` themes are provided for customization.

## Example

```javascript
import CustomCapsuleModalView from "@leapwallet/cosmos-social-login-provider-ui";
import { CapsuleProvider } from "@leapwallet/cosmos-social-login-capsule-provider";

const MyComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const capsuleInstance = new Capsule(); // Replace with your Capsule instance

  const handleAfterLogin = () => {
    // Handle actions after successful login
  };

  const handleLoginFailure = () => {
    // Handle actions on login failure
  };

  return (
    <CustomCapsuleModalView
      capsule={capsuleProvider?.getClient()}
      showCapsuleModal={showModal}
      setShowCapsuleModal={setShowModal}
      onAfterLoginSuccessful={handleAfterLogin}
      onLoginFailure={handleLoginFailure}
    />
  );
};
```
npm package: @leapwallet/elements
Description: ## How to use
Latest version: 1.10.1

# Leap Elements SDK

## How to use

### Install

```bash
npm install @leapwallet/elements
```

### Usage

```jsx
import { Swaps, ElementsProvider } from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'

import { useElementsWalletConfig } from './wallet-client-config'

const YourDapp = () => {
  return (
    <div className="leap-ui">
      <ElementsProvider
        primaryChainId="cosmoshub-4"
        connectWallet={connectWallet}
        connectedWalletType={walletType}
      >
        <LiquidityView />
      </ElementsProvider>
    </div>
  )
}
```

### Documentation

[Developer Docs](https://docs.leapwallet.io/elements-v1/)

[TypeDocs](https://leapwallet.github.io/elements/)

## Development

### Install

```bash
yarn install
```

### Run Development Builds

Run the following two commands in the project root:

```bash
yarn dev
```

Go to http://localhost:5173/ to see the development page.
npm package: @leapwallet/elements-core
Description: Core package for Leap Elements SDK. This has methods and APIs that are used in `@leapwallet/elements-hooks` and `@leapwallet/elements` packages.
Latest version: 1.10.1

# Leap Elements Core

Core package for Leap Elements SDK. This has methods and APIs that are used in `@leapwallet/elements-hooks` and `@leapwallet/elements` packages.

## How to use

### Install

```bash
npm install @leapwallet/elements-core
```

### Import

```javascript
import { getChains } from '@leapwallet/elements-core'

const main = async () => {
  const chains = await getChains()
  console.log(chains)
}
```

### APIs

We have implemented wrappers for the following APIs:

- Squid API
- Kado API
- CoinGecko API
npm package: @leapwallet/elements-hooks
Description: React hooks package for Leap Elements SDK. This has hooks used in `@leapwallet/elements` package.
Latest version: 1.10.1

# Leap Elements Hooks

React hooks package for Leap Elements SDK. This has hooks used in `@leapwallet/elements` package.

## How to use

### Install

```bash
npm install @leapwallet/elements-hooks
```

### Import

```javascript
import { usePollForTxn } from '@leapwallet/elements-hooks'

const TxnStatusToast = ({ txHash, chainId }) => {
  // get the rest url for the chain
  const restUrl = useChainRestUrl(chainId)

  const { tx, isPolling, error } = usePollForTxn(
    // transaction hash
    txHash,
    // rest url to fetch the transaction status
    restUrl,
    // poll interval in milliseconds
    5 * 1000,
    // polling timeout in milliseconds
    2 * 60 * 100
  )

  // rest of the component
}
```
npm package: @leapwallet/elements-umd-types
Description: This package contains the types for the Leap Elements library UMD build.
Latest version: 1.10.1

# Leap Elements UMD Types

This package contains the types for the Leap Elements library UMD build.

## How to use

### Install

```bash
npm install @leapwallet/elements-umd-types
```

### Import

```javascript
import { BRIDGES } from '@leapwallet/elements-umd-types'
```
npm package: @leapwallet/embedded-wallet-sdk-react
Description: A react library for integrating metamask snaps on a cosmos dApp
Latest version: 2.1.1

# Leap Snaps SDK React

## Installation

```bash
npm install @leapwallet/embedded-wallet-sdk-react
```

## Usage

### Get Started

```tsx
import React from "react";
import { useChain } from "@cosmos-kit/react";
import { AccountModal } from "@leapwallet/embedded-wallet-sdk-react";

const chainId = "osmosis-1";
const chain = "osmosis";
const restUrl = "https://rest.cosmos.directory/osmosis";

const YourApp = () => {
  const { address } = useChain(chain);
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    <div>
      {/* other components */}
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <AccountModal
        theme="dark"
        chainId={chainId}
        restUrl={restUrl}
        address={address}
        isOpen={isModalOpen}
        onClose={closeModal}
      />
      {/* other components */}
    </div>
  );
};
```

#### Props

| Name      | Type                                   | Description                                |
| :-------- | :------------------------------------- | :----------------------------------------- |
| `theme`   | `"light" \| "dark" \| ThemeDefinition` | Theme of the modal                         |
| `chainId` | `string`                               | Chain ID of the chain                      |
| `restUrl` | `string`                               | REST URL of the chain                      |
| `address` | `string`                               | Address of the user                        |
| `isOpen`  | `boolean`                              | Whether the modal is open                  |
| `onClose` | `() => void`                           | Callback function when the modal is closed |
| `config`  | `Config`                               | Config of the modal                        |

Here is the type definition of `Config`:

```ts
type Config = {
  // This function is called to render the title of the modal
  title?: (page: Page) => React.ReactNode;
  // This function is called to render the sub-title of the modal
  subTitle?: (page: Page) => React.ReactNode;
  // Should the modal be closed when the backdrop is clicked
  closeOnBackdropClick?: boolean;
  // Should the modal be closed when the escape key is pressed
  closeOnEscape?: boolean;
  // Configure the action list on the home page
  actionListConfig?: ActionListConfig;
};

type ActionListConfig = Record<
  string,
  {
    label?: string;
    onClick?: (chainId: string) => void;
    enabled?: boolean;
  }
>;

enum Page {
  HOME = "home",
  ACTIVITY = "activity",
}
```

#### Example Configuration

```tsx
const config: Config = {
  title: (page) => {
    switch (page) {
      case Page.HOME:
        return "Assets";
      case Page.ACTIVITY:
        return "Activity";
    }
  },
  closeOnBackdropClick: true,
  closeOnEscape: true,
  actionListConfig: {
    [Actions.Swap]: {
      label: "Swap",
      onClick: (chainId) => {
        console.log(chainId);
      },
      enabled: true,
    },
    [Actions.Bridge]: {
      enabled: false,
    },
  },
};
```
npm package: @leapwallet/leap-keychain
Description: A javascript library for crypto key management
Author: Leap Wallet
Latest version: 0.3.8

# Leap Keychain

leap-keychain library includes modules for key management, account creation, and transaction signing for cosmos blockchains.

- Platforms: Browsers supporting ES6 or higher
- Module systems: ECMAScript Modules
- Programming languages: ES6 (JavaScript, TypeScript, etc. which target ES6 or higher)
- Static types: TypeScript definitions bundled

## Installation

Use one of the following methods:

- npm:
  ```shell
  npm i @leapwallet/leap-keychain
  ```
- Yarn:
  ```shell
  yarn add @leapwallet/leap-keychain
  ```

## Usage

Initialize storage and crypto modules in the top level file index.js or app.js

```javascript
import { initStorage, initCrypto } from '@leapwallet/leap-keychain';
// create a storage object
initStorage({
  set: (key, value) => {
    localStorage.setItem(key, value);
    return Promise.resolve();
  },
  get: (key) => {
    const value = localStorage.getItem(key);
    return Promise.resolve(storageObj[key]);
  },
  remove: (key) => {
    localStorage.removeItem(key);
    return Promise.resolve();
  },
});

// initialize crypto modules
initCrypto();
```

To use the keychain

```javascript

  import { KeyChain } from '@leapwallet/leap-keychain'

  // create wallet using mnemonic

  KeyChain.createWalletUsingMnemonic({
    mnemonic: "12/24 word mnemonic",
    name: "wallet name";
    password: "encryption password";
    addressIndex: "address index";
    colorIndex: "0";
    chainInfos: {
      //The 'chain infos' object includes the address prefix and coin type for the chains for which wallet creation is required.
      cosmos: {
        addressPrefix: 'cosmos',
        coinType: '118',
        key: 'cosmos'
      }
    };
  })


```

## [Security](SECURITY.md)

## [Contributing](CONTRIBUTING.md)
npm package: @leapwallet/leap-keychain-rn
Description: Key management library for react native apps
Author: @leapwallet
Latest version: 0.1.6

# react-native-leap-keychain-rn

Key management library for react native apps

## Installation

Use one of the following methods:

- npm:
  ```shell
  npm i @leapwallet/leap-keychain-rn
  ```
- Yarn:
  ```shell
  yarn add @leapwallet/leap-keychain-rn
  ```
  
## Usage

```javascript

  import { KeyChain } from '@leapwallet/leap-keychain-rn'

  // create wallet using mnemonic

  KeyChain.createWalletUsingMnemonic({
    mnemonic: "12/24 word mnemonic",
    name: "wallet name";
    password: "encryption password";
    addressIndex: "address index";
    colorIndex: "0";
    chainInfos: {
      //The 'chain infos' object includes the address prefix and coin type for the chains for which wallet creation is required.
      cosmos: {
        addressPrefix: 'cosmos',
        coinType: '118',
        key: 'cosmos'
      }
    };
  })
  

```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @leapwallet/name-matcha
Description: Name Matcha is a javascript library for resolving names to wallet addresses in the cosmos universe.
Author: Leap Wallet
Latest version: 2.1.1

# 🍵 name-matcha

**Name Matcha** (*Matcha* - 抹茶; Meaning - 'ground and powdered green tea'; Emoji - 🍵) - a pun on **name-matcher**.

A developer-friendly javascript library that provides a standardized way to easily resolve Cosmos ecosystem name services to wallet addresses (and vice-versa) using just one line of code. 

## Installation

```bash
npm install @leapwallet/name-matcha
```

## Usage

Here's how you can quickly get started with resolving names -

```js
import nameMatcha, { services } from '@leapwallet/name-matcha';

const address = await nameMatcha.resolve('alice.stars', service.stargazeNames);
```

To know more about the library, check out the [Docs](https://leapwallet.github.io/name-matcha/).

## Name Service Support

We support the following name services -

1. [ICNS](https://www.icns.xyz)
2. [Stargaze Names](https://www.stargaze.zone/names)
3. [IBC Domains](https://ibc.domains)
4. [ArchId](https://archid.app)
5. [SpaceId](https://space.id)
6. [SNS](https://www.sns.id)
7. [DegeNS](https://www.degens.domains)
8. [Bidds Decentralized Domains](https://bidds.com)

We also allow you to add your own name service for custom use-cases. You can look at the docs for the same [here](https://leapwallet.github.io/name-matcha/docs/advanced#custom-name-services).
npm package: @leapwallet/parser-parfait
Description: Transaction parser library for cosmos blockchain
Author: Leap Wallet
Latest version: 0.7.1

![Parser Parfait - Transaction parser for Cosmos](https://user-images.githubusercontent.com/114133109/223982190-c939a9a5-a076-4fda-88c0-e0a48972661e.png)

# What is Parser Parfait?

Parser Parfait is a transaction parser library for the cosmos blockchain. It is written in typescript and can be used in both nodejs and browser environments. We maintain the parsing logic and do the heavy lifting so you can focus on building your application.

## Why use Parser Parfait?

Parser Parfait is a library that is designed to be used in a variety of applications. It is not tied to any specific framework or application. It is designed to be used in any application that needs to parse transactions from the cosmos blockchain.

## Where can I use Parser Parfait?

1. **Show Activity Feed** - Show a transaction activity feed to users.
2. **Transaction Signing Page** - Show human readable content to users before signing a transaction.
3. **Notifications** - Parse txs from the blockchain and notify users of new transactions.
4. Any other use-case that requires parsing transactions/messages from the blockchain.

## What can I build using Parser Parfait?

1. **Block Explorer**
2. **Wallet**
3. **DeFi App**

## Publishing to GitHub Packages

1. Update the version in `package.json`
2. Make a commit with the commit message same as the version
3. Add a git tag with the version (optional)
4. Push to main
5. Create a GitHub release with the latest tag
6. This will trigger a workflow run where the package will be published to NPM

### Example

Say you want to publish version `1.0.0`

1. Update the version in `package.json` to `1.0.0`
2. Make the following commit
   ```bash
    git commit -m "v1.0.0"
   ```
3. Add a git tag with the version (optional)
   ```bash
    git tag v1.0.0
   ```
4. Push to main
   ```bash
    git push origin main
   ```
5. Create a GitHub release with new sematic version tag - `v1.0.0`
6. Workflow run will be triggered and the package with the specified version will be published to NPM