open-index/open-npm huggingface dataset:
npm package: @sky-foundry/vue-directive-tooltip
Description: Vue.js tooltip directive 
Author: Laurent Blanes
Latest version: 1.5.1

# vue-directive-tooltip

![Node](https://img.shields.io/node/v/vue-directive-tooltip.svg?style=flat-square)
[![NPM](https://img.shields.io/npm/v/vue-directive-tooltip.svg?style=flat-square)](https://www.npmjs.com/package/vue-directive-tooltip)
[![NPM Downloads/month](https://img.shields.io/npm/dm/vue-directive-tooltip.svg?style=flat-square)](https://www.npmjs.com/package/vue-directive-tooltip)
[![Vue.js](https://img.shields.io/badge/vue-2-green.svg)](https://vuejs.org)

> Vue.js tooltip directive ([based on Popper.js](https://github.com/FezVrasta/popper.js))

### Usage

Super simple

```html
<span v-tooltip="'my text'">some text</span>
```

A **lot of options** make this tooltip convenient:

- **content**: simple text or use another html tag
- **positioning** (right, left, ...)
- **positioning variants**: start | end. ex: bottom.end, top.start, right.end, etc...
- **delay** to hide (in ms)
- **offset** (from the target in px)
- choose from **several triggers** (hover, focus, click)
- **full programmatic**, you choose when to show/hide the tooltip
- and of course, use your **custom CSS** class


### Documentation

[Full documentation with examples](https://hekigan.github.io/vue-directive-tooltip/)

[<img src="https://hekigan.github.io/vue-directive-tooltip/images/github-screenshot.jpg">](https://hekigan.github.io/vue-directive-tooltip/)

### Builds

If you don't use a package manager, you can [access `vue-directive-tooltip` via unpkg (CDN)](https://unpkg.com/vue-directive-tooltip/), download the source, or point your package manager to the url.

`vue-directive-tooltip` is compiled as a collection of [CommonJS](http://webpack.github.io/docs/commonjs.html) modules & [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html) for bundlers that support the `jsnext:main` or `module` field in package.json (Rollup, Webpack 2)

The `vue-directive-tooltip` package includes precompiled production and development [UMD](https://github.com/umdjs/umd) builds in the [`dist` folder](https://unpkg.com/vue-directive-tooltip/dist/). They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a [`<script>` tag](https://unpkg.com/vue-directive-tooltip) on your page. The UMD builds make `vue-directive-tooltip` available as a `window.vueDirectiveTooltip` global variable.

### License

The code is available under the [MIT](LICENSE) license.

### Contributing

We are open to contributions, see [CONTRIBUTING.md](CONTRIBUTING.md) for more info.

### Misc

This module was created using [generator-module-extended-boilerplate](https://github.com/hekigan/generator-module-extended-boilerplate).
npm package: @sky-foundry/vue-emotion
Description: Seamlessly use emotion (CSS-in-JS) with Vue.js
Author: Sky Foundry
Latest version: 0.4.26

# vue-emotion

[![NPM version](https://img.shields.io/npm/v/vue-emotion.svg?style=flat)](https://npmjs.com/package/vue-emotion) [![NPM downloads](https://img.shields.io/npm/dm/vue-emotion.svg?style=flat)](https://npmjs.com/package/vue-emotion) [![CircleCI](https://circleci.com/gh/egoist/vue-emotion/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-emotion/tree/master)

*[emotion](https://github.com/tkh44/emotion) is the Next Generation of CSS-in-JS.*

## Install

```bash
yarn add emotion vue-emotion
```

## Table of Contents

<!-- toc -->

- [Usage](#usage)
- [Contributing](#contributing)
- [Author](#author)

<!-- tocstop -->

## Usage


Create your styled component:

```js
import styled from 'vue-emotion'

const Button = styled('button')`
  font-size: 15px;
`

const PinkButton = styled(Button)`
  color: pink
`

new Vue({
  render() {
    return (
      <div>
        <Button>normal button</Button>
        <PinkButton>pink button</PinkButton>
      </div>
    )
  }
})
```

Refer to https://github.com/tkh44/emotion for more docs.


## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D


## Author

**vue-emotion** © [Sky Foundry](https://github.com/sky-foundry/vue-emotion), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by Sky Foundry with help from contributors ([list](https://github.com/egoist/vue-emotion/contributors)).

> [https://skyfoundry.agency](https://skyfoundry.agency) · Website [github.com/sky-foundry/vue-emotion](https://github.com/sky-foundry/vue-emotion) · GitHub
npm package: @sky-foundry/vue-svg-loader
Description: Use SVG files as Vue Components
Author: Sky Foundry
Latest version: 0.12.0

<p align="center"><img src="docs/.vuepress/public/logo.svg?sanitize=true" width="40%"></p>
<h1 align="center">vue-svg-loader</h1>
<p align="center">webpack loader that lets you use SVG files as Vue components</p>
<p align="center">
  <a href="https://vue-svg-loader.js.org">Documentation</a> -
  <a href="https://vue-svg-loader.js.org/faq.html">FAQ</a>
</p>

## Installation
``` bash
npm i -D vue-svg-loader

yarn add --dev vue-svg-loader
```

## Basic configuration
### webpack
``` js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
    ],
  },
};
```
### Vue CLI
``` js
module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};
```

### Nuxt.js (1.x / 2.x)
``` js
module.exports = {
  build: {
    extend: (config) => {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));

      svgRule.test = /\.(png|jpe?g|gif|webp)$/;

      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      });
    },
  },
};
```

## Example usage
``` vue
<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
    <a href="https://github.com/svg/svgo">
      <SVGOLogo />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack">
      <WebpackLogo />
      webpack
    </a>
  </nav>
</template>
<script>
import VueLogo from './public/vue.svg';
import SVGOLogo from './public/svgo.svg';
import WebpackLogo from './public/webpack.svg';

export default {
  name: 'Example',
  components: {
    VueLogo,
    SVGOLogo,
    WebpackLogo,
  },
};
</script>
```

## License
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fvisualfanatic%2Fvue-svg-loader.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fvisualfanatic%2Fvue-svg-loader?ref=badge_large)
npm package: @sky-mavis/katana-core
Description: Katana Core SDK
Author: SkyMavis
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Katana Core SDK

## Overview
This code is shared across Katana TypeScript SDKs.

## Installation

With yarn

```bash
 yarn add @sky-mavis/katana-core
```

With npm

```bash
 npm install @sky-mavis/katana-core --save
```
npm package: @sky-mavis/mavis-id-sdk
Description: ## What is Mavis ID?
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Mavis ID SDK

## What is Mavis ID?

The [Mavis ID](https://id.skymavis.com) lets developers use features such as player authorization, account creation, and in-app wallet interaction in mobile and desktop games.

#### Features:

- Creating a wallet without requiring web3/crypto knowledge or downloading an external app
- Recover & access the wallet on different devices with a simple passphrase
- Perform on-chain actions like minting NFTs, sending transactions & signing messages
- Gas sponsoring

## SDK Introduction

The Mavis ID SDK lets developers integrate with Mavis ID seamlessly & easily.

- [Head to the playground](https://mavis-id-playground.vercel.app) to experience Mavis ID your way
- [Head to the faucet](https://faucet.roninchain.com) to get your RON on Saigon Testnet

#### Features:

- Authorize user with Mavis ID
- `MavisIdWallet` is [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) Compatible Ethereum JavaScript Provider
- Interact with any Javascript Ethereum Interface such as `viem`, `ether.js`, `web3js`
- `WagmiConnector` | `WalletgoConnector` is coming soon
- Standalone utilities for game developers (nfts, token balance, token approval, katana swap, ...) is coming soon

## Prerequisites

- Create an app in the Developer Console to get your app ID.
- Request permission to use the Mavis ID service at Developer Console > your app > App Permission > Mavis ID > Request Access.

For more information, see the [documentation](https://docs.skymavis.com/mavis/mavis-id/guides/get-started).

## Installation

npm:

```bash
npm install @sky-mavis/mavis-id-sdk
```

yarn:

```bash
yarn add @sky-mavis/mavis-id-sdk
```

pnpm:

```bash
pnpm install @sky-mavis/mavis-id-sdk
```

## Initialization

```js
import { MavisIdWallet } from "@sky-mavis/mavis-id-sdk"

const idWalletProvider = MavisIdWallet.create({
  clientId: process.env.YOUR_APP_ID,
  chainId: chainId,
})
```

## Authorize user

```js
import { authorize } from "@sky-mavis/mavis-id-sdk"

const result = await authorize({
  clientId: "0e188f93-b419-4b0f-8df4-0f976da91ee6",
})

console.debug("🚀 | Authorize Result:", result)
```

## Interact with wallet

**Usage with ethers.js (v5):**

```js
import * as ethers from "ethers"

const provider = new ethers.providers.Web3Provider(idWalletProvider)
```

**Usage with web3.js**

```js
import Web3 from "web3"

const web3 = new Web3(idWalletProvider)
```

**Usage with viem**

```js
import { createWalletClient, custom } from "viem"
import { saigon } from "viem/chains"

const walletClient = createWalletClient({ chain, transport: custom(idWalletProvider) })
```

**Standalone usage**

```js
const accounts = await idWalletProvider.request<string[]>({ method: "eth_requestAccounts" })

if (accounts.length) {
  mavisIdProvider.request<string>({ method: "eth_getBalance", params: [accounts[0], "latest"] })
}
```

## Example

[Head to the playground source code](https://github.com/skymavis/mavis-id-js/tree/main/apps/playground) for full use-cases
npm package: @sky-mavis/ronin-crosschain-payment
Description: A simple SDK for cross-chain payments on Ronin
Latest version: 0.1.0-beta.6

# Ronin Cross-chain Payment

A TypeScript SDK for handling cross-chain payments on Ronin network. This package provides a simple way to manage tokens and payments across different blockchain networks.

## Features

- Built-in wallet proxy integration
- Cross-chain payment

## Installation

```bash
# Using npm
npm install @sky-mavis/ronin-crosschain-payment

# Using yarn
yarn add @sky-mavis/ronin-crosschain-payment

## Usage

### Basic Setup

```typescript
import { PaymentService } from '@sky-mavis/ronin-crosschain-payment';
import { mainnet } from 'viem/chains';

const paymentService = new PaymentService({
  chains: [mainnet], // Add the chains you want to support
});
```

### Get Quote for Token Exchange

```typescript
import { QuoteParams } from '@sky-mavis/ronin-crosschain-payment';

const quoteParams: QuoteParams = {
  from: {
    chainId: 1,
    tokenAddress: '0x...', 
    userAddress: '0x...',  
    rawAmount: '1000000000000000000'
  },
  to: {
    chainId: 2020,
    tokenAddress: '0x...', 
  },
  config: {
    slippageBps: 100,     
    tradeType: 'exact_in' 
  }
};

const quote = await paymentService.getQuote(quoteParams);
```

### Execute Transaction

```typescript
import { createWalletClient, custom } from 'viem';

// Create a wallet client using viem
const walletClient = createWalletClient({
  chain: mainnet,
  transport: custom(window.ethereum)
});

// Execute the transaction using the quote
await paymentService.executeTransaction(
  quote.data.bestQuote,
  walletClient,
  (progress) => {
    console.log('Transaction progress:', progress);
  }
);
```

### Get Token Balances

```typescript
const balances = await paymentService.getTokens({
  chainId: 1,
  userAddress: '0x...',
  tokenAddresses: ['0x...', '0x...']
});
```

## API Reference

### PaymentService

#### Constructor
```typescript
constructor(configs: PaymentServiceConfigs)
```
- `configs.chains`: Array of supported blockchain chains (viem Chain objects)

#### Methods

##### getQuote
```typescript
async getQuote(params: QuoteParams): Promise<QuoteResponse>
```
Generates a quote for token exchange across chains.

##### executeTransaction
```typescript
async executeTransaction(
  quote: Quote,
  walletClient: WalletClient,
  onProgress?: (data: ProgressData) => void
)
```
Executes a cross-chain transaction based on the provided quote.

##### getTokens
```typescript
async getTokens(params: GetTokenBalanceParams): Promise<TokenBalance[]>
```
Retrieves token balances for a given user address.

## Development

```bash
# Install dependencies
yarn install

# Build the package
yarn build

# Run tests
yarn test
```
npm package: @sky-mavis/tanto-connect
Description: Tanto Connect
Author: SkyMavis
Latest version: 0.0.22

# Tanto connect

## Installation

With yarn

```
yarn add @sky-mavis/tanto-connect
```

With npm

```
npm install @sky-mavis/tanto-connect
```

## Usage

### Tanto Connectors

#### EIP-6963 Injected Connectors

```javascript
import { ConnectorEvent, IBaseConnector, IConnectResult, requestInjectedConnectors, requestRoninWalletConnector } from '@sky-mavis/tanto-connect';

const injectedConnectors = await requestInjectedConnectors();
// Find Ronin Wallet connector
const roninWaletConnector = injectedConnectors.find(connector => connector.isRonin);

// Request Ronin Wallet Connector only
const roninConnector = await requestRoninWalletConnector();
roninConnector.on(ConnectorEvent.CONNECT, onConnect);
roninConnector.on(ConnectorEvent.ACCOUNTS_CHANGED, onAccountChanged);
roninConnector.on(ConnectorEvent.CHAIN_CHANGED, onChainChanged);
roninConnector.on(ConnectorEvent.DISCONNECT, () => setIsConnected(false));
roninConnector.autoConnect();
```

#### Ronin Wallet Connect connector
    
```javascript
const wcOptions = {
  projectId: 'd2ef97836db7eb390bcb2c1e9847ecdc',
  metadata: {
    name: 'New Ronin Wallet',
    description: 'New Ronin Wallet',
    icons: ['https://cdn.skymavis.com/skymavis-home/public//homepage/core-value.png'],
    url: 'https://wallet.roninchain.com',
  },
};

const roninWalletConnectConnector = await requestRoninWalletConnectConnector({ providerOptions: wcOptions });
roninWalletConnectConnector.on(ConnectorEvent.CONNECT, onConnect);
roninWalletConnectConnector.on(ConnectorEvent.ACCOUNTS_CHANGED, onAccountChanged);
roninWalletConnectConnector.on(ConnectorEvent.CHAIN_CHANGED, onChainChanged);
roninWalletConnectConnector.on(ConnectorEvent.DISPLAY_URI, uri => setUri(uri));
roninWalletConnectConnector.on(ConnectorEvent.DISCONNECT, async () => {
  setUri(null);
  setIsConnected(false);
  roninWalletConnectConnector.connect(202601);
});
roninWalletConnectConnector.connect(202601);
```


#### Waypoint Connector

```javascript
import { requestWaypointConnector, ChainIds } from '@sky-mavis/tanto-connect';

const waypointProviderConfigs = {
  clientId: "",
  chainId: ChainIds.RoninMainnet,
};
// Use your own connector config if needed, if not, we recommend you should leave it as default.
const waypointConnectorConfigs = {};

const waypointConnector = requestWaypointConnector(
  { 
    connectorConfigs: waypointConnectorConfigs,
    providerConfigs: waypointProviderConfigs 
  }
);
```
npm package: @sky-mavis/tanto-wagmi
Description: Tanto Wagmi
Author: SkyMavis
Latest version: 0.0.11
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# TantoKit Wagmi

## Installation

With yarn

```
yarn add @sky-mavis/tanto-wagmi
```

With npm

```
npm install @sky-mavis/tanto-wagmi
```

## Usage

### Create Config
Create and export a new Wagmi config using createConfig where chains and transports are set up for the Ronin and Saigon network.

To connect to Ronin Wallet and Ronin Waypoint, use the **roninWallet()** and **waypoint()** connectors. For waypoint, you need to pass specific configuration parameters as required by the Waypoint SDK (Check the [Ronin Waypoint Web SDK](https://docs.skymavis.com/mavis/ronin-waypoint/reference/web-sdk) for details.).


```javascript
import { roninWallet, waypoint } from '@sky-mavis/tanto-wagmi';
import { ronin, saigon } from 'viem/chains';
import { createConfig, http } from 'wagmi';

export const config = createConfig({
    chains: [ronin, saigon],
    transports: {
        [ronin.id]: http(),
        [saigon.id]: http(),
    },
    multiInjectedProviderDiscovery: false,
    connectors: [roninWallet(), waypoint(waypointConfigs)],
})
```

### Using Wagmi Providers

```javascript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';

const queryClient = new QueryClient();

const App = () => (
    <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
            <YourComponent />
        </QueryClientProvider>
    </WagmiProvider>
);
```

### Using Wagmi Hooks
```javascript
import { useAccount, useConnect, useDisconnect, useSignMessage } from 'wagmi';
import { Button } from '@nextui-org/react';

const YourComponent = () => {
    const { connect, connectors } = useConnect();

    return (
        <div>
            {connectors.map((connector) => (
                <Button onClick={() => connect({ connector })} key={connector.id}>
                    Connect to {connector.name}
                </Button>
            ))}
        </div>
    );
};
```
npm package: @sky-ring/orbit
Description: Mini TON Blockchain Server
Author: Amin Rezaei
Latest version: 0.1.2

<img align="left" width="64" height="64" src="https://github.com/sky-ring/orbit/blob/main/assets/orbit.png">

# Orbit

[![PyPI version](https://img.shields.io/badge/@sky-ring/orbit-0.1.2-informational?style=flat-square&color=FFFF91&labelColor=360825)](https://www.npmjs.com/package/@sky-ring/orbit)

Orbit is a GraphQL server wrapper around `@ton-community/sandbox`, designed to provide a mini TON Blockchain Server. Its purpose is to offer an easily launchable Blockchain environment (similar to `testnet`) for seamless and thorough project testing before deploying to `mainnet`. The Rift framework will leverage Orbit to provide a multi-contract testing framework for TON development.

### Why Use Orbit?

While Sandbox itself is a valuable tool, it lacks direct persistence of Blockchain state and transactions, and is primarily tailored for `node.js` environments. Orbit serves as a complementary tool, addressing these limitations by providing enhanced functionalities. As a local server, it ensures privacy and offers maximum flexibility before the project's initial launch on `testnet` or `mainnet`.

### What's Next?

Currently, Orbit provides a GraphQL server for making calls. We have plans to support `ton-api-v4`, which will minimize code changes required during integration.

## How to Use

To get started with Orbit, follow these steps:

1. Ensure you have a node environment set up.
2. Install Orbit globally by running the following command:

   ```bash
   npm install -g @sky-ring/orbit
   ```

3. Open up a terminal and type:

   ```bash
   orbit
   ```

If everything is okay, you will see a successful launch message.

4. You can now send GraphQL queries to `localhost:29194` or navigate to the GraphiQL page at `localhost:29194/graphql`.

## GraphQL Definitions

Here are the GraphQL definitions for `Query` and `Mutation` along with brief descriptions:

```graphql
type Mutation {
  spawn(id: String!): Boolean # Launches a blockchain instance with the specified ID
  sendBoc(id: String!, boc64: String!): [Tx] # Sends a BOC message to the specified network
  bringDown(params: BringDownInput!): Boolean # Shuts down a blockchain instance with removal capability
  createWallet(id: String!, walletId: String!, balance: String!): String # Creates a wallet with the specified name on the network with the given balance
  charge(id: String!, address: String!, value: String!): Boolean # Tops up the balance for the specified account on the network
}

type Query {
  version: Version # Retrieves the version of Orbit
  snapshots: [String] # Retrieves the list of stored snapshots of blockchains
  account(id: String!, address: String!): AccountInfo # Retrieves account information for the specified ID and address
}
```

Feel free to explore and utilize these GraphQL endpoints to interact with the Orbit server.