open-index/open-npm huggingface dataset:
npm package: @sc1/subgraph
Description: - open `packages/subgraph/lib/graph-node/docker/docker-compose.yml` - change line 20 `ethereum: 'mainnet:http://host.docker.internal:8545'` to `ethereum: 'avalanche:http://host.docker.internal:8545'` - change the image to `image: graphprotocol/graph-node:
Latest version: 0.31.0

## To run subgraph local development on avalanche

- open `packages/subgraph/lib/graph-node/docker/docker-compose.yml`
- change line 20 `ethereum: 'mainnet:http://host.docker.internal:8545'` to `ethereum: 'avalanche:http://host.docker.internal:8545'`
- change the image to `image: graphprotocol/graph-node:c724404` to prevent errors from custom solidity errors.

run `yarn fork avalanche --hostname 0.0.0.0`

run `yarn c:export` to update contract.json file

`cd packages/subgraph/lib/graph-node/docker` and `docker-compose up`

if using `fork:fresh avalanche`, you'll need to copy & paste the address that SectorVaultFactory is deployed to into `packages/subgraph/config/avalanche.js`

if you're testing timelock you'll also want to update that address in the same file.

then set process.env.PUBLIC_SUBGRAPH = 'localhost'

`cd packages/subgraph` and `yarn codegen:avalanche && yarn create-local && yarn deploy-local` and press enter to skip version number

there will be an explorer at http://localhost:8000/subgraphs/name/sector-fi/sector-localhost/graphql
npm package: @sc2/convertbalancedata
Description: Library to convert StarCraft 2 exported balance data XML files to JSON.
Author: Matt Mazzola
Latest version: 0.0.7

# sc2-convertbalancedata
Library to convert StarCraft 2 exported balance data XML files to JSON.

```
npm start -- [XML input folder path] [output JSON file path]
```
Defaults to `./balancedata` `./balancedata.json`

Example:
```
npm start -- ./balancedata ./balancedata2.json
```
npm package: @sc2/extractor
Description: Extract features from a phrase and resolve to answers. E.g. Barracks cost? 150 minerals.
Author: Matt Mazzola
Latest version: 1.1.0

# SC2INFO Question Extractor

Given a string, extract units, buildings, and weapons to correlate with an question

Full scenario it will be used a component in twitch bot and receive message and translate to request for question to return an answer.

This will attempt extract sc2 related information from text messages. This will allow them to be associated with questions which can be answered with discrete values from the SC2INFO api.

Example: "How much does a marine cost?"
Answer: 

```
A marine costs: 50 minerals

http://sc2info.com/units/marine
```

It's important to restate what the bot interpreted such as "A marine costs...." so the user can determine if the answer is related and know to re-ask in a different way.

## Getting Started

Sample Code

```typescript
import sc2extractor from '@sc2/extractor'

