Installation

Steps

1. Set up shadcn

   Skip this if components.json already exists. The kit uses Tailwind v4 and shadcn's theme variables.

   pnpmnpmyarnbun

   pnpm dlx shadcn@latest init

2. Add the components

   The full flow pulls in the hooks and the route picker it needs, plus wagmi, viem and @tanstack/react-query.

   pnpmnpmyarnbun

   pnpm dlx shadcn@latest add https://mercato.sh/r/mercato-earn.json

3. Wrap your app

   The components use your wallet connection. If you already have wagmi and React Query providers, add MercatoProvider only if you want to route the API through your own server.

   "use client"
   import { WagmiProvider, createConfig, http } from "wagmi"
   import { mainnet } from "wagmi/chains"
   import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
   import { MercatoProvider } from "@/lib/mercato"
   
   const config = createConfig({ chains: [mainnet], transports: { [mainnet.id]: http() } })
   const queryClient = new QueryClient()
   
   export function Providers({ children }: { children: React.ReactNode }) {
     return (
       <WagmiProvider config={config}>
         <QueryClientProvider client={queryClient}>
           <MercatoProvider>{children}</MercatoProvider>
         </QueryClientProvider>
       </WagmiProvider>
     )
   }

4. Use it

   import { MercatoEarn } from "@/components/mercato-earn"
   import { ConnectButton } from "@rainbow-me/rainbowkit"
   
   export default function Save() {
     return <MercatoEarn connect={<ConnectButton />} />
   }

Everything at once

pnpm dlx shadcn@latest add https://mercato.sh/r/mercato-earn.json https://mercato.sh/r/mercato-balance.json https://mercato.sh/r/mercato-withdraw.json https://mercato.sh/r/mercato-loop.json https://mercato.sh/r/mercato-lend.json https://mercato.sh/r/mercato-collateral-route.json https://mercato.sh/r/mercato-rate.json

What lands where

lib/mercato.ts              # hooks, types, transactions (mercato-lib)
lib/mercato-loop.ts          # loop and route transactions through Morpho's Bundler3 (mercato-lib)
components/mercato-earn.tsx  # the full flow
components/mercato-loop.tsx  # one-click loop
components/mercato-lend.tsx  # lend USDC against mcUSDC
components/mercato-collateral-route.tsx  # AVT → mcUSDC
components/mercato-routes.tsx
components/mercato-balance.tsx
components/mercato-withdraw.tsx
components/mercato-rate.tsx

Paths follow the aliases in your components.json. Every file is yours: change the copy, the layout or the routes — but keep the disclosure line (see Theming).