open-index/open-npm huggingface dataset:
npm package: @injectivelabs/tx-utils
Description: List of transaction utils and helper functions that can be reused throughout Injective's projects.
Latest version: 0.5.2

# 🌟 Injective Protocol - Transaction Utils

---

## 📚 Getting Started

## 📖 Documentation

---

## ⛑ Support

Reach out to us at one of the following places!

- Website at <a href="https://injectiveprotocol.com" target="_blank">`injectiveprotocol.com`</a>
- Twitter at <a href="https://twitter.com/InjectiveLabs" target="_blank">`@InjectiveLabs`</a>

---

## 🔓 License
npm package: @injectivelabs/ui-common
Description: Reusable Vue Components, Vuex Store Modules, Composables, and more
Latest version: 0.5.68

## DEPRECATED - Please use @injectivelabs/sdk-ui-ts

# 🌟 Injective Protocol - UI Common

[![downloads](https://img.shields.io/npm/dm/@injectivelabs/ui-common.svg)](https://www.npmjs.com/package/@injectivelabs/ui-common)
[![npm-version](https://img.shields.io/npm/v/@injectivelabs/ui-common.svg)](https://www.npmjs.com/package/@injectivelabs/ui-common)
[![license](https://img.shields.io/npm/l/express.svg)]()

_Reusable Vue Components, Vuex Store Modules, Composables, and more_

---

## 📚 Installation

```bash
yarn add @injectivelabs/ui-common
```

## 📖 Documentation


## 📖 Example Usage

```ts

```

---

## 📜 Contribution

**Contribution guides and practices will be available once there is a stable foundation of the whole package set within the `injective-ts` repo.**

---

## ⛑ Support

Reach out to us at one of the following places!

- Website at <a href="https://injectiveprotocol.com" target="_blank">`injectiveprotocol.com`</a>
- Twitter at <a href="https://twitter.com/InjectiveLabs" target="_blank">`@InjectiveLabs`</a>

---

## 🔓 License

[![License](https://img.shields.io/:license-mit-blue.svg?style=flat-square)](https://badges.mit-license.org)
npm package: @injectivelabs/ui-notifications
Description: Injective notification system
Author: Kevin Karsopawiro
Latest version: 1.0.9

# @InjectiveLabs/ui-notifications

Injective notification system

## Installation

Install the package. Any major starting with `1.x.x` is using the Vue Options API while versions starting with `2.x.x` are built for the Vue Compositions API.

```sh
$ yarn add @InjectiveLabs/ui-notifications --save
```

### Setup

1. Add the module to your `nuxt.config.js`

```javascript
export default defineNuxtConfig({
  modules: ['@injectivelabs/ui-notifications']
})
```

Your app is now ready to start using the Notification system.

## Usage

### Composition API

1. In your root component (or in individual layouts) add the `<Notifications>` component.

```vue
<template>
  <div>
    <YourApp />

    <Notifications />
  </div>
</template>
x
```

2. Create the markup for your notifications, or use the default `<Notification>` component provided by the package. Use the `#notification` scoped slot to get access to the notification data:

```vue
<script lang="ts" setup>
import { NotificationType } from '@injectivelabs/ui-notifications'
</script>

<template>
  <div>
    <YourApp />

    <Notifications>
      <template #notification="{ notification }">
        <!-- Use your own markup -->
        <div>
          <span>{{ notification.id }}</span>
          <span>{{ notification.title }}</span>
          <span>{{ notification.description }}</span>

          <ErrorIcon v-if="notification.type === NotificationType.Error" />
          <WarningIcon v-if="notification.type === NotificationType.Warning" />
          <InfoIcon v-if="notification.type === NotificationType.Info" />
          <SuccessIcon v-if="notification.type === NotificationType.Success" />

          <div v-if="notification.actions">
            <button
              v-for="action in notification.actions"
              :key="action.key"
              @click="action.callback"
            >
              {{ action.label }}
            </button>
          </div>
        </div>

        <!-- Or use the default notification -->
        <Notification
          :notification="notification"
          class="pointer-events-auto"
        />
      </template>
    </Notifications>
  </div>
</template>
```

3. From any component use the `useNotifications` composable to get access to the notification system.

```vue
<script lang="ts" setup>
const { error, warning, success } = useNotifications()

const placeOrder = () => {
  fetch(...)
    .then(() => {
      success({
        title: 'Order placed',
        description: 'Your order has been submitted.'
      })
    })
    .catch(ex => {
      error({
        title: 'Oops',
        description: ex.message
      })
    })
}
</script>

<template>
  <div>
    <button @click="placeOrder">Place Order</button>
  </div>
</template>
```
npm package: @injectivelabs/ui-shared
Description: Collection of re-useable fonts, render-less FE components and tailwind configs to ease development across the wide range of Injective products.
Author: Thomas Lee
Latest version: 1.12.47-alpha.7

# 🌟 Injective Components library

Collection of re-useable fonts, render-less FE components and tailwind configs to ease development across the wide range of Injective products.

## Development

- Run `npm run dev:prepare` to generate type stubs.
- Use `npm run dev` to start [playground](./playground) in development mode.
- `cd playground` and `yarn story:dev` to browse through the list of available components

## Publish

- See [here](injective-ui/README.md) for instructions

## How to add new fonts

- Add the respective font files to `/lib/fonts` folder
- Create the `${fontName}.css` in the `/lib/css/fonts` folder
- Update package.json `exports` object

```json
{
  "exports": {
    "./lib/fonts/{fontName}.css": "./lib/css/fonts/{fontName}.css"
  }
}
```

## How to add a new icon

- Create the `{iconName}.vue` file in the `/lib/icons` folder
- Test the icon renders properly
  - yarn dev:prepare
  - cd playground
  - yarn story:dev

## How to add a new render-less components

- Create the `{componentName}.vue` file in the `/lib/components` folder
- Add the `{componentName}.test.ts` file in the `/test` folder
- Add the `${componentName}.story.vue` file in the `playground/story` folder
- Test the component test passes smoothly
  - yarn test:coverage
- Test the component renders properly
  - yarn dev:prepare
  - cd playground
  - yarn story:dev

## 🔓 License

This software is licensed under the MIT license. See [LICENSE](./LICENSE) for full disclosure.