TipModal Component

The TipModal component is a Svelte-based modal designed for displaying various payment options and allowing users to trigger it with customizable buttons. This component is lightweight, easy to use, and allows customization via props and slots.

---

Installation

To use the TipModal component in your project, install it like so:

npm install git+https://github.com/clams-tech/tip-modal.git

Then, import it into your project:

import {TipModal} from 'tip-modal';

and import the styles:

import 'tip-modal/app.css';

---

Props

showModal

• Type: boolean
• Description: Controls the visibility of the modal.
• Example:

  let showModal = false;
  

openModal

• Type: Function
• Description: Function to set showModal to true and open the modal.
• Example:

  function openModal() {
    showModal = true;
  }
  

closeModal

• Type: Function
• Description: Function to set showModal to false and close the modal.
• Example:

  function closeModal() {
    showModal = false;
  }
  

paymentOptions

• Type: Array
• Description: An array of payment options to display in the modal.
• Example:

  const paymentOptions = [
    { label: 'BOLT12', value: 'lno1zrxq8pjw7qjlm68mtp7e3yvxee4y5xrgjhhyf2fxhlphpckrvevh50u0qt2rt2xr6uuj7cfce48c5cr8sa2dqp2nkumkuztlq840mpjj95anvqsrh809gs052xe9reyna6v2djjv4p7k0leqy9uhthm8tpvvppphlmfsqvcdy9947hanvmq9mssn970apemvm7hjhg54qfdahgq2t5rwzca27ksjcz7lwn8xyl9qet4lmd4zjq8ucy4gq0cjem6q47gcl8a4f9lcr0qajukk809lnu7az9wupm0vz6ljh3ajgqqspdlvl6crzaxz9ueuu5h9as269y' },
    { label: 'LNURL', value: 'https://clams.tech/.well-known/lnurlp/tips' },
    { label: 'LN Address', value: '[email protected]' },
    { label: 'Onchain', value: 'bitcoin:32KAVNNDqjvw9SgProPnffVgdg4YEhgVKy' }
  ];
  

paymentTag

• Type: string

• Default: "tips"

• Description: A customizable identifier for the default LNURL and LN Address payment options. This allows tracking of where payments originate, such as different apps.

• Example Usage:

  <TipModal paymentTag="remote" />
  

This results in the following payment options:

const paymentOptions = [
  { label: 'BOLT12', value: 'lno1zrxq8pjw7qjlm68mtp7e3yvxee4y5xrgjhhyf2fxhlphpckrvevh50u0qt2rt2xr6uuj7cfce48c5cr8sa2dqp2nkumkuztlq840mpjj95anvqsrh809gs052xe9reyna6v2djjv4p7k0leqy9uhthm8tpvvppphlmfsqvcdy9947hanvmq9mssn970apemvm7hjhg54qfdahgq2t5rwzca27ksjcz7lwn8xyl9qet4lmd4zjq8ucy4gq0cjem6q47gcl8a4f9lcr0qajukk809lnu7az9wupm0vz6ljh3ajgqqspdlvl6crzaxz9ueuu5h9as269y' },
  { label: 'LNURL', value: 'https://clams.tech/.well-known/lnurlp/remote' },
  { label: 'LN Address', value: '[email protected]' },
  { label: 'Onchain', value: 'bitcoin:32KAVNNDqjvw9SgProPnffVgdg4YEhgVKy' }
];

modalTitle

• Type: string
• Default: ''
• Description: The title displayed at the top of the modal, typically describing the purpose of the modal (e.g., "Donate Now" or "Support Us"). It is displayed in a bold, larger font.
• Example:

  <TipModal modalTitle="Support Us" />
  

modalDescription

• Type: string
• Default: ''
• Description: The description displayed under the title in the modal. It provides additional context or instructions, in a smaller font than the title. Use this to give more details about the purpose of the modal, such as explaining a process or providing extra information.
• Example:

  <TipModal modalDescription="Thank you for your contribution!" />
  

buttonTheme

• Type: 'light' | 'dark'
• Default: 'dark'
• Description: Specifies the theme of the default trigger button.
• Example:

  <TipModal buttonTheme="light" />
  

buttonText

• Type: string
• Default: 'Donate'
• Description: Text displayed on the default trigger button.
• Example:

  <TipModal buttonText="DONATE" />
  

---

Slots

The TipModal component supports a named slot (button) to fully customize the trigger button or element.

Default Button

If no custom content is provided, the modal uses a default button:

<TipModal />

Custom Button

You can pass custom elements or buttons using the slot="button" syntax:

Example 1: Custom Button

<TipModal>
    <button on:click={openModal} slot="button" class="custom-button"> Custom Donate </button>
</TipModal>

Example 2: Custom Text Element

<TipModal>
    <p on:click={openModal} slot="button" class="custom-text">Donate Here</p>
</TipModal>

---

Usage Examples

Basic Modal with Default Button

<script>
    import TipModal from './lib/components/TipModal.svelte';

    let showModal = false;
    const paymentOptions = [
        { label: 'BOLT12', value: 'lno1zrxq...' },
        { label: 'LNURL', value: 'https://clams.tech/.well-known/lnurlp/tips' },
        { label: 'LN Address', value: '[email protected]' },
        { label: 'Onchain', value: 'bitcoin:32KAVNNDqjvw9SgProPnffVgdg4YEhgVKy' }
    ];

    function openModal() {
        showModal = true;
    }

    function closeModal() {
        showModal = false;
    }
</script>

<TipModal {showModal} {openModal} {closeModal} {paymentOptions} />

Modal with Custom Button

<TipModal {showModal} {openModal} {closeModal} {paymentOptions}>
    <button on:click={openModal} slot="button" class="custom-button"> Custom Donate </button>
</TipModal>

Modal with Custom Text Element

<TipModal {showModal} {openModal} {closeModal} {paymentOptions}>
    <p on:click={openModal} slot="button" class="custom-text">Donate Here</p>
</TipModal>

---

Local Development

To run this component locally for development, follow these steps:

1. Clone the repository:

   git clone https://github.com/clams-tech/tip-modal.git
   cd tip-modal
   

2. Install dependencies:

   yarn
   

3. Start the development server:

   yarn dev
   

   This will start a local server (powered by Vite) for live preview and development.

4. Build the project:

   yarn build
   

   This command compiles the component for production.

---