Live Example:

```js
import { useState, useEffect } from 'react';
import { onProviderChanged, createProvider } from "../provider";

import { ProtectionWidget } from './index.tsx';
import Data from '../sdk-data';

const [provider, setProvider] = useState(createProvider());
useEffect(() => onProviderChanged(() => setProvider(createProvider())), []);

let marketId = Data.markets[0] && Data.markets[0].id;

<>
  <ProtectionWidget
    provider={provider}
    environment="MumbaiStaging"
    marketId="1"
    protectionAmount="1000"
    controlType="toggle"
    incomeApyRate="20"
    activateProtectionTitle="Protect my deposit at {rate}% per year (income APY is {incomeApyRate}%, net profit is {netApyRate}%)"
    viewProtectionTitle="Protection for {coverage} {coverageCurrency} is activated (net profit is {netApyRate}%)"
  />

  <br />
  <ProtectionWidget
    provider={provider}
    environment="MumbaiTestnet"
    marketId={"2"}
    protectionAmount="1000"
    controlType={"checkbox"}
    activateProtectionTitle="Protect my deposit at {rate}% per year"
    viewProtectionTitle="Protection for {coverage} {coverageCurrency} is activated"
  />

  <br />
  <ProtectionWidget
    provider={provider}
    environment="MumbaiStaging"
    marketId={"2"}
    protectionAmount="1000"
    controlType={"link"}
    className={"external-link"}
    activateProtectionTitle="Protect my deposit at {rate}% per year"
    viewProtectionTitle="Protection for {coverage} {coverageCurrency} is activated"
  />

  <br />
  <ProtectionWidget
    provider={provider}
    environment="MumbaiTestnet"
    marketId={"2"}
    protectionAmount="1000"
    controlType={"link"}
    className={"button"}
    activateProtectionTitle="Protect my deposit at {rate}% per year"
    viewProtectionTitle="Protection for {coverage} {coverageCurrency} is activated"
  />

  <br />
  <ProtectionWidget
    provider={provider}
    environment="MumbaiStaging"
    marketId={"2"}
    protectionAmount="1000"
    controlType={"link"}
    className={"violet-button"}
    activateProtectionTitle="Protect my deposit at {rate}% per year"
    viewProtectionTitle="Protection for {coverage} {coverageCurrency} is activated"
  />

  <br />
  <ProtectionWidget
    provider={provider}
    environment="MumbaiTestnet"
    marketId={"2"}
    protectionAmount="1000"
    controlType={"button"}
    activateProtectionTitle="Protect my deposit at {rate}% per year"
    viewProtectionTitle="Protection for {coverage} {coverageCurrency} is activated"
  />

<br />

  <ProtectionWidget
    provider={provider}
    environment="MumbaiStaging"
    protectionAmount="1000"
    entityList={[
      { key: "Blockchain", value: "Ethereum V1.0" },
    ]}
    incomeApyRate={"20"}
    marketLimit={5}
    activateProtectionTitle={"From {rate}%/year (net APY is {netApyRate}%) on market #{marketNo} '{marketEntity}'"}
  />

  <br />

  <ProtectionWidget
    provider={provider}
    environment="MumbaiTestnet"
    protectionAmount="100"
    entityList={[
      { key: "Blockchain", value: "Ethereum" },
    ]}
    marketLimit={5}
  />

  <br />

  <ProtectionWidget
    provider={provider}
    environment="MumbaiStaging"
    protectionAmount="100"
    marketId={"999"}
    noProtectionTitle={"No protection available"}
  />

</>

```