Step 2 - Enable Gasless Transactions + Styling

In this step, we’ll activate a gas sponsorship policy through Magmar to allow users to interact with your dApp without worrying about gas fees. Then we’ll enhance the UI using TailwindCSS and DaisyUI for a modern, responsive design.

Set Up Sponsored Gas Policy via Magmar

Thanks to Magmar’s Paymaster & Gas Policy Infrastructure, you can offer gasless experiences in your smart contract wallet-powered dApp. This means users can mint, burn, or transfer NFTs without ever paying gas themselves, a huge boost in user experience.

Create a Gas Sponsorship Policy

1. Log into your Magmar Dashboard

2. Navigate to the Account Abstraction section in the sidebar

3. Click Gas Manager, then hit Create New Policy

4. Enter the following details:

   • Policy Name: Gas Fee Sponsorship for My Gasless NFT Minter

   • For App: Select the app linked to your Magmar API key from Step 1

5. Click Next

Configure Spending Rules

Even though you're operating on Sepolia, it’s good practice to define limits:

• Choose conservative thresholds to avoid abuse

• Click Next when you're done

Set Access Control

No additional configuration is needed here. Just click Next.

Define Expiration & Validity

• Set the policy expiration date to one month from today

• Allow user operation signatures to remain valid for 10 minutes

• Click Review Policy → Publish Policy

1. Activate the newly created policy from your Magmar dashboard.

Link the Gas Policy to Your Environment

1. From your Magmar dashboard, copy the Policy ID

2. Open your project’s .env.local file

3. Add this line:

SEPOLIA_PAYMASTER_POLICY_ID=<PASTE-YOUR-GAS-POLICY-ID-HERE>

1. Save the file

That’s it! Your project now uses Magmar’s infrastructure to handle gas fees for user operations — keeping things frictionless and user-friendly.

---

Style Your App with TailwindCSS + DaisyUI

To give your frontend a professional look and feel, we’ll use TailwindCSS for utility-first styling and DaisyUI for component-ready design.

Install Required Packages

In your terminal, run:

npm install -D tailwindcss postcss autoprefixer daisyui@latest

Then initialize Tailwind:

npx tailwindcss init -p

You’ll see two new files created: tailwind.config.js and postcss.config.js

Configure Tailwind

Open tailwind.config.js and replace the content with:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./common/**/*.{js,ts,jsx,tsx,mdx}",
    "./public/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Then, in your globals.css file, add the following at the very top:

@tailwind base;
@tailwind components;
@tailwind utilities;

Enable DaisyUI (Already Done)

Since DaisyUI is already listed as a plugin in your Tailwind config, you're ready to use its components right away.

Your app is now wired with a sleek design system and ready to offer a fully gasless user journey through Magmar’s infrastructure.