  .form-div {
      max-width: 400px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 1rem;
      font-family: system-ui, sans-serif;
  }

  .form-div input {
      padding: 10px 14px;
      font-size: 1rem;
      border: 1px solid #ced4da;
      border-radius: 0.375rem;
      background-color: #fff;
      color: #212529;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .form-div input:focus {
      border-color: #86b7fe;
      outline: none;
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  }

  .form-div button {
      position: relative;
      padding: 10px 16px;
      font-size: 1rem;
      background-color: #6666FE;
      color: #fff;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: background-color 0.15s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }

  .form-div button:hover {
      background-color: #6d6dfd;
  }

  .form-div button:active {
      background-color: #6666FE;
  }

  .spinner {
      display: none;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
  }

  @keyframes spin {
      to {
          transform: rotate(360deg);
      }
  }

  .loading .spinner {
      display: inline-block;
  }

  .loading #btn-text {
      opacity: 0.6;
  }

if (document.readyState === "loading") {
    window.addEventListener("DOMContentLoaded", () => {
      initFormHandler();
    });
  } else {
    initFormHandler();
  }

  function initFormHandler() {
    document.addEventListener("click", async function (event) {

        const target = event.target;
        if (target && target.id === "submit-btn" || target && target.id === "btn-text") {
            console.log("✅ Button clicked!!");
          
            const button = document.getElementById('submit-btn');
            const invalidAddressAlert = `❌ invalid address!`;
            const address = document.getElementById("address").value;

            if (address.startsWith("0x")) {
                if (address.length < 42) {
                    alert(invalidAddressAlert);
                    return;
                }
            } else {
                if (address.length < 48) {
                    alert(invalidAddressAlert);
                    return;
                }
            }

            button.classList.add('loading');

            await fetch('https://dev-peaq-faucet-service.cisys.xyz/get-test-tokens', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json', 
                'Accept': 'application/json',
                'APIKEY': '78b996ecb21a4a676078b99667606a6ae72d'
            },
            body: JSON.stringify({ address }),
            })
            .then(async (response) => {
                if (response.ok) {
                    return response.json();
                } else {
                    const errorData = await response.json().catch(() => ({message: "Unknown error"}));
                    throw new Error(errorData.message || `Request failed with status ${response.status}`);
                }
            })
            .then((result) => {
                console.log({ result });
                if (result?.message) {
                    if (result?.txHash) {
                        alert(`✅ ${result?.message}: https://agung-testnet.subscan.io/tx/${result?.txHash}`);
                        return;
                    }
                    alert(`❌ ${result?.message}`);
                }
            })
            .catch((e) => {
                console.error("❌ error: ", e?.message);
                alert(`❌ ${e?.message}!`);
            }).finally(() => {
                button.classList.remove('loading');
            });

            button.classList.remove('loading');
        }
    });
}

Why The Graph?

Key Features

The Graph

peaq

Welcome to peaq!

What is peaq

Installing peaq SDK

Connecting to peaq

Tokenomics

Onboard a Machine

Store Machine Data

Run and Test

Deploy your DePIN

On-chain vs Off-chain

Submitting Transactions

Deploying ERC-20 Token

Deploying ERC-721 NFT

Block Explorers

Sending Bulk Transactions

SDK Reference

Product Updates

Getting Started

Build Your First DePIN

The Basic Operations

The Advanced Operations

The Graph

Why The Graph?

Key Features

Getting Started

Build Your First DePIN

The Basic Operations

The Advanced Operations

​Why The Graph?

​Key Features

Why The Graph?

Key Features