open-index/open-npm huggingface dataset:
npm package: @minsulaiman/image-watcher
Description: Track image loading with Alpine.js like a hunter!
Author: GoodM4ven
Latest version: 1.0.1

<div align="center">
    بسم الله الرحمن الرحيم
</div>

# Image Watcher

Track image loading with Alpine.js like a hunter!

### Description

This package creates an Alpine.js [directive](https://alpinejs.dev/advanced/extending#custom-directives), which one could use to do *stuff* **when** images are loaded.

We start off by defining an alpine.js object variable with `isLoaded` property set to `false`. Then apply the `x-image-watcher` custom directive to the `<img>` element directly **or to a parent element that contains an `<img>` element** within...

And when the image is loaded, the `imageWatcher` associated with it - as an example of our object variable - would have its `isLoaded` property set to **`true`**.

An example code for the [TALL Stack](https://tallstack.dev) would be something like this:

```html
<div
    x-data="{ imageWatcher: { isLoaded: false } }"
    x-image-watcher="imageWatcher"
>
    <img
        src="{{ asset('images/cool-image.png') }}"
        alt="cool image"
    >

    <span
        x-cloak
        x-show="imageWatcher.isLoaded"
        x-transition
    >
        The image is loaded! No way!
    </span>

    <!-- A timed example too! -->
    <span
        x-data="{ show: false }"
        x-effect="
            if (imageWatcher.isLoaded) {
                setTimeout(() => show = true, 1000);
            }
        "
        x-cloak
        x-show="show"
        x-transition
    >
        Wait a second...!
    </span>
</div>
```


## Installation

Again, since this is an Alpine.js directive, we need that awesomeness installed first!

### Requirements

- [Alpine.js](https://alpinejs.dev)

### Steps

1. Install the package via NPM:

   ```bash
   npm install @minsulaiman/image-watcher
   ```

2. Compile your `app.js` after adding an Alpine.js plugin like this:

   ```js
   ...
   import Alpine from 'alpinejs';
   import imageWatcher from '@minsulaiman/image-watcher';

   Alpine.plugin(imageWatcher);

   Alpine.start();
   ...
   ```


## Development

If you like the package, you know how to **p**ull-**r**equest! 🙂

### TODOs

- Write [Cypress](https://cypress.io) tests! 🙂


## Remarks

Please do 🌟 all the packages you rely on, but NOT this one. 😍


<div align="center">
    <br>والحمد لله رب العالمين
</div>
npm package: @minswap/blockfrost-adapter
Description: Query Minswap data from Blockfrost
Author: Minswap Labs
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Minswap Blockfrost Adapter

## Features

- [x] Get current pair price
- [x] Get historical pair price
- [x] Calculate trade price
- [x] Calculate price impact
- [ ] Create orders and submit to Blockfrost

## Install

- NPM: `npm install @minswap/blockfrost-adapter`
- Yarn: `yarn add @minswap/blockfrost-adapter`

## Examples

### Example 1: Get current price of MIN/ADA pool

```ts
import { BlockfrostAdapter, NetworkId } from "@minswap/blockfrost-adapter";

const api = new BlockfrostAdapter({
  projectId: "<your_project_id>",
  networkId: NetworkId.MAINNET,
});
for (let i = 1; ; i++) {
  const pools = await api.getPools({
    page: i,
    poolAddress: POOL_ADDRESS_LIST[NetworkId.MAINNET][0],
  });
  if (pools.length === 0) {
    // last page
    break;
  }
  const minADAPool = pools.find(
    (p) =>
      p.assetA === "lovelace" &&
      p.assetB ===
        "29d222ce763455e3d7a09a665ce554f00ac89d2e99a1a83d267170c64d494e"
  );
  if (minADAPool) {
    const [a, b] = await api.getPoolPrice({ pool: minADAPool });
    console.log(
      `ADA/MIN price: ${a.toString()}; MIN/ADA price: ${b.toString()}`
    );
    // we can later use this ID to call getPoolById
    console.log(`ADA/MIN pool ID: ${minADAPool.id}`);
    break;
  }
}
```

### Example 2: Get historical prices of MIN/ADA pool

```ts
import { BlockfrostAdapter, NetworkId } from "@minswap/blockfrost-adapter";

const MIN_ADA_POOL_ID =
  "6aa2153e1ae896a95539c9d62f76cedcdabdcdf144e564b8955f609d660cf6a2";

const api = new BlockfrostAdapter({
  projectId: "<your_project_id>",
  networkId: NetworkId.MAINNET,
});
const history = await api.getPoolHistory({ id: MIN_ADA_POOL_ID });
for (const historyPoint of history) {
  const pool = await api.getPoolInTx({ txHash: historyPoint.txHash });
  if (!pool) {
    throw new Error("pool not found");
  }
  const [price0, price1] = await api.getPoolPrice({
    pool,
    decimalsA: 6,
    decimalsB: 6,
  });
  console.log(`${historyPoint.time}: ${price0} ADA/MIN, ${price1} MIN/ADA`);
}
```
npm package: @minswap/cardano-serialization-lib-browser
Description: (De)serialization functions for the Cardano blockchain along with related utility functions
Author: EMURGO
Latest version: 11.1.0-minswap.33

### How to Build and Use

1. Update the code.
2. Add, update, or fix tests.
3. Run `cargo build && cargo test`.
4. Build the Docker image:
  ```sh
  docker build -t minswap-csl .
  ```
5. Run Docker Compose:
  ```sh
  docker compose up -d --build
  ```
6. Execute into the Docker container to build the Node.js SDK:
  ```bash
  # Execute into the Docker container
  docker exec -it ${CONTAINER_ID} /bin/bash
  # Build Rust
  cargo build
  # Change directory back to root
  cd ..
  # Install npm dependencies
  npm install
  # Build Node.js SDK
  npm run rust:build-nodejs
  # Exit Docker
  ```
7. The final build is stored on your local machine at `./rust/pkg` due to mounting `.:/usr/src/app`.
npm package: @minswap/cardano-serialization-lib-nodejs
Description: (De)serialization functions for the Cardano blockchain along with related utility functions
Author: EMURGO
Latest version: 11.1.0-minswap.33

### How to Build and Use

1. Update the code.
2. Add, update, or fix tests.
3. Run `cargo build && cargo test`.
4. Build the Docker image:
  ```sh
  docker build -t minswap-csl .
  ```
5. Run Docker Compose:
  ```sh
  docker compose up -d --build
  ```
6. Execute into the Docker container to build the Node.js SDK:
  ```bash
  # Execute into the Docker container
  docker exec -it ${CONTAINER_ID} /bin/bash
  # Build Rust
  cargo build
  # Change directory back to root
  cd ..
  # Install npm dependencies
  npm install
  # Build Node.js SDK
  npm run rust:build-nodejs
  # Exit Docker
  ```
7. The final build is stored on your local machine at `./rust/pkg` due to mounting `.:/usr/src/app`.
npm package: @minswap/felis-uplc-node
Description: - `cargo install wasm-pack` - `wasm-pack build -s minswap -t web --release -d web && wasm-pack build -s minswap -t nodejs --release -d node && node build.js`
Latest version: 0.1.0

## Build

- `cargo install wasm-pack`
- `wasm-pack build -s minswap -t web --release -d web && wasm-pack build -s minswap -t nodejs --release -d node && node build.js`
npm package: @minswap/felis-uplc-web
Description: - `cargo install wasm-pack` - `wasm-pack build -s minswap -t web --release -d web && wasm-pack build -s minswap -t nodejs --release -d node && node build.js`
Latest version: 0.1.0

## Build

- `cargo install wasm-pack`
- `wasm-pack build -s minswap -t web --release -d web && wasm-pack build -s minswap -t nodejs --release -d node && node build.js`