open-index/open-npm huggingface dataset:
npm package: @getlit/contracts
Description: A script to get the latest Lit contract addresses & ABI, with types 😉
Author: Anson C
Latest version: 0.2.0

# What

The `@getlit/contracts` script fetches contract data from the `https://lit-general-worker.getlit.dev/contract-addresses` API and generates contract files, including JSON, JS, and TypeScript files. It also produces typechain types for the contracts.

See [./lit-contracts](https://github.com/LIT-Protocol/getlit-contracts/tree/main/lit-contracts)

# Quick Start

```
npx @getlit/contracts
```

# Usage

To run the script:

```
npx @getlit/contracts [options]
```

## Options

- `--update`: Flag to indicate if existing contracts should be updated with newer versions.
- `--outdir`: Specify the output directory for generated contract files. Default is 'lit-contracts'.
- `--network`: Specify the network ('cayenne' or 'serrano') to determine the API endpoint. Default is 'cayenne'.

# Demo

## Init

[![npx @getlit/sdk](https://img.youtube.com/vi/RpsTJlOyOMA/0.jpg)](https://www.youtube.com/watch?v=RpsTJlOyOMA)

## Update

[![npx @getlit/sdk --update](https://img.youtube.com/vi/8eNQHYKCDNk/0.jpg)](https://www.youtube.com/watch?v=8eNQHYKCDNk)
npm package: @getlit/hooks
Description: lit protocol react hook components
Author: anson
Latest version: 0.0.14

# Getting started

```
yarn add @getlit/hooks
```

# usePKPs (UMD) example

## react usage

```js
import { usePKPs } from "@getlit/hooks";

export default function Home() {
  const [data, loading, errors, fetch, defaultRender] = usePKPs({
    litNetwork: "serrano",
    chain: "ethereum",
  });

  return (
    <>
      <button onClick={fetch}>View PKPs</button>

      {/* -- default render -- */}
      <h2>Default rendering</h2>
      {defaultRender((pkp: any) => {
        console.log(pkp);
      })}

      {/* -- custom render */}
      <h2>Custom rendering</h2>
      {loading ? "Loading PKPs..." : ""}
      {errors ? "Error: " + errors : ""}
      {data?.map((pkp: any) => {
        return (
          <div key={pkp.tokenId}>
            tokenId: {pkp.tokenId} <br />
          </div>
        );
      })}
    </>
  );
}
```

## html usage
```html
<body>
  <div id="root"></div>

  <button id="btn-view-pkps">View PKPs</button>

  <!-- script -->
  <script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <script src="https://www.unpkg.com/@getlit/hooks@0.0.12/dist/bundle.umd.js"></script>
  <script>
    const { usePKPs } = GetLitHooks;

    function YourComponent() {
      const [data, loading, error, fetchPKPs, render] = usePKPs({ litNetwork: "serrano", chain: "ethereum" });

      document.getElementById('btn-view-pkps').onclick = async () => {
        fetchPKPs();
      };
      return React.createElement('div', null, render((pkp) => {
        console.log(pkp);
      }));
    }

    ReactDOM.render(
      React.createElement(YourComponent, null),
      document.getElementById('root')
    );
  </script>
</body>
```
npm package: @getlit/sdk
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.1.4

# getlit-sdk

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build getlit-sdk` to build the library.

Or run `yarn build` at the repository root to build all packages
## Running unit tests

Run `nx test getlit-sdk` to execute the unit tests via [Jest](https://jestjs.io).

# Notes to be organised

- If you are using next.js, you will need to enable `SPA` via `"use client";`
npm package: @getlit/ui
Description: There's no set rules of how we should organise & structure the components & stylesheets. These are just my ideas and what works for me atm., open to any suggestions and I just want this UI repo get filled with all internal project components.
Latest version: 0.0.4

# What

There's no set rules of how we should organise & structure the components & stylesheets. These are just my ideas and what works for me atm., open to any suggestions and I just want this UI repo get filled with all internal project components.

# UI Repo Folder Structure

We can categorise these UI components into

- domain/project-specific
- pure & unstyled (1 base class)
- mixed & styled (mixed class, a bit less modular but sometimes you just want styled components to be used)

# CSS

- `base.css`: all CSS files must(well if you want) extend from this
    - `utils.css`: like tailwind.css, but striped down to most common usages (for me). Included in `base.css` eg.

    ```
    // className="ml-12"
    margin-left: 12px;

    // className="flex center-item justify-center" to center an item in a div
    display: flex;
    align-items: center
    justify-content: center;

    ```

- `theme.example.css`: extends from `base.css`
    all styles then must include a theme prefix that will be added to the root div 

    eg. 

    ```
    // app.tsx
    <div className="app" data-lit-theme="purple"></div>

    // thene.purple.css
    [data-lit-theme="purple"] button {
        // big and round ;)
    }

    ```