Quickstart

Add LayerCover insurance to your dApp in under 5 minutes

Get LayerCover running in your React dApp in three steps.

1. Install

npm install @layercover/sdk ethers viem wagmi @mui/material @emotion/react @emotion/styled

2. Add the CoverButton

import { CoverButton } from '@layercover/sdk/react';
import { ViemAdapter } from '@layercover/sdk';
import { useWalletClient } from 'wagmi';

function ProtocolPage() {
  const { data: walletClient } = useWalletClient();
  const signer = walletClient ? ViemAdapter.fromWalletClient(walletClient) : undefined;

  return (
    <CoverButton
      signer={signer}
      poolId={1}
    />
  );
}

That's it! The button renders a styled "Cover" button. When clicked, it opens a complete purchase modal with quote fetching, duration selection, and transaction execution.

Live Example

// App.tsx - Full working example
import { CoverButton } from '@layercover/sdk/react';
import { ViemAdapter } from '@layercover/sdk';
import { useWalletClient } from 'wagmi';

export default function App() {
  const { data: walletClient } = useWalletClient();
  const signer = walletClient ? ViemAdapter.fromWalletClient(walletClient) : undefined;

  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h2>My DeFi Protocol</h2>
      <p>Your deposits are protected by LayerCover</p>
      <CoverButton
        signer={signer}
        poolId={1}
        buttonText="Get Protected"
        onSuccess={() => alert('Coverage purchased!')}
      />
    </div>
  );
}

3. What Happens When a User Clicks

Full CoverButton Props

Example with All Options

<CoverButton
  signer={signer}
  poolId={1}
  availableBalance={userBalance}
  referralCode={encodeBytes32String('YOUR_REFERRAL_CODE')}
  onSuccess={() => {
    toast.success('Coverage purchased!');
    refetchPositions();
  }}
  buttonText="Get Protected"
  theme={customTheme}
/>

Referral Integration

Attach a referral code when preparing a purchase. The default suggested reward is often 5%, but the live referral rate is deployment-configurable and capped at 10%:

import { encodeBytes32String } from 'ethers';

<CoverButton
  signer={signer}
  poolId={1}
  referralCode={encodeBytes32String('YOUR_CODE')}
/>

Next Steps