Documentation

Getting Started with GasMon

Sponsor transaction fees (gas) for your dApp users on Monad Testnet in minutes using our plug-and-play, no-code widget.

How GasMon Works

GasMon utilizes a smart Gas Vault architecture where you deposit testnet MON into your application's dedicated vault. When users run completely out of gas on your dApp, they can request an instant gas top-up directly through the widget embedded in your site's UI.

Step 1

Configure your application metadata and domain safety parameters.

Step 2

Fund Gas Vault

Deposit MON into your vault contract to pay for user transaction sponsorships.

Step 3

Embed Widget

Copy the iframe, style its layout, and drop it straight into your frontend code.

Configuration Guide

1Create a New Application

Go to the My Apps section on your dashboard and click Register First App. Fill in your project settings:

Name: The public name of your project (e.g., My Dapp).
Domain: The strict domain where you plan to embed the widget (e.g., mydapp.xyz, or localhost:3000 during local development and testing).
Sponsorship Amount: The maximum MON sent to a single wallet address per claim (e.g., 0.1 MON).

2Deposit MON into Your Gas Vault

To enable gas payouts, you must fund your application's vault. In your application dashboard, click deposit and load testnet MON into the contract.

Need Testnet MON?Please request initial test tokens from the official Monad Testnet faucet prior to funding your smart vault contract.

3Generate & Customize Your Widget

Open your app settings and navigate to the Widget Studio tab. You can test interactions on the live interactive mockup, select theme palettes, customize buttons, and copy the ready-to-use HTML code block.

Technical Embedding Instructions

To maintain strict safety boundaries and ensure your dApp style remains insulated from external changes, GasMon renders widgets inside a standard sandboxable iframe. This avoids any global CSS leaking into your codebase.

Standard HTML Code Snippet

Copy and insert the following code block directly inside your page HTML structure:

Code Snippet

<iframe
  src="https://gasmon.vercel.app/widget/YOUR_APP_ID?accent=%2304ff2c&label=Get%20Free%20Gas&mode=dark"
  width="100%"
  height="72"
  style="border: none; border-radius: 14px; background: transparent; overflow: hidden;"
  scrolling="no"
  title="GasMon Widget"
></iframe>

Note: Always remember to replace YOUR_APP_ID inside the URL with your unique application string.

Making the Widget Responsive

The widget inside the iframe adapts itself perfectly down to very narrow screen widths. To make sure the iframe fits seamlessly into both mobile screen mockups and desktop grids, we highly recommend wrapping it inside a parent container that specifies a responsive limit:

Code Snippet

<div style="width: 100%; max-width: 420px; margin: 0 auto; padding: 8px; box-sizing: border-box;">
  <iframe
    src="https://gasmon.vercel.app/widget/YOUR_APP_ID?accent=%2304ff2c&label=Get%20Free%20Gas&mode=dark"
    width="100%"
    height="72"
    style="border: none; border-radius: 14px; background: transparent; overflow: hidden; display: block;"
    scrolling="no"
  ></iframe>
</div>

Integrating Dynamically in React / Next.js

To tie the widget state directly to your local application state, you can render it programmatically. This allows you to sync accent colors or switch theme schemes instantly whenever users toggle dark mode on your main website:

Code Snippet

"use client";

import React from "react";

interface GasSponsorProps {
  appId: string;
  isDarkTheme: boolean;
  themeColorHex: string; // e.g., "#04ff2c"
  buttonText?: string;
}

export function GasMonSponsor({ appId, isDarkTheme, themeColorHex, buttonText = "Get Free Gas" }: GasSponsorProps) {
  const safeAccent = encodeURIComponent(themeColorHex);
  const safeLabel = encodeURIComponent(buttonText);
  const themeMode = isDarkTheme ? "dark" : "light";
  
  const iframeSrc = `https://gasmon.vercel.app/widget/${appId}?accent=${safeAccent}&label=${safeLabel}&mode=${themeMode}`;

  return (
    <div className="w-full max-w-md mx-auto">
      <iframe
        src={iframeSrc}
        width="100%"
        height="72"
        style={{ border: "none", borderRadius: "14px", background: "transparent", overflow: "hidden", display: "block" }}
        scrolling="no"
        title="GasMon Integration"
      />
    </div>
  );
}

Customization URL Parameters

The widget dynamically reads URL search queries to tailor its looks in real time. You can supply the following query inputs:

Parameter	Default	Description
accent	#04ff2c	The primary theme color hex code for claim buttons, spinners, and accents. Make sure the value is URL-encoded (e.g. use %23 instead of #).
label	Get Free Gas	Text content shown directly inside the action execution button. Spaces should be encoded as %20.
mode	dark	Determines text coloring and inner opacity modes. Values must be either `dark` or `light`.