open-index/open-npm huggingface dataset:
npm package: @gamescoin/star-dapp-react
Description: `npm run start`
Latest version: 0.2.0

`npm i`

## Local Development

`npm run start`

`npm run start:dev`

## Using UNPKG

```html
<script
  type="module"
  async
  defer
  crossorigin
  src="https://unpkg.com/@gamescoin/star-dapp-react@0.1.33/dist/assets/index-B-ELOJzT.js"
></script>
```

# Web Components

The Webcomponents can be found [here](src/components).

## Usage Step Slider

```typescript
// Init
const sliderContainer = document.getElementById("slider-container");
const stepSlider = document.createElement("step-slider");

stepSlider.setAttribute("min", "10");
stepSlider.setAttribute("max", "10000");
stepSlider.setAttribute("default-value", "5000");

sliderContainer!.appendChild(stepSlider);

// Usage
const slider = document.querySelector("step-slider") as any;
slider!.updateValue(value);

const handleSliderChange = (event: any) => {
  const newValue = event.detail.value;
};

slider?.addEventListener("value-change", handleSliderChange);
slider!.removeEventListener("value-change", handleSliderChange);
```

## Usage Custom Dropdown / Select

Care, besides value and text content no further HTMLSelectElement-functionality is implemented.

```typescript
// Init
const tokenSelectContainer = document.getElementById("token-select");
const tokenSelect = document.createElement("custom-dropdown");
tokenSelect.id = "custom-dropdown";

tokenSelectContainer!.appendChild(tokenSelect);

// Usage
const currencyDropdown = document.getElementById(
  "custom-dropdown"
) as HTMLSelectElement;

currencyDropdown!.innerHTML = "";
Object.entries(environment.tokens).forEach(([name, address]) => {
  const option = document.createElement("option");
  option.value = address;
  option.textContent = name;
  currencyDropdown!.appendChild(option);
});

const handleTokenChange = async (event: Event) => {
  const target = event.target as HTMLSelectElement;
  const selectedValue = target.value;
};

currencyDropdown.addEventListener("change", handleTokenChange);
```

### Data Structure

Tokens is a simple record key value object.

```javascript
const environment = {
  tokens: {
    TST: "0xE953...",
    USDT: "0xE953...",
    USDC: "0xE953...",
  },
};
```