function answerQuestion(question: string) {
    const extraction = await sc2extractor(question)
    return extraction.answer
}
```

## Considerations

Due to the large amount of message being processed making requests to LUIS seems unpractical.
Perhaps use this as preprocess and LUIS for those who pass through first stage.

## References

- [Code Sandbox](https://codesandbox.io/s/practical-water-ghf1n?file=/src/index.ts)
- [Fuse.js](https://fusejs.io/api/options.html)
npm package: @sc2pepe/sequelize-datatables
Description: Fork from Server-side datatables with sequelize
Author: Pepe Juárez
Latest version: 3.0.3
Deprecated: false

Sequelize Datatables
====================

Server-side datatables with Sequelize.

#### Support

* Node.js v7.6 & later
* Sequelize v5

#### Instalation

```
npm install sequelize-datatables
```

#### API

```js
datatable(
  model: SequelizeModel required,
  config: Object required,
  params: Object,
  options: Object
) -> Promise<Object>
```

This function takes three arguments to produce output for datatables.

* `model` - `required` - is the sequelize model.
* `config` - `required` - is config sent by jQuery datatables to our server.
* `params` - options for sequelize query.
* `options` - library specific options. See below


**Options**

* `caseInsensitive: Boolean` - A flag for postgresql dialec. If this is set to `true`, `ILIKE` will be used instead of `LIKE` Default to `false`.
* `replaceRegexp` - A workaround in case dialect does not support native regex, but you need to search for list of exact matches, passed as regex expression, `^((?!debug|info.*)$`. See working example: http://live.datatables.net/kopafape/1/edit

#### Example Usage

```js
const datatable = require(`sequelize-datatables`);
const model = require(`./path/to/sequelize-model`); // Sequelize model

// assuming you are using express

route.get(`/datasource`, (req, res) => {
  datatable(model, req.query, {})
    .then((result) => {
      // result is response for datatables
      res.json(result);
    });
});
```

#### Todo

 - [X] Test with postgresql database
 - [X] Test with mysql database
 - [X] Test with sqlite database
 - [X] Support global search
 - [X] Support individual column search
 - [X] Support nested relation search & ordering
 - [ ] Test with another database server (mssql)
 - [X] More tests!

#### Testing

You must have docker installed on your system if you want to test this module on your machine.

```bash
git clone https://github.com/alwint3r/sequelize-datatable-node.git
cd sequelize-datatable-node
npm install

# It's recommended to test this library using dockerized database engine
DIALECT=mysql npm run test:setup

# or

DIALECT=postgres npm run test:setup

# on another terminal, enter command
DIALECT=postgres npm test

# or

DIALECT=mysql npm test
```
npm package: @sc4p/nextjs-template
Description: This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
Latest version: 1.0.2

This is a [Next.js](https://nextjs.org/) template bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
and allready includs tailwindcss.

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Based on Next.js

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Added Tailwindcss

To learn more about Tailwindcss, take a look at the following resources:

- [Tailwindcss Documentation](https://tailwindcss.com/docs/installation) - get started with tailwindcss
- [Tailwindcss Playground](https://play.tailwindcss.com/) - play with tailwindcss before installing

Also check out [the tailwindcss GitHub repository](https://github.com/tailwindlabs/tailwindcss) - for help by the community
npm package: @sc4p/nextjs-typescript-template
Description: This is a [Next.js](https://nextjs.org/) template bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) and allready includs tailwindcss.
Latest version: 1.0.1

This is a [Next.js](https://nextjs.org/) template bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
and allready includs tailwindcss.

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Based on Next.js

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Added Tailwindcss

To learn more about Tailwindcss, take a look at the following resources:

- [Tailwindcss Documentation](https://tailwindcss.com/docs/installation) - get started with tailwindcss
- [Tailwindcss Playground](https://play.tailwindcss.com/) - play with tailwindcss before installing

Also check out [the tailwindcss GitHub repository](https://github.com/tailwindlabs/tailwindcss) - for help by the community
npm package: @scads-io/eslint-config
Description: Eslint config for Scads
Author: RabbitDoge
Latest version: 1.2.1

# eslint-config

Scads Eslint config with:

- Airbnb config
- Typescript
- Prettier

## Usage

```
npx install-peerdeps --dev @scads-io/eslint-config
```

Add `"extends": "@scads-io/eslint-config"` to your eslint config file.
npm package: @scads-io/uikit
Description: Set of UI components for scads projects
Latest version: 0.4.4

# Scads UIkit

Scads UIkit is a set of React components and hooks used to build pages on Scads's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @scads/uikit`

## Setup

### Theme

Before using Scads UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@scads/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@scads/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.
npm package: @scads/sdk
Description: 🛠 An SDK for building applications on top of ScadsSwap.
Latest version: 0.0.1

# Zoinkswap SDK

Forked from the [Uniswap SDK](https://github.com/Uniswap/uniswap-v2-sdk/commit/a88048e9c4198a5bdaea00883ca00c8c8e582605).

You can refer to the Uniswap SDK documentation [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/zoinksDAO/zoinks-swap-sdk.git
```

Move into the zoinksswap-sdk working directory

```sh
cd zoinksswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @scads/uikit
Description: Set of UI components for scads projects
Latest version: 0.4.0

# Scads UIkit

Scads UIkit is a set of React components and hooks used to build pages on Scads's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @scads/uikit`

## Setup

### Theme

Before using Scads UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@scads/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@scads/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.
npm package: @scaff/plugin
Description: > 1. a plugin use in vite > 2. please use with @scaff/vue
Author: joenix
Latest version: 3.2.3

# @scaff/plugin

> 1. a plugin use in vite
> 2. please use with @scaff/vue

## install

```sh
yarn add -D @scaff/plugin
```

## use

```js
// vite.config.js

import scaffPlugin from '@scaff/plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue(), scaffPlugin()],
});
```
npm package: @scaff/umd
Description: A package for UMD Build in Scaff by UMD Mode
Author: joenix
Latest version: 3.7.44

# @scaff/umd

A package for UMD Build in Scaff by UMD Mode

## 1. Install

```sh
npm i @scaff/umd
# or
yarn add @scaff/umd
```

## 2. How to Use ?

> /index.js

```js
// Use Vue Scaff UMD
import { createRegister } from '@scaff/umd';

// Get Entry
import entry from './index.vue';

// Get Store - Scaff Store
import store from './store.js';

// Set Register
const register = createRegister(entry, store);

// Exporting as Program
export default register((app, { name, $store, $router, module }) => {
  // Register Store
  $store.registerModule(name, module);

  // Register Component
  app.component(name, entry);

  // Register Route
  $router.addRoute({
    path: `/${name}`,
    name,
    component: entry,
  });
});
```
npm package: @scaff/vite-plugin-node
Description: > 1. a plugin use in vite > 2. please use with @scaff/vue
Author: joenix
Latest version: 3.7.44

# @scaff/vite-plugin-node

> 1. a plugin use in vite
> 2. please use with @scaff/vue

## install

```sh
yarn add -D @scaff/vite-plugin-node
```

## use

```js
// vite.config.js

import scaffPlugin from '@scaff/vite-plugin-node';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue(), scaffPlugin()],
});
```

2020.4
npm package: @scaff/vue-cli-plugin-node
Description: > a plugin use in vue-cli > base config merge by @scaff/vue
Author: joenix
Latest version: 3.7.44

# @scaff/vue-cli-plugin-node

> a plugin use in vue-cli
> base config merge by @scaff/vue

## install

```sh
yarn add -D @scaff/vue-cli-plugin-node
```

## use

```js
// scaff.conf.js

module.exports = {};
```

2020.4
npm package: @scaffdog/core
Description: @scaffdog/core is a low layer of scaffdog.
Author: wadackel
Latest version: 4.1.0

# @scaffdog/core

`@scaffdog/core` is a low layer of scaffdog.

## Install

Install via npm:

```bash
$ npm install @scaffdog/core
```

## Usage

**template.md:**

````markdown
# Variables

- key: `{{ input | upper }}`

# `{{ input }}.txt`

```
{{ output.path }}
```
````

**index.ts:**

```typescript
import fs from 'fs';
import path from 'path';
import { createContext, compile } from '@scaffdog/engine';
import { extract } from '@scaffdog/core';

const source = fs.readFileSync('template.md', 'utf8');
const context = createContext({});

const { variables, templates } = extract(source, context);

for (const [key, ast] of variables) {
  context.variables.set(key, compile(ast, context));
}

for (const template of templates) {
  const filename = compile(template.filename, context);

  const data = compile(
    template.content,
    extendContext({
      variables: new Map([
        [
          'output',
          {
            path: filename,
          },
        ],
      ]),
    }),
  );

  fs.writeFileSync(filename, data);
}

// --> Generated "path/to/scaffdog.txt"
```
npm package: @scaffdog/error
Description: A utility module of scaffdog error.
Author: wadackel
Latest version: 4.1.0

# @scaffdog/error

A utility module of scaffdog error.

## Install

Install via npm:

```bash
$ npm install @scaffdog/error
```

## Usage

```typescript
import { error } from '@scaffdog/error';

const e = error('unexpected token', {
  source: 'text {{ ] }}',
  loc: {
    start: { line: 1, column: 9 },
    end: { line: 1, column: 9 },
  },
});

console.log(e.format());

//   unexpected token:
//
// > │ text {{ ] }}
//   │         ^
```
npm package: @scaffit/core
Description: Core utilities for Scaffit - Framework detection, AST manipulation, file operations, and scaffold execution
Author: Santosh Hanumaiah Ranganatha
Latest version: 1.0.7

# @scaffit/core

Core utilities for Scaffit - Framework detection, AST manipulation, file operations, and scaffold execution.

## Features

- **Framework Detection**: Automatically detect Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js
- **AST Engine**: Parse, modify, and generate JavaScript/TypeScript code
- **File Operations**: Safe file reading/writing with project detection
- **Template Engine**: Variable replacement and conditional rendering
- **Scaffold Executor**: Common installation logic and dependency management
- **Validation**: Zod-based configuration validation

## Usage

```typescript
import { FileOperations, ASTEngine, ScaffoldExecutor } from '@scaffit/core';

// Detect project framework
const framework = FileOperations.detectFramework('./my-project');
const projectInfo = FileOperations.detectProject('./my-project');

// Parse and modify files
const ast = ASTEngine.parseFile('./src/index.ts');
ASTEngine.addImport('./src/index.ts', 'react', ['useState']);

// Execute scaffold
const result = await ScaffoldExecutor.executeScaffold(scaffold, config, './my-project');
```

## API

### FileOperations
- `detectFramework(rootDir)` - Detect project framework (Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js)
- `detectProject(rootDir)` - Detect framework and configuration
- `readFile(filePath)` - Safely read file
- `writeFile(filePath, content)` - Safely write file
- `addDependency(rootDir, name, version, isDev)` - Add package dependency
- `addScript(rootDir, name, command)` - Add npm script
- `getFrameworkConfigPaths(framework)` - Get framework-specific directory paths
- `getFrameworkExtensions(framework)` - Get framework-specific file extensions
- `getFrameworkDependencies(framework)` - Get recommended dependencies for framework

### ASTEngine
- `parseFile(filePath)` - Parse JS/TS to AST
- `addImport(filePath, source, specifiers)` - Add import statement
- `addExport(filePath, name, value)` - Add export statement
- `addFunction(filePath, name, params, body)` - Add function
- `applyModifications(filePath, modifications)` - Apply multiple changes

### TemplateEngine
- `renderTemplate(template, variables)` - Simple variable replacement
- `renderTemplateWithConditionals(template, variables)` - With if/unless blocks
- `generateFileContent(templatePath, variables)` - Generate file content

### ScaffoldExecutor
- `executeScaffold(scaffold, config, projectRoot)` - Run scaffold installation
- `getScaffoldPreview(scaffold, config, projectRoot)` - Preview changes
- `createFileFromTemplate(filePath, templateName, variables)` - Create file
- `installDependencies(projectRoot, packageManager)` - Install deps
npm package: @scaffit/web
Description: Scaffit Web Dashboard - Lightweight React UI for scaffold management
Author: Santosh Hanumaiah Ranganatha
Latest version: 1.0.0

# @scaffit/web

Web dashboard for Scaffit - Visual scaffold management interface.

## Features

- **Scaffold Browser**: Browse and search available scaffolds
- **Visual Configuration**: Configure scaffolds with forms instead of CLI prompts
- **Live Preview**: See file changes before installing
- **Project Dashboard**: Manage installed scaffolds
- **Minimal Dependencies**: Only React + ReactDOM runtime dependencies

## Usage

The web UI is launched automatically when you run:

```bash
scaffit ui
```

This will:
1. Check if @scaffit/web is installed
2. Install it automatically if needed
3. Start the Vite dev server
4. Open your browser to http://localhost:3000

## Architecture

- **Framework**: React 18 with TypeScript
- **Build Tool**: Vite with esbuild
- **Styling**: Tailwind CSS
- **State**: React Context (no external state management)
- **Icons**: Inline SVG components
- **API**: Custom Vite middleware for /api routes

## Development

```bash
# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build
```

## API Endpoints

The web UI communicates with the CLI through these endpoints:

- `GET /api/scaffolds` - List available scaffolds
- `POST /api/install` - Install a scaffold
- `POST /api/preview` - Get preview of changes

## Components

- **Button** - Styled button component
- **Card** - Container component
- **Input** - Form input component
- **CodeBlock** - Code display component
- **SearchBar** - Search functionality

## Views

- **Home** - Scaffold browser and search
- **Detail** - Scaffold configuration and preview
- **Installed** - Manage installed scaffolds
npm package: @scafflater/jest-scafflater
Description: Jest Matchers to test generated templates
Author: chicoribas
Latest version: 0.0.4

Jest Matchers to test generated templates.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
  - [Usage](#usage)
    - [With TypeScript](#with-typescript)
  - [Custom matchers](#custom-matchers)
    - [`toBeEqualDir`](#tobeequaldir)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

```
npm install --save-dev @scafflater/jest-scafflater
```

or, for installation with yarn package manager.

```
yarn add --dev @scafflater/jest-scafflater
```

## Usage

Import `@scafflater/jest-scafflater` once (for instance in your [tests setup
file][]) and you're good to go:

[tests setup file]: https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array

```javascript
// In your own jest-setup.js (or any other name)
import "@scafflater/jest-scafflater";

// In jest.config.js add (if you haven't already)
setupFilesAfterEnv: ["<rootDir>/jest-setup.js"];
```

### With TypeScript

If you're using TypeScript, make sure your setup file is a `.ts` and not a `.js`
to include the necessary types.

You will also need to include your setup file in your `tsconfig.json` if you
haven't already:

```json
  // In tsconfig.json
  "include": [
    ...
    "./jest-setup.ts"
  ],
```

## Custom matchers

### `toBeEqualDir`

```javascript
toBeEqualDir();
```

Compare two directory structures, including file contents.
npm package: @scaffold-ai/react-service-provider
Description: React context-based service provider for dependency injection.
Author: Austin Betts
Latest version: 1.0.3

# Service Provider

A React component library for **dependency injection** in your app.

It provides a simple, React-friendly way to inject and consume services throughout your component tree.

---

## What is a Service?

A **Service** is any object encapsulating logic separate from your UI — for example:

- Communicating with your backend API
- Wrapping third-party hooks or libraries
- Managing global state or utilities

---

## How to Use

### 1. Define a Service Contract (Interface)

Define the interface your app depends on.  
By coding against an interface, you can swap implementations without changing your app’s code.

```typescript
import { Service } from "./Service";

interface ApiService extends Service {
  getRequest(endpoint: string): string;
  useHook: () => void; // You can even inject hooks!
}

namespace ApiService {
  export const id = Symbol.for("ApiService");
}

export default ApiService;
```

### 2. Create a Concrete Service Implementation

Implement the interface for a specific environment or use case.

```typescript
import ApiService from "./ApiService";

export default class ApiServiceDev implements ApiService {
  serviceId = ApiService.id;

  getRequest(endpoint: string): string {
    return `You hit ${endpoint}`;
  }

  useHook = () => useYourHook();
}
```

### 3. Inject Services in Your App

Create a list of service instances (usually in a `services/index.ts`), then provide them to your app using the `ServiceProvider`.

```tsx
import ApiServiceDev from "./services/ApiServiceDev";
import { ServiceProvider } from "./index";

const services = [new ApiServiceDev()];

const App = () => (
  <ServiceProvider value={services}>{/* ...your app */}</ServiceProvider>
);
```

### 4. Consume Services with `useService`

Use the `useService` hook to access any injected service by its ID.

```tsx
import { useService } from "./index";

const Component = () => {
  const { getRequest } = useService<ApiService>(ApiService.id);

  return <div>{getRequest("some/endpoint")}</div>;
};
```
npm package: @scaffold-digital/ionic-hardware-buttons
Description: An easier way of handling hardware buttons in Ionic
Author: Scaffold Digital
Latest version: 1.1.0

# Ionic Hardware Buttons

If you've ever tried to catch hardware button events in Ionic and potentially override any default functionality you've probably found it less than straightforward. This package aims to make life easier by providing decorators that you can attach to your own view methods giving you an easy way to override the default behaviour (or not) to suit your application.

**PLEASE NOTE:** At this time only the @BackButton decorator is included. Support for additional buttons is planned.

## Getting Started

To use this package, simply install with npm, add the provider to your app module and initialize it somewhere nice and early. From there you can use the decorators anywhere in your application.

### Installing

First off, install the package with npm

```
npm install @scaffold-digital/ionic-hardware-buttons --save
```

Next, [add the package to your app's module](https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module)

```
...
import { HardwareButtons } from '@scaffold-digital/ionic-hardware-buttons';
...
@NgModule({
  ...
  providers: [
    ...
    HardwareButtons
    ...
  ]
  ...
})
export class AppModule { }
```

Next, initialize the provider somewhere early in your app (e.g. app.component.ts)

```
...
import { HardwareButtons } from '@scaffold-digital/ionic-hardware-buttons';
...

export class MyApp {
  constructor(
    ...
    hardwareButtons: HardwareButtons,
    platform: Platform,
    ...
  ) {
    platform.ready().then(() => {
      ...
      hardwareButtons.init();
      ...
    });
  }
}
```

And you're good to go! Simply add the relevant decorator for the hardware button you want to catch and write some code to be triggered.

## Example: Back Button

Here's a quick example of how you can override the default back button behavior from within a view

```
import { BackButton } from '@scaffold-digital/ionic-hardware-buttons';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    ...
    @BackButton()
    public onBackButton() {
        if (this.sideBarVisible) {
            this.hideSideBar();
            return false; // Blocks any further action from parent views, default behaviour etc
        }

        // If we don't return false then the back button event will continue to be handled as normal
    }
    ...
}
```

## Contributing

We always appreciate any feedback and improvements you might have. Feel free to submit any suggested changes as pull requests.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/scaffold-digital/ionic-hardware-buttons/tags). 

## Authors

* **Rob Sinton** - *Initial package* - [Rabamus](https://github.com/rabamus)

See also the list of [contributors](https://github.com/scaffold-digital/ionic-hardware-buttons/contributors) who participated in this project.
npm package: @scaffold-hbar-ui/components
Description: React components for scaffold-hbar-ui
Latest version: 2.0.0

# @scaffold-hbar-ui/components

React components for scaffold-hbar-ui applications.

## Installation

**Note**: This package requires `@scaffold-hbar-ui/hooks` as a peer dependency.

```bash
# Install both packages
npm install @scaffold-hbar-ui/components @scaffold-hbar-ui/hooks

# Or with yarn
yarn add @scaffold-hbar-ui/components @scaffold-hbar-ui/hooks

# Or with pnpm
pnpm add @scaffold-hbar-ui/components @scaffold-hbar-ui/hooks
```

### Peer Dependencies

You'll also need these peer dependencies if you don't already have them:

```bash
npm install react @types/react viem wagmi @tanstack/react-query
```

## Components

### Address

Displays an EVM-format address with blockie, copy, and block explorer link. Pass a Hedera chain from `viem/chains` for HashScan URLs.

#### Props

- `address?` - The address to display (optional)
- `disableAddressLink?` - Disable the block explorer link (optional)
- `format?` - `"short"` | `"long"` (optional)
- `size?` - `"xs"` | `"sm"` | `"base"` | `"lg"` | `"xl"` | `"2xl"` | `"3xl"` (default `"base"`)
- `chain?` - Viem `Chain` for explorer links (optional; can default from Wagmi config)
- `style?`, `blockExplorerAddressLink?` - Optional styling / URL override

#### Example

```tsx
import { Address } from "@scaffold-hbar-ui/components";
import { hederaTestnet } from "viem/chains";

<Address
  address="0x1234567890123456789012345678901234567890"
  chain={hederaTestnet}
/>;
```

## Development

```bash
# Install dependencies
pnpm install

# Build the package
pnpm build

# Watch for changes during development
pnpm dev

# Lint the code
pnpm lint

# Format the code
pnpm format
```
npm package: @scaffold-hbar-ui/hooks
Description: React hooks for scaffold-hbar-ui
Latest version: 1.1.0

# @scaffold-hbar-ui/hooks

A collection of React hooks for managing UI state.

## Installation

```bash
npm install @scaffold-hbar-ui/hooks
# or
yarn add @scaffold-hbar-ui/hooks
```

## Hooks

### useAddress

Formats EVM addresses (checksum, short form), block explorer URL (HashScan on Hedera), and blockie URL.

```tsx
import { useAddress } from "@scaffold-hbar-ui/hooks";
import { hederaTestnet } from "viem/chains";
import { useAccount } from "wagmi";

function AddressInfo() {
  const { address } = useAccount();

  const { checkSumAddress, blockExplorerAddressLink, isValidAddress, shortAddress, blockieUrl } = useAddress({
    address,
    chain: hederaTestnet,
  });

  return (
    <div>
      {blockieUrl ? (
        <img
          src={blockieUrl}
          alt=""
          width={32}
          height={32}
        />
      ) : null}
      <div>Address: {checkSumAddress}</div>
      <div>Short: {shortAddress}</div>
      <a
        href={blockExplorerAddressLink}
        target="_blank"
        rel="noopener noreferrer"
      >
        View on explorer
      </a>
      {isValidAddress ? <div>Valid</div> : null}
    </div>
  );
}
```

## Hedera

**Balance and native price:** When you use `useBalance` or the `Balance` component with a Hedera chain (e.g. `hederaTestnet`), the USD price is sourced from HBAR (CoinGecko). No configuration is required.

### Mirror node resolution

All Hedera account resolution (EVM ↔ account ID) calls the **Hedera mirror node directly**.

The mirror base URL is chosen from the **network** implied by each hook’s `chainId` (via `chainIdToHederaNetwork`):

- **mainnet** (chain `295`) → `https://mainnet.mirrornode.hedera.com`
- **testnet** (chain `296`) → `https://testnet.mirrornode.hedera.com`

### useHederaAccountId

Resolves a Hedera account ID (e.g. `0.0.8041897`) for an EVM address. Used by components like `HederaAddress`.

```tsx
import { useHederaAccountId } from "@scaffold-hbar-ui/hooks";

const { accountId, status, isLoading } = useHederaAccountId(evmAddress, chainId);
```

### useHederaEvmAddress

Resolves an EVM address (`0x…`) for a Hedera native account ID. Used by components like `HederaAddress`.

```tsx
import { useHederaEvmAddress } from "@scaffold-hbar-ui/hooks";

const { evmAddress, status, isLoading } = useHederaEvmAddress(accountId, chainId);
```

### useHederaAddressInput

Validates and resolves Hedera address input as native **`0.0.n`** or EVM **`0x…`**. Exposes a checksummed `evmAddress` when valid, plus errors, warnings, and loading flags. The `HederaAddressInput` component is built on this hook.

```tsx
import { useHederaAddressInput } from "@scaffold-hbar-ui/hooks";

const { evmAddress, error, warning, isResolving, accountIdFromEvm } = useHederaAddressInput({
  value: inputValue,
  chainId: 296,
  debounceDelay: 400,
});
```

## License

MIT