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

Getting Started

Build Your First DePIN

The Basic Operations

The Advanced Operations

Adjust Delegator Stake

Change your stake amount:

1. Find the validator to which you’ve staked your tokens and click Manage

2. Then click Stake more

3. Enter the additional amount of PEAQ you would like to stake in the pop-up window

4. This is a success message you’ll see once additional tokens are staked

Getting Started

Build Your First DePIN

The Basic Operations

The Advanced Operations

​Change your stake amount:

​1. Find the validator to which you’ve staked your tokens and click Manage

​2. Then click Stake more

​3. Enter the additional amount of PEAQ you would like to stake in the pop-up window

​4. This is a success message you’ll see once additional tokens are staked

Change your stake amount:

1. Find the validator to which you’ve staked your tokens and click Manage

2. Then click Stake more

3. Enter the additional amount of PEAQ you would like to stake in the pop-up window

4. This is a success message you’ll see once additional tokens are staked