Sample App for CCTP: Experience the Interoperability of USDC

USDC Stablecoins CCTP Developer

blog-sampleappToday, we’re open-sourcing our Sample App for Cross-Chain Transfer Protocol (CCTP), which can help kickstart your development process for Multi-Chain apps with sample code accessible from our GitHub repository.

As more businesses launch payment solutions with USDC, we find ourselves on the brink of a new era of open, internet-native commerce. To support this evolution, Circle empowers developers to build scalable financial products that can reach worldwide users with robust and composable stablecoin infrastructure. With this secure and resilient foundation, developer teams can focus on delivering the best user experience while accelerating time-to-market. CCTP plays an important role in this mission by enabling the fluid and permissionless transfer of USDC across multiple supported blockchains. The interoperability of USDC connects disparate networks that would otherwise operate in silos.

 

Overview

Our Sample App demonstrates how a user can transport USDC across supported CCTP routes from a simple interface while behind the scenes, a set of smart contracts perform burn and mint events to complete the cross-chain transfer securely. The app uses development frameworks and libraries such as React and Material-UI for the front end, web3-react for wallet integration, ethers.js for interacting with Ethereum-based blockchains, and a Circle API for fetching attestations that validate USDC burn events.

 

Steps to transferring USDC across chains

1) Source chain: USDC contract - approve()

Approve the TokenMessenger contract to transfer a specified amount of the user’s USDC.


2) Source chain: TokenMessenger contract - depositForBurn()

Deposits the user’s USDC to the TokenMessenger contract, which burns the USDC, then calls MessageTransmitter to pass the message and emit a MessageSent event


3) Off-chain: Fetch attestation from Circle’s API

The signed message (attestation) can be fetched using the message hash from the MessageSent event in the previous step.


4) Destination chain: MessageTransmitter contract - receiveMessage()

Callable by any address, this decodes the message, calls the TokenMessenger contract, mints the USDC, and transfers it to the address specified in the original depositForBurn function call.


multi-chain

 

With USDC and CCTP, developers can build unified applications that span multiple blockchains while providing users with a highly capital-efficient way to transact with digital dollars:

Chain-agnostic payment UX: Deliver payment experiences in your app that are chain agnostic. Empower users to conduct transactions without worrying about which blockchain their USDC is held on – removing complexity and offering a mainstream payments experience.

Optimized peer-to-peer transactions: Serve users on multiple chains while optimizing your app for the best transaction speed and lowest costs. As user funds land in your app, CCTP can automatically transfer USDC to faster, cheaper chains behind the scenes. Users experience a single account balance in your app while their transactions can settle on the most performant chain.

Cross-chain payments with any currency: Combine the innovations of DeFi with the capital efficiency of CCTP to make more types of cross-chain transactions. Build an app that programmatically swaps crypto for USDC on a decentralized exchange and then uses CCTP to settle the payment at the intended destination. This enables seamless cross-chain payments with crypto while eliminating the need to manage crypto liquidity.


New call-to-action

Learn more about CCTP with our developer docs and join our Discord to discuss your integration with our community of builders.

Back to top