open-index/open-npm huggingface dataset:
npm package: @honeybadger-io/core
Description: JavaScript error notifier for Honeybadger.io
Author: Joshua Wood
Latest version: 6.7.2

# Honeybadger for JavaScript - core package

![Node CI](https://github.com/honeybadger-io/honeybadger-js/workflows/Node%20CI/badge.svg)
[![npm version](https://badge.fury.io/js/%40honeybadger-io%2Fcore.svg)](https://badge.fury.io/js/%40honeybadger-io%2Fcore)
[![npm dm](https://img.shields.io/npm/dm/@honeybadger-io/core)](https://www.npmjs.com/package/@honeybadger-io/core)
[![npm dt](https://img.shields.io/npm/dt/@honeybadger-io/core)](https://www.npmjs.com/package/@honeybadger-io/core)

Universal JavaScript library for integrating apps with the :zap: [Honeybadger Error Notifier](http://honeybadger.io).

## Usage

You shouldn't need to use this package directly. This package serves as the core implementation of a Honeybadger client
for our packages written in JavaScript.

## Development

Everything is written in Typescript and transpiled to es6 (see `tsconfig.base.json`) with `npm run build`.
Other packages are responsible to bundle for different browsers/environments/frameworks.

Run tests with `npm test`.

## License

This package is MIT licensed. See the [MIT-LICENSE](./MIT-LICENSE) file in this folder for details.
npm package: @honeybadger-io/gatsby-plugin-honeybadger
Description: Gatsby plugin to add Honeybadger error tracking to your site.
Latest version: 6.0.42

# @honeybadger-io/gatsby-plugin-honeybadger

![Node CI](https://github.com/honeybadger-io/honeybadger-js/workflows/Node%20CI/badge.svg)
[![npm version](https://badge.fury.io/js/%40honeybadger-io%2Fgatsby-plugin-honeybadger.svg)](https://badge.fury.io/js/%40honeybadger-io%2Fgatsby-plugin-honeybadger)
[![npm dm](https://img.shields.io/npm/dm/@honeybadger-io/gatsby-plugin-honeybadger)](https://www.npmjs.com/package/@honeybadger-io/gatsby-plugin-honeybadger)
[![npm dt](https://img.shields.io/npm/dt/@honeybadger-io/gatsby-plugin-honeybadger)](https://www.npmjs.com/package/@honeybadger-io/gatsby-plugin-honeybadger)

Gatsby plugin to add [Honeybadger error tracking](https://www.honeybadger.io/for/javascript/?utm_source=github&utm_medium=readme&utm_campaign=gatsby&utm_content=Honeybadger+error+tracking) to your site.

## Install

`npm install --save @honeybadger-io/gatsby-plugin-honeybadger`

## How to use

Add your API key in the plugin options in `gatsby-config.js`:

```js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@honeybadger-io/gatsby-plugin-honeybadger`,
      options: {
        apiKey: 'YOUR_API_KEY',
        revision: `${Date.now()}`,
        assetsUrl: 'https://foobar.com/assets',
        environment: process.env.NODE_ENV
      }
    }
  ]
}
```

### Options

- `[apiKey]` _(String)_: the API key of your Honeybadger project.
- `[revision]` _(String)_: `gatsby-plugin-honeybadger` uses [`honeybadger-webpack`](https://github.com/honeybadger-io/honeybadger-webpack) to upload source maps to Honeybadger. `options.revision` needs to be unique as it is the identifier that connects your errors to your source maps.
- `[assetsURL]` _(String)_: The base URL to production assets (scheme://host/path). Used to grab source maps.
- `[environment]` _(String)_: Current environment. Used to indicate the environment where the error occurred. **Optional**, defaults to `process.env.NODE_ENV`.

## License

This package is MIT licensed. See the [MIT-LICENSE](./MIT-LICENSE) file in this folder for details.
npm package: @honeybadger-io/plugin-core
Description: Shared functionality used by Honeybadger's javascript build plugins
Latest version: 1.4.1

# Honeybadger JavaScript Build Plugin

Shared library for uploading source maps and sending deploy notifications to Honeybadger. 

## Usage

You shouldn't need to use this package directly. This package serves as the core implementation of shared functionality meant to be used within Honeybadger's plugins for JS build/bundling systems such as [webpack](https://github.com/honeybadger-io/honeybadger-js/tree/master/packages/webpack) and [rollup](https://github.com/honeybadger-io/honeybadger-js/tree/master/packages/rollup-plugin). 

## Development

1. Run `npm install`
2. Run the tests with `npm test`
3. Build with `npm run build`

## License

This package is MIT licensed. See the [MIT-LICENSE](./MIT-LICENSE) file in this folder for details.
npm package: @honeybadger-io/react
Description: React.js integration for honeybadger
Author: Jason Truesdell
Latest version: 6.1.27

# Honeybadger React.js Integration

![Node CI](https://github.com/honeybadger-io/honeybadger-js/workflows/Node%20CI/badge.svg)
[![npm version](https://badge.fury.io/js/%40honeybadger-io%2Freact.svg)](https://badge.fury.io/js/%40honeybadger-io%2Freact)
[![npm dm](https://img.shields.io/npm/dm/@honeybadger-io/react)](https://www.npmjs.com/package/@honeybadger-io/react)
[![npm dt](https://img.shields.io/npm/dt/@honeybadger-io/react)](https://www.npmjs.com/package/@honeybadger-io/react)

> [React.js Integration for Honeybadger.io](https://www.honeybadger.io/for/javascript/?utm_source=github&utm_medium=readme&utm_campaign=react&utm_content=React.js+integration+for+Honeybadger.io)

## Documentation and Support

For comprehensive documentation and support, [check out our documentation site](https://docs.honeybadger.io/lib/javascript).

The documentation includes a detailed [React integration guide](https://docs.honeybadger.io/lib/javascript/integration/react)

## Project Goals

The goal is to provide an idiomatic, simple integration of Honeybadger's
exception monitoring service with React.js applications.

## Project Status

This version is considered suitable for preview.

## Limitations

Honeybadger-react hooks in to the error handler in React. This means we only
notify Honeybadger of React context for errors that React handles. Some
errors inside React code may propagate to the window onerror handler
instead.

In those cases, Honeybadger JavaScript's default error notifier is invoked,
which will contain a stack trace but none of the React variables.

## Key Assumptions

This project is built using create-react-library with rollup and generates
artifacts in commonjs, esm and umd formats. It's possible
your own build environment may be just different enough to require some
adjustments. If you find that our artifacts don't quite meet your needs,
please [file an issue on GitHub](https://github.com/honeybadger-io/honeybadger-react/issues).

## Example apps

There are minimal implementations of a honeybadger-react integration in the ./examples
folder. If you want to contribute a patch to @honeybadger-io/react, it can be useful to have
the demo apps running.

To run the example app using React v19, issue these commands from your shell:

```bash
cd examples/react-19
npm install
REACT_APP_HONEYBADGER_API_KEY=b425b636 npm run start
```

This will start the demo app with hot reload enabled.

## Development

``` bash
# install dependencies
npm install

# build for production
npm run build

# run unit tests
npm test

# automatically continuously rebuild the dist/ artifacts with hot reload when developing
npm run start
```

### License

This package is MIT licensed. See the [MIT-LICENSE](./MIT-LICENSE) file in this folder for details.
npm package: @honeybadger-io/vue
Description: Honeybadger Vue.js client
Author: Jason Truesdell
Latest version: 6.2.9

# Honeybadger Vue.js Integration
![Node CI](https://github.com/honeybadger-io/honeybadger-js/workflows/Node%20CI/badge.svg)
[![npm version](https://badge.fury.io/js/%40honeybadger-io%2Fvue.svg)](https://badge.fury.io/js/%40honeybadger-io%2Fvue)
[![npm dm](https://img.shields.io/npm/dm/@honeybadger-io/vue)](https://www.npmjs.com/package/@honeybadger-io/vue)
[![npm dt](https://img.shields.io/npm/dt/@honeybadger-io/vue)](https://www.npmjs.com/package/@honeybadger-io/vue)

[Vue.js integration for Honeybadger.io](https://www.honeybadger.io/for/javascript/?utm_source=github&utm_medium=readme&utm_campaign=vue&utm_content=Vue.js+integration+for+Honeybadger.io)

> **Note:** Since v3.2 release of this project, both Vue.js v2.x and v3.x are supported!

## Documentation and Support

For comprehensive documentation and support, [check out our documentation site](https://docs.honeybadger.io/lib/javascript/index.html).

The documentation includes detailed Vue Integration Guides, both for Vue.js [v2.x](https://docs.honeybadger.io/lib/javascript/integration/vue2.html) and [v3.x](https://docs.honeybadger.io/lib/javascript/integration/vue3.html).

## Project Goals

The goal is to provide an idiomatic, simple integration of Honeybadger's
exception monitoring service with Vue.js applications.

## Project Status

This version is considered suitable for preview.

## Limitations

Honeybadger-vue hooks in to the error handler in Vue. This means we only
notify Honeybadger of Vue context for errors that Vue handles. Some
errors inside Vue code may propagate to the window onerror handler
instead.

In those cases, Honeybadger JavaScript's default error notifier
is invoked, which will contain a stack trace but none of the Vue
variables.

## Key Assumptions

This project is built using a webpack-based Vue template. It's possible
your own build environment may be just different enough to require some
adjustments. If you find that our artifacts don't quite meet your needs,
please [file an issue on GitHub](https://github.com/honeybadger-io/honeybadger-js/issues).

## Development

``` bash
# install dependencies
npm install

# Serve the demo app with hot reload at localhost:8080
HONEYBADGER_API_KEY=yourkey npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
HONEYBADGER_API_KEY=yourkey npm run test:all
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## License

This package is MIT licensed. See the [MIT-LICENSE](./MIT-LICENSE) file in this folder for details.
npm package: @honeybee-js/js-interop
Description: Evaluates a given expression and returns it.
Latest version: 0.0.1

# js-interop

Evaluates a given expression and returns it.

> For example, it is very useful if you want to import a library but it is not yet available server-side (SSR).

![npm](https://img.shields.io/npm/v/@honeybee-js/js-interop?style=flat-square)
![npm](https://img.shields.io/npm/dt/js-interop?style=flat-square)
![npm bundle size](https://img.shields.io/bundlephobia/min/@honeybee-js/js-interop?style=flat-square)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)

## Install

```bash
npm i --save @honeybee-js/js-interop
```

```bash
yarn add @honeybee-js/js-interop
```

## Usage

```jsx
import { _interop } from 'js-interop'
```

```jsx
/* Example NextJs */
import { _interop } from 'js-interop'
import styled from 'styled-components'

export const StyledComponent = _interop(styled).div`
  background: pink;
  color: black;
  ...
`

```

## License

MIT © [Samline](https://github.com/samline)
npm package: @honeybee-js/react-fontawesome-icon
Description: An easy way to include FontAwesome (v6.4.0) icons in your React applications without having to add each icon separately.
Latest version: 0.0.24

# react-fontawesome-icon

An easy way to include FontAwesome (v6.4.0) icons in your React applications without having to add each icon separately.

![npm](https://img.shields.io/npm/v/@honeybee-js/react-fontawesome-icon?style=flat-square)
![npm](https://img.shields.io/npm/dt/react-fontawesome-icon?style=flat-square)
![npm bundle size](https://img.shields.io/bundlephobia/min/@honeybee-js/react-fontawesome-icon?style=flat-square)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)

## Install

```bash
npm i --save @honeybee-js/react-fontawesome-icon
```

```bash
yarn add @honeybee-js/react-fontawesome-icon
```

## Usage

```jsx
/**
 * FontAwesomeIcon
 * @param {string} icon (required) - icon to use. (e.g. 'chevron-right')
 * @param {string} lib - library to use. - (e.g. fas, far, fab) - default: fas
 * @param {reference} innerRef - you can still assign to ref
 * @param {...styledSystemProps} [color, layout, position, space, typography]
 * @param {...any} props
 *
 * @returns component
 *
 * @fontawesome docs - https://fontawesome.com/search
 * @styledSystem docs - https://styled-system.com/table
 */
```

```jsx
import { FontAwesomeIcon } from "@honeybee-js/react-fontawesome-icon"
```

```jsx
<FontAwesomeIcon icon="..." lib="..." ...styledSystemProps />
```

```jsx
/* Example */
<FontAwesomeIcon icon="facebook-f" lib="fab" color="#3b5998" fontSize="20px" />
```

## License

MIT © [Samline](https://github.com/samline)
npm package: @honeybee-js/react-forms
Description: Implement forms in your React applications using [react-hook-form](https://www.react-hook-form.com) and [cleave.js](https://nosir.github.io/cleave.js) together, easy to use in most of your projects.
Latest version: 0.0.7

# react-forms

Implement forms in your React applications using [react-hook-form](https://www.react-hook-form.com) and [cleave.js](https://nosir.github.io/cleave.js) together, easy to use in most of your projects.

> If you need more complex implementations remember to visit both libraries in their respective documentation.

![npm](https://img.shields.io/npm/v/@honeybee-js/react-forms?style=flat-square)
![npm](https://img.shields.io/npm/dt/react-forms?style=flat-square)
![npm bundle size](https://img.shields.io/bundlephobia/min/@honeybee-js/react-forms?style=flat-square)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)

## Install

```bash
npm i --save @honeybee-js/react-forms
```

```bash
yarn add @honeybee-js/react-forms
```

## Docs

| Component   | Docs                                                                                     | Status |
| ----------- | ---------------------------------------------------------------------------------------- | ------ |
| API         | [README.md](https://github.com/samline/react-forms/tree/main/docs/API/README.md)         | Stable |
| Form        | [README.md](https://github.com/samline/react-forms/tree/main/docs/Form/README.md)        | Stable |
| Label       | [README.md](https://github.com/samline/react-forms/tree/main/docs/Label/README.md)       | Stable |
| Input       | [README.md](https://github.com/samline/react-forms/tree/main/docs/Input/README.md)       | Stable |
| InputFormat | [README.md](https://github.com/samline/react-forms/tree/main/docs/InputFormat/README.md) | Stable |
| Select      | [README.md](https://github.com/samline/react-forms/tree/main/docs/Select/README.md)      | Stable |
| Textarea    | [README.md](https://github.com/samline/react-forms/tree/main/docs/Textarea/README.md)    | Stable |
| Error       | [README.md](https://github.com/samline/react-forms/tree/main/docs/Error/README.md)       | Stable |
| GlobalError | [README.md](https://github.com/samline/react-forms/tree/main/docs/GlobalError/README.md) | Stable |

## License

MIT © [Samline](https://github.com/samline)
npm package: @honeybee-js/react-layout
Description: Quickly layout your React applications with [styled components](https://styled-components.com) and [styled system](https://styled-system.com). Create columns, rows, grids, blocks, etc., fast, simple and responsive.
Latest version: 0.0.8

# react-layout

Quickly layout your React applications with [styled components](https://styled-components.com) and [styled system](https://styled-system.com). Create columns, rows, grids, blocks, etc., fast, simple and responsive.

> Check the individual documentation of both libraries to learn more.

![npm](https://img.shields.io/npm/v/@honeybee-js/react-layout?style=flat-square)
![npm](https://img.shields.io/npm/dt/react-layout?style=flat-square)
![npm bundle size](https://img.shields.io/bundlephobia/min/@honeybee-js/react-layout?style=flat-square)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)

## Install

```bash
npm i --save @honeybee-js/react-layout
```

```bash
yarn add @honeybee-js/react-layout
```

## Docs

| Component | Docs                                                                                | Status                |
| --------- | ----------------------------------------------------------------------------------- | --------------------- |
| Ly        | [README.md](https://github.com/samline/react-layout/tree/main/docs/Ly/README.md)    | Pending documentation |
| Box       | [README.md](https://github.com/samline/react-layout/tree/main/docs/Box/README.md)   | Pending documentation |
| Flex      | [README.md](https://github.com/samline/react-layout/tree/main/docs/Flex/README.md)  | Pending documentation |
| Grid      | [README.md](https://github.com/samline/react-layout/tree/main/docs/Grid/README.md)  | Pending documentation |
| Track     | [README.md](https://github.com/samline/react-layout/tree/main/docs/Track/README.md) | Pending documentation |

## License

MIT © [Samline](https://github.com/samline)
npm package: @honeycomb-finance/airdrop
Description: Components to interact with Airdrop Contracts.
Latest version: 1.0.4

# Honeycomb Airdrop
Components to interact with Airdrop Contracts.

## Installation
`yarn add @honeycomb-finance/airdrop @honeycomb-finance/honeycomb-provider`

or

`npm install @honeycomb-finance/airdrop @honeycomb-finance/honeycomb-provider`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

## Story Book

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the components

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Components

### Airdrop
The main component used to interact with airdrop contract.

![Airdrop component](docs/Airdrop.png)

### ComingSoon
It's a simple component to show that the airdrop ins comming soon.

![ComingSoon component](docs/ComingSoon.png)
npm package: @honeycomb-finance/bridge
Description: Components to interact with various bridge providers.
Latest version: 1.0.4

# Honeycomb Bridge
Components to interact with various bridge providers.

## Installation
`yarn add @honeycomb-finance/portfolio @honeycomb-finance/honeycomb-provider`

or

`npm install @honeycomb-finance/portfolio @honeycomb-finance/honeycomb-provider`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

## Story Book

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the components

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Components

### Bridge
The main component used to interact with various bridge providers.

![Bridge component](docs/Bridge.png)

### SelectChainDrawer
This component is used to list chains supported by the bridge providers.

![SelectChainDrawer](docs/SelectChainDrawer.png)

### SelectBridgeCurrencyDrawer
This component is used to list tokens supported by the bridge providers.

![SelectBridgeCurrencyDrawer component](docs/SelectBridgeCurrencyDrawer.png)
npm package: @honeycomb-finance/core
Description: Building components to use in your react app, such Box, Dropdown, Modal, and etc.
Latest version: 1.0.2

# Pangolin Core
Building components to use in your react app, such Box, Dropdown, Modal, and etc.

## Installation
`yarn add @honeycomb-finance/core`

or

`npm install @honeycomb-finance/core`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```

## Customizing Theme

In `HoneycombProvider` you can pass custom theme. Follow `Guide -> Theme` to customize theme.

## Story Book
Use storybook to see all components.

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the components

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.
npm package: @honeycomb-finance/governance
Description: Components to interact with Pangolin's governance contracts.
Latest version: 1.0.4

# Honeycomb Governance
Components to interact with Pangolin's governance contracts.

## Installation
`yarn add @honeycomb-finance/portfolio`

or

`npm install @honeycomb-finance/portfolio`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

## Story Book

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the components

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Components

### GovernanceList
This component list all proposals.

![GovernanceList](docs/GorvenanceList.png)

### GovernanceDetail
This component list all proposals.

![GovernanceDetail](docs/GovernanceDetail.png)
npm package: @honeycomb-finance/honeycomb-provider
Description: Contains the Provider componento used to wrap the main app. Is necessary to use this to use some packages.
Latest version: 1.0.7

# Honeycomb-provider
Contains the Provider componento used to wrap the main app. Is necessary to use this to use some packages.

## Installation
`yarn add @honeycomb-finance/honeycomb-provider`

or

`npm install @honeycomb-finance/honeycomb-provider`

### Install below dependancies as its peer dependancies

```
react
@pangolindex/sdk
```

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```
npm package: @honeycomb-finance/pools
Description: Components to interact with Pangolin's pools and farms.
Latest version: 1.0.6

# Pools component
Components to interact with Pangolin's pools and farms.

## Installation
`yarn add @honeycomb-finance/pools`

or

`npm install @honeycomb-finance/pools`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

## Story Book

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the components

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Components

See the [components readme](docs/components.md).
npm package: @honeycomb-finance/portfolio
Description: Components to interact to show the portfolio of a account or track tokens prices.
Latest version: 1.0.3

# Pangolin Portfolio
Components to interact to show the portfolio of a account or track tokens prices.

## Installation
`yarn add @honeycomb-finance/portfolio`

or

`npm install @honeycomb-finance/portfolio`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```

## Story Book

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the components

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

## Components

### MyPortfolio
This component show the tokens and the liquidity in pangolin on avalanche, on selected chain.

![MyPortfolio component](docs/MyPortfolio.png)

### Portfolio
This component shows the total in dollar of a account in wallet in chains.

![Portfolio component](docs/Portfolio.png)

### WatchList
This component is used to track the price of various tokens.

![WatchList component](docs/Watchlist.png)

### TokenInfo
This component show the information about a token, balance of token in wallet, unclameid balance of token, price of token in usd, circulation supply and total supply.

Variations:
- **TokenInfoModal** is the TokenInfo wrapped in Modal.

![TokenInfo component](docs/TokenInfo.png)
npm package: @honeycomb-finance/sar
Description: Components to interact with Pangolin's Sunshine and Rainbows Single Stake contracts, [see more about Sunshine and Rainbows](https://blog.pangolin.exchange/pangolin-launches-sunshine-and-rainbows-the-ultimate-staking-algorithm-for-sticky-liquidity-80a09951
Latest version: 1.0.5

# Pangolin Sar Single Stake
Components to interact with Pangolin's Sunshine and Rainbows Single Stake contracts, [see more about Sunshine and Rainbows](https://blog.pangolin.exchange/pangolin-launches-sunshine-and-rainbows-the-ultimate-staking-algorithm-for-sticky-liquidity-80a099515bea).

## Installation
`yarn add @honeycomb-finance/sar`

or

`npm install @honeycomb-finance/sar`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

## Story Book

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the components

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Components

### SarManageWidget
This component is used to manage a position, stake more tokens or unstake, claim rewards or compound pending rewards to position.

![SarManageWidget component](docs/SarManageWidget.png)

### SarNFTPortfolio
This component is used to see the nfts/postions from a connected account.

![SarNFTPortfolio component](docs/SarNFTPortfolio.png)

### SarStakeWidget
This component is used to create a new position.

![SarNFTPortfolio component](docs/SarStakeWidget.png)
npm package: @honeycomb-finance/shared
Description: Contains useful functions, contants and hooks, used in anothers packages.
Latest version: 1.0.3

# Shared
Contains useful functions, contants and hooks, used in anothers packages.

## Installation
`yarn add @honeycomb-finance/shared`

or

`npm install @honeycomb-finance/shared`

### Install below dependancies as its peer dependancies

```
react
@pangolindex/sdk
```

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running


## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```
npm package: @honeycomb-finance/state-hooks
Description: Contains useful functions, and hooks, used in anothers packages.
Latest version: 1.0.3

# State-hooks
Contains useful functions, and hooks, used in anothers packages.

## Installation
`yarn add @honeycomb-finance/state-hooks`

or

`npm install @honeycomb-finance/state-hooks`

### Install below dependancies as its peer dependancies

```
@pangolindex/sdk
```

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running


## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```
npm package: @honeycomb-finance/swap
Description: A widget for projects to embed Pangolin's Swap functionality within their dApp.
Latest version: 1.0.7

# Swap Widget
A widget for projects to embed Pangolin's Swap functionality within their dApp.

## Installation
`yarn add @honeycomb-finance/swap`

or

`npm install @honeycomb-finance/swap`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```

## Story Book

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the component

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```

Now you can import the widget in your app

```tsx
import { useChainId } from '@honeycomb-finance/shared';
import { SwapWidget } from '@honeycomb-finance/swap';
import React from 'react';
export default function Swap() {
  const chainId = useChainId();

  return (
    <div>
      <SwapWidget />
    </div>
  );
}
```

## Customizing Theme

In `HoneycombProvider` you can pass custom theme. Follow `Guide -> Theme` to customize theme.


## Component

![SwapWidget component](docs/SwapWidget.png)
npm package: @honeycomb-finance/token-drawer
Description: Small package with a Drawer used to user select a token from a list.
Latest version: 1.0.4

# Pangolin Portfolio
Small package with a Drawer used to user select a token from a list.

## Installation
`yarn add @honeycomb-finance/token-drawer`

or

`npm install @honeycomb-finance/token-drawer`

### Install below dependancies as its peer dependancies

```
react
react-dom
@pangolindex/sdk
```
## Story Book

1. do `yarn storybook` to start the storybook
2. now connect to http://localhost:6006 to see the components

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Getting Start
In your main file wrap your app with `HoneycombProvider` and `Web3ReactProvider`:

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { HoneycombProvider } from '@honeycomb-finance/honeycomb-provider';
import { NetworkContextName, useActiveWeb3React } from '@honeycomb-finance/shared';
import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <HoneycombProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </HoneycombProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);
```
npm package: @honeycomb-finance/wallet-connectors
Description: This package contains connectors that are used to help connect wallets in react apps.
Latest version: 1.0.4

# Pangolin Wallet Connectors
This package contains connectors that are used to help connect wallets in react apps.

## Installation
`yarn add @honeycomb-finance/wallet-connectors`

or

`npm install @honeycomb-finance/wallet-connectors`

## Development

1. `yarn install`
2. `yarn dev` and keep that terminal running

or see the [README file](/monorepo/README.md) in monorepo to run the example app.

## Getting Start
This is used together with `@web3-react/core`, where the connector is activated and deactivated.

_Use version **6.0.9** of `@web3-react/core` package._

```tsx
import { InjectedConnector } from "@honeycomb-finance/wallet-connectors";
import { useWeb3React } from '@web3-react/core';

const metamaskConnector = new InjectedConnector({
    supportedChainIds: [1,2,3],
});

export function ExampleComponent(){
    const { activate, deactivate, active } = useWeb3React();

    const onActivate = async () => {
        await activate(metamaskConnector, undefined, false); 
    };

    return (
        <div>
            <button onClick={onActivate}>
                Connect
            </button>
            <button onClick={deactivate} disabled={!active}>
                Disconnect
            </button>
        </div>
    )
};
```

Now you can use the connector in another component in your app.

```tsx
import { useWeb3React } from '@web3-react/core';
import { useEffect, useState } from 'react';

export function ExampleComponent(){
    const { connector } = useWeb3React();

    const [provider, setProvider] = useState<any>(null);
    const [chainId, setChainId] =  usestate<number | null>(null);
    const [account, setAccount] =  usestate<string | null>(null);

    useEffect(() => {
        const getInfo = async() => {
            const _provider = await connector.getProvider();
            const _chainId = await connector.getChainId();
            const _account = await connector.getAccount();

            setProvider(_provider);
            setChainId(_chainId);
            setAccount(_account);
        };

        getInfo();
    }, [connector]);

    return (
        <div>
            <div>Connected account: {account}</div>
            <div>Connected chainId: {chainId}</div>
        </div>
    )
};
```