Gravity: MNEE Native LayerZero Link Bridge

GRAVITY: Accept Any Crypto as Payments Cross-Chain, Receive Payments in MNEE: Link Bridge Enabling Instant Payment Widget Links or QR code for Creators, Abstractng Multichain transactions to MNEE

Comment

Project Story: Gravity

Inspiration

The inspiration for Gravity came from a simple but frustrating observation: Cryptocurrency is still too hard for everyday payments.

While the vision of "being your own bank" is powerful, the reality is fragmentation. If I want to pay a creator or a merchant, I might have USDC on Base, but they want MNEE on Mainnet. Or I might hold a meme token like PEPE, and they only accept their ecosystem token. The friction of bridging, swapping, and calculating gas fees kills the transaction before it even starts.

I wanted to build the "WeChat Pay" of Web3—a system where the complexity of liquidity, routing, and chains is completely abstracted away. A creator should be able to generate a QR code for "50 MNEE", and a user should be able to scan that code and pay with literally any asset they own, on any chain, with one click.

What it does

Gravity is a universal payment gateway that bridges the gap between different blockchains and tokens, with MNEE at its core.

  • Universal Payment Links: Creators and merchants can generate customizable payment Intents (e.g., "Pay me 100 MNEE").
  • Any-Token Payments: Payers can fulfill these requests using any token in their wallet (ETH, USDC, SOL, etc.).
  • Smart Routing & Settlement: The app automatically finds the optimal route. If a user pays with ETH on Optimism, Gravity handles the cross-chain bridge and swap to settle in MNEE instantly in the creator's wallet.
  • Instant Verification: Both parties receive immediate digital receipts and verification via QR codes, ensuring trust without needing to manually check block confirmations.

How I built it

I built Gravity as a high-performance, design-first application leveraging the absolute bleeding edge of the modern web stack.

  • Web Framework: Next.js 16 (App Router) & React 19. I chose the latest versions to leverage React Server Components for fast initial loads and SEO, while keeping the interactive payment modules client-side.
  • Styling: Tailwind CSS 4 & Framer Motion. The goal was a "premium" feel—glassmorphism, smooth layout transitions, and fluid micro-interactions that make Web3 feel approachable.
  • Web3 Engine: Powered by the LI.FI SDK, Wagmi, and Viem. This allows Gravity to tap into existing liquidity aggregators, enabling seamless cross-chain transfers and swaps into MNEE from thousands of tokens without fragmenting liquidity.
  • Data Layer: Prisma ORM + Supabase (PostgreSQL). This manages off-chain metadata: event details, custom branding for payment pages, and historical transaction data.
  • Wallet Integration: RainbowKit provided a polished wallet connection UI, supporting a vast array of wallets out of the box.

Challenges I ran into

Building Gravity wasn't just about connecting APIs; it was a battle against complexity and compatibility.

1. The "Bleeding Edge" Tax

Using Next.js 16 and React 19 meant traversing uncharted territory. Many established Web3 libraries (wagmi, various wallet adapters) assume older React patterns. I faced hydration errors and context provider issues that required deep dives into node_modules and patching tricky use client boundary issues.

2. Abstraction vs. Trust

The hardest UX challenge was balancing simplicity with transparency.

$$ \text{Simplicity} \propto \frac{1}{\text{Information}} $$

I want one button that says "Pay". But in Web3, users need to understand slippage, gas fees, and routing. Finding the right UI to show "You are paying 100 TOKEN ($10.50)" without overwhelming users with "Route: UniV3 → Curve → Bridge" was difficult. I solved this using expandable detail modules to keep the primary interface clean.

3. Real-Time Quotes

Crypto prices move in milliseconds. Implementing a robust hook system that constantly refreshes quotes (using tanstack-query) without causing UI shifts or stale-quote transaction failures was a significant engineering hurdle.

Accomplishments that I'm proud of

  • Seamless MNEE Settlement: A complete user flow from "Scan QR" → "Transaction Complete" in under 30 seconds, settling directly in MNEE regardless of the input token.
  • Design Excellence: A fintech-grade design system that proves Web3 apps don’t have to feel clunky or intimidating.
  • Universal Compatibility: Integration with LI.FI SDK enables support for thousands of tokens and multiple chains from Day 1.

What I learned

  • Composability is King: My initial idea involved writing custom AMM contracts. I learned that leveraging existing infrastructure like LI.FI aggregation is infinitely more scalable than bootstrapping liquidity myself.
  • Frontend is the Bottleneck: Consumer crypto is no longer limited by blockchain throughput—it’s limited by frontend state management. Multi-step, cross-chain transactions demand optimistic UI, precise error handling, and disciplined state architecture beyond typical web apps.

What's next for Gravity: MNEE Native LayerZero Link Bridge

While Gravity currently supports cross-chain transfers via LI.FI aggregation, the next major milestone is transforming MNEE into a true OFT (Omnichain Fungible Token) using LayerZero.

By integrating the LayerZero Link Bridge, I aim to:

  • Unify MNEE Liquidity: Move beyond aggregator-dependent bridging to native, slippage-free transfers across all supported blockchains.
  • Standards-Based Interoperability: Enable seamless movement of MNEE without wrapping/unwrapping, reducing security risks.
  • Trustless Cross-Chain Messaging: Unlock advanced use cases where a payment on Polygon can instantly unlock content or verify a ticket on Ethereum Mainnet via native OFT mechanics.

Links & Resources

  • Pitch Deck: Link
  • Whitepaper: Link
  • Website: Link
  • Live Demo / Payment Link: Link
  • YouTube Demo Video: Link
  • Github Repo: Link
  • Architecture: Link

Built With

  • coinbase-wallet-sdk
  • ethereum/erc20
  • framer-motion
  • hardhat
  • javascript
  • li.fi-sdk
  • metamask-sdk
  • next.js-16
  • prisma
  • radix-ui
  • rainbowkit
  • react-19
  • recharts
  • solidity
  • sqlite
  • supabase
  • tailwind-css-4
  • three.js
  • typescript
  • uniswap-v4
  • vercel
  • viem
  • wagmi
  • walletconnect
Share this project:

Updates