XMTP

Building the payer portal for XMTP’s decentralized messaging network

Web3

Design

Our Impact

We helped XMTP design and build their new payer portal for funding, monitoring, and optimizing messaging costs on their decentralized network.

Designed and built the dashboard for interacting with XMTP’s new decentralized payer network
Robust dashboard allows users to connect wallets, fund messaging, monitor usage, and receive token rewards
Integrated raw subgraph events in lieu of a traditional web2 backend, allowing us to rebuild the blockchain state into meaningful client-side data

Like what you see? Let’s chat about your next project.

Let's Talk

XMTP is the largest & most secure decentralized messaging network.

XMTP (Extensible Message Transport Protocol) is an open-source, decentralized, and secure messaging protocol designed to provide encrypted, resilient communication across apps and wallets. It aims to be the foundational layer for private, censorship-resistant digital messaging, empowering users to own and control their communications without reliance on a single operator or company. XMTP is being adopted for group chats, direct messages, and notifications across the web3 ecosystem.

THE VISION
As XMTP transitioned to a paid messaging model, their core vision was to enable all messaging to be funded via onchain payments and establish a sustainable incentive loop for users. The goal was to quickly launch a payer portal to provide a reliable and efficient user experience for managing messaging spend and rewards.

WHY LAZER?
Lazer was the ideal partner due to our deep expertise across web3 and our track record with top clients like Coinbase, Uniswap, and Dapper Labs. Our team ensures rapid iteration and high-quality output, a crucial advantage given XMTP's evolving infrastructure and smart contracts.

Visit XMTP

platform

Web
XMTP
Base

Expertise

UI/UX Design
Frontend Development
Web3 Development
Smart Contract Integration
Cross-Chain Messaging
Integrations

Stage

Series B

Investors

Union Square Ventures
Andreessen Horowitz (a16z)
Coinbase Ventures
Lightspeed Faction
Sound Ventures
Alchemy

Approach

Designing a clear UI for complex payment management

After ensuring we had a deep understanding of the user experience XMTP needed for each flow, we designed the payer portal for intuitive navigation, quick actions, and clear information for managing the user’s fees and funds.

Throughout all screens, we made sure the most important data, like usage stats and feed, were transparent to the user while keeping the UI clean and organized.

XMTP’s payer portal for funding, monitoring, and optimizing messaging costs on their decentralized network.

Approach

Building the payer portal to run client-side

A key requirement for the XMTP Payer Portal was to build it fully client-side.

This included the authentication flow, which utilizes a "sign-in with Ethereum" method for wallet validation and issues a local token to grant the user access. To work around the absence of a traditional database, we queried all events via the subgraph, filtered them, and populated the data for users to get updates and notifications on meaningful transactions. We leveraged Arbitrum's SDK to provide a seamless view of cross-chain transactions between XMTP's Layer 3 and the Base network.

Approach

Adapting to evolving infrastructure and smart contracts

One of the main challenges was building in an environment where XMTP's smart contracts and infrastructure were actively under development and subject to significant changes, even to the very end of the project.

Our agile approach allowed us to implement the frontend and subgraph in a way that was easy to update, ensuring the product remained easily adaptable to any incoming changes. We built environment configuration files so the portal could run seamlessly without in-app code modifications, providing essential flexibility for deployment.

Approach

Adding the subgraph integration and finalizing smart contracts

As the payer portal came together quickly, we were able to go beyond our initial scope to build a subgraph, a requested addition that XMTP really appreciated us tackling.

The entities were built client-side so that the network state can be rebuilt at any timestamp from the subgraph if needed. As XMTP finalized their smart contracts, we updated the hooks as needed and tested the app and integration. We left XMTP in a great place for their testnet, with extensive documentation, a clean and easy to maintain codebase, and implementation guides for future features that they were interested in adding.

Collaborating with XMTP was a win-win for our teams, leveraging our product expertise in their mission to fuel the next generation of secure, decentralized messaging.

We loved bringing our product experience to the table to help their team nail down requirements for the payer portal and propose ideas for the future. Our proactive project management and communication styles were also perfectly aligned.

Thanks to our thorough work, XMTP was all set for their mainnet launch of their payer system, and they announced their $20M Series B funding shortly after our work together. We're eager to work with them again and excited to see what's next!

Ready to make an impact?

Let's Talk