  .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');
        }
    });
}

What is peaq

peaq

Welcome to 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

What is peaq

DePINs

DePAI

Machine DeFi

Machine RWAs