1. Introduction

Welcome to the Web3 Documentation Hub. This guide explains every public-facing page of the platform, provides technical snippets, and walks you through accepting crypto payments with our REST API.

  • Tech stack : Laravel Blade + Bootstrap 5 + Vanilla JS
  • REST base URL : https://api.web3.com/v1/
  • Status page : https://status.web3.com

2. Home Page

A high-impact landing section introducing the brand, hero stats, and immediate CTAs.

Key components

  • Hero counters “278 M users secured” (dynamic)
  • Two-button CTA: Connect Wallet & Login
  • Live <script> that fetches the top-16 token logos from CoinGecko

Editing the hero text

<div class="stat">278,510,252</div>
<h1>Users Backup & Secure Through Us</h1>

Update the figure in Laravel with number_format($userCount) .

3. Buy Crypto Page

The gateway for retail users to purchase BTC, ETH, BNB, or SOL in seconds.

Live price widget

const price = parseFloat(coinSel.selectedOptions[0].dataset.price);
const receive = fiat / price;

Swap the dataset prices with /ticker/price endpoint calls for up-to-date quotes.

Validating fiat amounts

  • Minimum : 10 USD
  • Maximum : 100 000 USD
  • Regex : /^\d+(\.\d{1,2})?$/

4. Markets Page

Real-time table listing the top 100 assets by market cap.

Refreshing data

setInterval(loadMarket, 60 * 1000); // 60 seconds

To lower bandwidth, set the interval to 180 s in production.

Column sorting

Clicking a table header adds .asc to that <th>. Rows are then sorted client-side with Array.sort().

5. Trade Desk

A professional-grade layout featuring:

  • TradingView™ embedded mini-chart
  • Bids & asks order-book (Binance public depth endpoint)
  • Tabbed buy-/sell form with live mid-price

Depth endpoint

GET https://api.binance.com/api/v3/depth?symbol=BTCUSDT&limit=20

Calculating totals

buyTotal.value  = (price * qty).toFixed(2);
sellTotal.value = (price * qty).toFixed(2);

6. Features Page

Six-card grid highlighting TPS, security, fees, SDK, community, and eco footprint.

Adding a new feature

<div class="col-md-6 col-lg-4">
    <div class="feature-box">
         <i class="fa-solid fa-your-icon"></i>
         <h5>Feature Title</h5>
         <p>Short description...</p>
    </div>
</div>

7. Earn Page

The passive-income hub—Locked Staking, Flexible Savings, Launchpool, Liquidity Farming.

Updating APY figures

Edit the .apr span in each .earn-card and adjust the calculator’s <select> value:

<option value="0.12">Locked Staking (12 % APY)</option>

8. Square Payments Page

Merchants can integrate crypto + fiat checkout with three price tiers.
The pricing cards are statically set; for dynamic billing, query the /fees API.

Webhook flow

POST /v1/merchant/webhook
Headers:  X-Signature: <HMAC_SHA256>

{
  "event": "payment_confirmed",
  "order_id": "abcd-1234",
  "amount": "150.00",
  "currency": "USDT"
}

Validate the HMAC using your secret key, then credit the customer wallet.

9. Making Payments (API)

All API calls require:

  • Header Authorization: Bearer YOUR_API_KEY
  • Header Content-Type: application/json

9.1 Create payment link

POST /v1/payments
{
  "amount": "50.00",
  "currency": "USDT",
  "redirect_url": "https://your-site.com/thanks",
  "metadata": { "orderId": "xyz-789" }
}

9.2 Query payment status

GET /v1/payments/{payment_id}

9.3 Issue refund

POST /v1/payments/{payment_id}/refund
{
  "amount": "50.00",
  "reason": "Customer request"
}

10. Frequently Asked Questions

Is KYC mandatory?

Yes—for regulatory reasons, purchases and payouts above 50 USD require Level-1 identity verification.

Where are funds stored?

Hot wallets are protected by MPC; > 95 % of user funds are in cold storage insured up to 200 M USD.

Can I change the UI theme?

Override any token in :root—e.g. --bg: #000; for true black.