Universal Gas Framework : REACT Component Demo

Minimal open-source demo showing how to mint a soulbound access pass with UGF.

This repo demonstrates one useful product action:

• user connects a normal wallet
• app builds claimPass(address attendee)
• UGF handles quote, gas payment, and execution
• pass is minted onchain without requiring the user to preload native gas for the flow

This is a demo repository for developers.

LLM Context

For AI tools and repo summarization, see:

• llms.txt

UI Reference

What This Repo Is

This project is a small React + Foundry example built around Universal Gas Framework (UGF).

It uses:

• @tychilabs/react-ugf for frontend integration
• a small Solidity contract for a soulbound-style access pass
• Base Sepolia and Base Mainnet demo contract addresses

The goal is to show a clean integration surface for a real contract action, not just a token transfer.

What UGF Does Here

UGF is the execution layer behind the gasless flow.

In this repo, the app:

1. connects an EVM wallet
2. encodes a mint call
3. opens the UGF modal
4. lets the user pay gas in a supported payment asset
5. completes the destination-chain action

That means the app team focuses on the product action, while UGF handles quote, payment, and execution. The dApp does not need to build a separate app-owned gas sponsorship path just to make the user flow work.

What This Demo Does Not Require

This demo is intentionally framed around a lighter integration path.

It does not require the app team to build or operate:

• paymasters
• bundlers
• smart-wallet migration flows
• custom app-side relayer UX
• account-abstraction-specific product plumbing

It also does not require the dApp to pre-sponsor native gas for users through its own parallel gasless system.

Repo Structure

contract/
  src/MintPassSBT.sol
  script/Deploy.s.sol
  foundry.toml

client/
  src/App.jsx
  src/main.jsx
  src/styles.css

Current Demo Coverage

This repository currently ships an EVM React demo.

• Testnet destination: Base Sepolia
• Mainnet destination: Base Mainnet
• Frontend integration: @tychilabs/react-ugf

In this implementation, the application is not directly sponsoring native gas on behalf of users through an app-managed gas tank.

Configured pass contracts:

• Base Sepolia: 0x4ec5310A4770E13390273465053aAe4D223787A4
• Base Mainnet: 0x6D0E65747df095F06E7bCC092FeFf11a80F26D34

UGF Chain Support Context

The broader UGF SDK supports more than this repo’s current EVM demo surface.

From the local SDK reference used for this repo, the mainnet SDK supports destination execution helpers for:

• evm
• sol
• sui
• tron

Important distinction:

• this repo currently demonstrates EVM integration through @tychilabs/react-ugf
• broader multi-chain execution, including Solana, Sui, and Tron, belongs to the lower-level @tychilabs/ugf-sdk surface

So it is accurate to say:

• UGF supports Solana, Sui, and Tron in the core SDK
• this specific repository currently implements the EVM React flow

Contract

MintPassSBT.sol is a small soulbound-style pass contract used by the demo.

Behavior:

• repeat minting allowed
• configurable max supply
• non-transferable
• base URI configurable by owner

This contract is demo-only.

It is:

• not audited
• not production-ready
• intentionally minimal

Local Development

Client

cd client
npm install
npm run dev

Contract

cd contract
forge build

Environment Variables

Client

See:

• client/.env.example

Current keys:

VITE_TESTNET_DEST_CHAIN_ID=84532
VITE_MAINNET_DEST_CHAIN_ID=8453
VITE_TESTNET_PASS_CONTRACT_ADDRESS=...
VITE_MAINNET_PASS_CONTRACT_ADDRESS=...

Contract

See:

• contract/.env.example

Current keys:

BASE_SEPOLIA_RPC_URL=...
BASE_MAINNET_RPC_URL=...
PRIVATE_KEY=...
PASS_NAME="Demo Access"
PASS_SYMBOL=DEMO
EVENT_TITLE="Demo App"
BASE_TOKEN_URI=https://tychilabs.com/
MAX_SUPPLY=500000

Deploy

Base Sepolia

cd contract
source .env
forge script script/Deploy.s.sol:DeployMintPass --rpc-url "$BASE_SEPOLIA_RPC_URL" --broadcast -vvv

Base Mainnet

cd contract
source .env
forge script script/Deploy.s.sol:DeployMintPass --rpc-url "$BASE_MAINNET_RPC_URL" --broadcast -vvv

Frontend Integration Shape

At a high level, the client does this:

openUGF({
  signer,
  tx: {
    to: contractAddress,
    data: iface.encodeFunctionData("claimPass", [wallet]),
    value: 0n,
  },
  destChainId,
});

The demo then reloads contract state and shows:

• wallet
• supply
• owned token id
• current status

If You Want Solana, Sui, or Tron

This repo is a strong starting point for the product and UI pattern, but the current implementation is still EVM-first.

To extend the same idea to Solana, Sui, or Tron:

1. keep the same product action framing
2. switch from the React-only surface to the lower-level UGF SDK where needed
3. adapt the destination execution payload to the target chain
4. keep UGF as the quote/payment/execution layer

The core product idea still holds: the dApp should not need to design a separate user gas sponsorship product in order to deliver the action.

That means the product concept stays the same even when the destination execution family changes.

Security Notes

• do not commit funded private keys
• do not use this contract as-is in production
• do not treat this repo as an audited implementation
• rotate any exposed deployer key before using mainnet funds

License

No license file is included in this repository yet. Add one before publishing if you want reuse terms to be explicit.