open-index/open-npm huggingface dataset:
npm package: @juo/visual-intersection-observer
Description: [![npm](https://img.shields.io/npm/v/@juo/visual-intersection-observer)](https://www.npmjs.com/package/@juo/visual-intersection-observer)
Latest version: 0.1.1

# Visual Intersection Observer

[![npm](https://img.shields.io/npm/v/@juo/visual-intersection-observer)](https://www.npmjs.com/package/@juo/visual-intersection-observer)

<img alt="Visual vs Layout Viewport" src="resources/visual-layout-viewport.png" width="105">

## Problem

There is a great [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) that allows (among others) to observe if website elements are present in the viewport or not. The missing part in that API is that one can never use [Visual Viewport](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport) as the root for the `IntersectionObserver`. At the time of writing, there is an open discussion regarding this issue [here](https://github.com/w3c/IntersectionObserver/issues/95).

So, in other words, `IntersectionObserver` works great as long as the user does not zoom the website in or out. As soon as this happens, the intersections reported by the `IntersectionObserver` are invalid.

## Solution

A `Visual Intersection Observer` that acts as a wrapping utility for the `Intersection Observer`, which modifies the `rootMargin` appropriately to the `Visual Viewport`.

Here's the [demo](https://juo.github.io/visual-intersection-observer/) to see it in action.


| Layout Viewport | Visual Viewport | Both |
| - | - | - |
| ![Layout Viewport](resources/layout.png) | ![Visual Viewport](resources/visual.png) | ![Both](resources/both.png) |

## Getting started

### Installation

With a package manager:

```
npm install @juo/visual-intersection-observer
```

CDN:

```
<script src="https://unpkg.com/@juo/visual-intersection-observer"></script>
```

### Usage

`Visual Intersection Observer` works just like the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) with one caveat: you can't specify `root` option.

```
# ESM
import { VisualIntersectionObserver } from '@juo/visual-intersection-observer';

# UMD
const { VisualIntersectionObserver } = window['visual-intersection-observer'];

// Create an observer that logs entries to the console
const ob = new VisualIntersectionObserver((entries) => {
  console.log(entries);
});

// Observe an element
ob.observe(document.getElementById('foo'));
```

## Known issues

- When the document width is larger than the viewport, the intersection is not computed properly on mobile devices.
- Chrome and Firefox on mobile sometimes report an incorrect width/height of the Visual Viewport
npm package: @juona/node-raw-loader
Description: Import any file as a string into NodeJS
Author: juona
Latest version: 1.0.0

# Motivation

I created this little script to help me import my GraphQL type definitions into NodeJS as strings. This allowed me to keep all GraphQL declarations in `.graphql` files.

I later realized that I could use this code to import just about any file as a raw string into my code.

# Usage

Pass the extensions of the files you wish to raw-import to the utility function:

	require("node-raw-loader")(".graphql", ".gql", ".svg");

or:

	import rawLoader from "./raw-file-loader";
	rawLoader(".graphql", ".gql", ".svg");

Say you have a `.graphql` file like this:

	type Product {
	  title: String!
	  price: NonNegativeInt!
	}

	extend type Query {
	  product(productID: ID!): Product
	}

You can now import it as a string into your NodeJS code:

	import schema from "./product.schema.graphql"; // imports the schema as a string
	console.log(schema); // prints the schema
npm package: @jup-ag/api
Description: ## Generate typescript types from swagger schema
Latest version: 6.0.48

# JavaScript API Client for Jupiter V6

## Table of Contents

- [Installation](#installation)
- [Developing](#developing)
- [Usage](#usage)
- [Examples](#examples)
  - Paid Hosted APIs (Deprecated and will not be supported, reach out in Discord for more information)

## Installation

To use the Jupiter API client, you need to have Node.js and npm (Node Package Manager) installed. Then, you can install the package using npm:

```bash
npm install @jup-ag/api
```

## Developing

- pnpm dev-quote
  - Get request a quote based on mints and amount
- pnpm dev-swap
  - Post request with the quote response to receive the swap transaction to sign and send to the network
  - Ensure you have setup `process.env.PRIVATE_KEY` to sign
 
- Please set up `process.env.API_KEY` if you have a Pro plan via https://portal.jup.ag/

Refer to our developer documentation for more information and tips:
- Swap API: https://dev.jup.ag/docs/swap-api
- API Key setup: https://dev.jup.ag/docs/api-setup

## Usage

To start using the API client, you need to require it in your Node.js project:

```typescript
import { createJupiterApiClient } from '@jup-ag/api';

const jupiterQuoteApi = createJupiterApiClient(config); // config is optional such as api key
```

Now, you can call methods provided by the API client to interact with Jupiter's API. For example:

```typescript
jupiterQuoteApi.quoteGet({
    inputMint: "So11111111111111111111111111111111111111112",
    outputMint: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
    amount: "100000000",
    slippageBps: 100,
})
```

## Examples

Checkout the [example in the repo](/example/index.ts).
npm package: @jup-ag/core
Description: ![1*cXNgzu0Pvj4HwOLw4Akwqg](https://user-images.githubusercontent.com/34560707/145749257-e48cb199-521b-476e-9d81-f79bb45ef834.png)
Author: zhengyutay
Latest version: 4.0.0-beta.21
Deprecated: Jupiter core library is deprecated. The new API client is @jup-ag/api https://docs.jup.ag/api-v6

# Jupiter Aggregator Core typescript library

![1*cXNgzu0Pvj4HwOLw4Akwqg](https://user-images.githubusercontent.com/34560707/145749257-e48cb199-521b-476e-9d81-f79bb45ef834.png)

<p align="center">
  <a href="https://jup.ag">Jupiter Aggregator (jup.ag)</a>
  <br/>
  The best swap aggregator on Solana.  Built for smart traders who like money.
</p>
<br/>

This repo is Jupiter Core SDK.


## Example
For Node, or build your own lib, use [Jupiter Core Example](https://github.com/mercurial-finance/jupiter-core-example)
## Integrate with React instead?
The quickest way to integrate Jupiter with your UI, use [Jupiter React Hook instead](https://www.npmjs.com/package/@jup-ag/react-hook)
## React Native?
Checkout [Jupiter React Native Example](https://github.com/mercurial-finance/jupiter-react-native)


# Installation

Yarn
```
yarn add @jup-ag/core
```

NPM
```
npm install @jup-ag/core
```

<br/>
<hr/>
<br/>

### Jupiter.load()
```
Initialize and load Jupiter instances
```

### jupiter.getRouteMap()
```
Get routeMap, which maps each tokenMint and their respective tokenMints that are swappable
```

### jupiter.computeRoutes()
```
Request Jupiter to compute the requested inputToken and outputToken, to query possible pairs, routes, amounts, slippage and more information.
```
npm package: @jup-ag/crema-sdk
Description: the front sdk for crema swap
Latest version: 2.0.7

## Install:

```
npm i @cremafinance/crema-sdk
```

## Build:

```
npm run build
```

## Instructions:

```
import { TokenSwap } from '@cremafinance/crema-sdk'
const swap = await new TokenSwap(conn, swapProgramId, swapKey, null).load()
const amountOut: any = await swap.preSwapA(amountIn) // a->b
const amountOut: any = await swap.preSwapB(amountIn) // b->a
```

## Parameters Description：

```
amountIn: Decimal (using decimal.js repo)
```


## Liquidity Calculation Formula

Assuming the current price is $P_{c}$，the price range that users add liquidity in is $[P_{a},P_{b}]$

$
\LARGE
L = \begin {cases}
    ¦   {Δx} \over {1 \over {\sqrt{P_{a}}}} -  {1 \over {\sqrt{P_{b}}}} &, \text P_{c} < P_{a} \\    \
    ¦   {Δy} \over {\sqrt{P_{b}} - \sqrt{P_{a}}} &, \text P_{c} > P_{b}\\
    ¦   {{Δx} \over {1 \over {\sqrt{P_{c}}}} -  {1 \over {\sqrt{P_{b}}}}} = {{Δy} \over {\sqrt{P_{c}} - \sqrt{P_{a}}}} &, \text P_{c} \in [P_{a},P_{b}]  \\    \
    \end {cases}
$
npm package: @jup-ag/cykura-sdk-core
Description: ⚒️ An SDK for building applications on top of Cykura
Latest version: 0.1.8

# Cykura SDK Core

## Points of interest

### Utils

- [sqrt calculation for a JSBI big number](./src/utils/sqrt.ts)
- [Compute price impact](./src//utils/computePriceImpact.ts)
- []()
npm package: @jup-ag/lend
Description: ```sh npm install @jup-ag/lend ```
Latest version: 0.1.9

# @jup-ag/lend

## Installation

```sh
npm install @jup-ag/lend
```

## Usage

#### Earning

```ts
import { getDepositIxs, getWithdrawIxs } from "@jup-ag/lend/earn";

const connection = new Connection("https://api.mainnet-beta.solana.com");
const signer = new PublicKey("signerAddress");
const usdc = new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v");

const { ixs: depositIxs } = await getDepositIxs({
  amount: new BN(1000000),
  asset: usdc,
  signer,
  connection,
});

const { ixs: withdrawIxs } = await getWithdrawIxs({
  amount: new BN(10000),
  asset: usdc,
  signer,
  connection,
});
```

#### Borrowing

```ts
import { getOperateIx } from "@jup-ag/lend/borrow";

const connection = new Connection("https://api.mainnet-beta.solana.com");
const signer = new PublicKey("signerAddress");

const { ixs, addressLookupTableAccounts } = await getOperateIx({
  vaultId: 1,
  positionId: 0,

  colAmount: new BN(1000000),
  debtAmount: new BN(1000),

  signer,
  connection,
});
```

#### API

```ts
import { Client } from "@jup-ag/lend/api";

const client = new Client(); // or new Client({ apiKey: "my-api-key" });

const lendingTokens = await client.earn.getTokens();
```
npm package: @jup-ag/merkle-distributor-sdk
Description: Merkle distributor SDK
Latest version: 0.0.3

# Merkle Distributor SDK

## Installing

```
npm i @jup-ag/merkle-distributor-sdk
```

## How to use

1. Initialize MerkleDistributor instance

```ts
import MerkleDistributor from '@jup-ag/merkle-distributor-sdk';
import { PublicKey } from '@solana/web3.js';
import { AnchorProvider, web3 } from '@coral-xyz/anchor';
import { Connection } from '@solana/web3.js';

const mainnetConnection = new Connection('https://api.mainnet-beta.solana.com');
const mockWallet = new Wallet(new Keypair());
const provider = new AnchorProvider(mainnetConnection, mockWallet, {
  commitment: 'confirmed',
});

const merkleDistributor = new MerkleDistributor(provider, {
  targetToken: new PublicKey(TARGET_TOKEN), // the token to be distributed.
  claimProofEndpoint: 'https://worker.jup.ag/jup-claim-proof',
});
```

2. To claim token with MerkleDistributor

```ts
const ixs = await merkleDistributor.claimToken(publicKey);
const { blockhash, lastValidBlockHeight } = await connection.getLatestBlockhash('confirmed');
let transaction = new Transaction({
  feePayer: publicKey,
  blockhash,
  lastValidBlockHeight,
}).add(...ixs);

transaction = await wallet.signTransaction(transaction);

const rawTransaction = transaction.serialize();
const txid = await connection.sendRawTransaction(rawTransaction, {
  skipPreflight: true,
});
```

3. To get claim status of a user

```ts
const claimStatus = await merkleDistributor.getClaimStatus(publicKey);
const amount = claimStatus?.amount;
const isClaimed = claimStatus?.isClaimed;
```