DocsIntroduction
Build with mcUSDC
Copy-paste React components that let your users earn on USDC through Mercato — with live routes to its markets, in your app's own look.
You put in
USDC
How you want to earn
Rates are variable and measured, never promised. Withdraw from available liquidity. mcUSDC is your share of Mercato USDC, a vault on Morpho. You can lose money.
Quick start
In a React app with Tailwind and shadcn set up, add the full flow:
pnpm dlx shadcn@latest add https://mercato.sh/r/mercato-earn.jsonThen wrap your app in your wagmi and React Query providers (you probably already have them) and render <MercatoEarn />. The installation guide has the details.
Why a kit
Copy-paste, not a package
The shadcn CLI writes the components into your repo. No version to pin, nothing to wrap — edit them like your own code.
Your theme
They use shadcn's theme variables, so they look like the rest of your app the moment they land.
Live routes
Flexible, fixed, most points, boosted, the one-click loop, lending USDC against mcUSDC and AVT → mcUSDC — rates read live from Morpho, Spectra and Curve through one public endpoint.
Your users sign
Everything happens in the user's own wallet. Nothing is custodied by you or by Mercato.
Components
Earn
The whole add-money flow: how much, which token, how to earn, confirm. Supplies in place — swapping USDT to USDC first — or continues on the route's venue.
Balance
What the connected wallet holds in Mercato, in USDC, what it has earned so far, and the rate now.
Routes
The preset ways to earn on USDC as cards — each with its own mark, the rate, a yearly estimate for the amount, a risk meter and points. A 2-column grid when its container has room, a swipeable row when it does not (container queries). Controlled: you hold the selected id.
Withdraw
Take USDC back out of Mercato, from available liquidity. “All” redeems every share.
Loop
One-click loop on mcUSDC / USDC: supply USDC, borrow against the mcUSDC and supply that too, in one transaction through Morpho's Bundler3 — leverage presets, the net rate, how far mcUSDC can fall before liquidation, and closing the loop back to USDC. The Earn block uses it for the Boosted route.
Lend
Lend USDC in the mcUSDC / USDC market — to anyone borrowing against mcUSDC, loopers included. Shows the rate lenders earn and how much of the market is borrowed, the wallet's position, and withdrawing whatever isn't borrowed at the time. Users approve USDC to Morpho once, then supply.
Collateral route
Earn on a token without selling it: put in AVT, borrow USDC against it and hold it as mcUSDC, in one transaction through Morpho's Bundler3. LTV presets, the net rate on what you borrow (mcUSDC's rate − the borrow rate + rewards), the price at which it can be liquidated, and closing the route to get the token back. Shows "soon" until the market exists.
Rate badge
The live mcUSDC rate as a small badge — variable, measured from the share price over 30 days.
Hooks (lib)
What every component is built on: the API client, the wallet's position, the USDT quote, supply / withdraw, the loop and collateral routes. Use it to build your own UI.