@gamescoin/star-dapp-react v0.2.0

npm i

Local Development

npm run start

npm run start:dev

Using UNPKG

<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.

Usage Step Slider

// 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.

// 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.

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