Vitalik Dice Frontend - GasFloor Trading Interface

Tech Stack

The GasFloor frontend is built with modern Web3 technologies for a seamless trading experience.

⚛️

React

Component-based UI

🔗

wagmi v2

Ethereum hooks

💎

viem

Type-safe utilities

📝

TypeScript

Type safety

Interface Preview

The trading interface displays live gas prices, active markets, and provides intuitive controls for creating and taking positions.

24.7 gwei ↑

Gas hits 50 gwei 2,341 blocks remaining

YES: 0.65 ETH NO: 0.35 ETH

Gas hits 100 gwei 5,120 blocks remaining

YES: 0.25 ETH NO: 0.75 ETH

Key Features

📊 Live Gas Display

Real-time base fee updates with trend indicators showing gas price direction (up/down/stable).

📈 Price Visualization

Visual price bars showing implied odds with YES (green) and NO (red) price displays.

🔍 Market Filtering

Filter markets by status: ACTIVE, RESOLVED, or ALL. Easy navigation through available offers.

💰 Trade Panel

Intuitive interface for entering positions with amount inputs and confirmation modals.

➕ Create Market Modal

Form for creating new offers with threshold, deadline, stake, and bounty configuration.

✅ Resolution Actions

Buttons for resolving markets and claiming bounties when conditions are met.

Custom React Hooks

The frontend uses custom wagmi v2 hooks for all blockchain interactions:

useBaseFee()

Get current base fee and block number with auto-updates

useOffers()

Batch read all offers with event watching for real-time updates

useTakerPosition(offerId, address)

Get user's stake and potential payout for an offer

useCreateOffer()

Create new offers with validation and transaction handling

useTakeOffer()

Accept existing offers with partial fill support

useResolve()

Resolve YES/NO outcomes or claim winnings

useCanResolve(offerId)

Check if an offer is resolvable (for UI state)

useResolvableOffers()

Helper for resolver bots - lists all resolvable offers

Code Example

Here's how easy it is to integrate with GasFloor using the custom hooks:

import { useBaseFee, useOffers, useTakeOffer } from './hooks/useGasFloor';

function MarketCard({ offerId }: { offerId: number }) {
  // Get current gas price
  const { baseFee, blockNumber } = useBaseFee();

  // Get all offers
  const { offers, isLoading } = useOffers();

  // Take an offer
  const { takeOffer, isPending } = useTakeOffer();

  const handleTake = async () => {
    await takeOffer({
      offerId,
      amount: parseEther('0.1')
    });
  };

  return (
    <div>
      <p>Current Gas: {baseFee} gwei</p>
      <button onClick={handleTake}>
        {isPending ? 'Taking...' : 'Take Offer'}
      </button>
    </div>
  );
}
            

File Structure

frontend/src/
├── components/
│   └── GasFloor.jsx      # Main React component (988 lines)
├── hooks/
│   └── useGasFloor.ts    # Custom wagmi hooks (427 lines)
├── lib/
│   ├── gasfloor-contracts.ts  # ABI and types (321 lines)
│   └── wagmi-setup.ts    # Wallet connection setup
└── public/
    └── gasfloor-preview.html  # HTML preview
            

Frontend Demo