### Install Bitcoin Builder Kit UI Package

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui

Installs the UI package using npm. This is the first step to integrate the UI components into your project.

```bash
npm install @bitcoin-builder-kit/ui
```

--------------------------------

### Usage Example of Toggle Component in JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/toggle

Provides an example of how to use the Toggle component in JavaScript. It shows basic instantiation and interaction.

```javascript
const toggle = new Toggle({
  target: document.getElementById('toggle-container'),
  props: {
    active: false,
    size: 'small',
    disabled: false
  }
});
```

--------------------------------

### Live Example: Button Component

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui

Demonstrates the usage of the Button component with sample text.

```html
<button data-button="" data-variant="primary" data-size="md">Click me</button>
```

--------------------------------

### Run Development Server

Source: https://bitcoin-builder-kit-docs.netlify.app/guides/bitcoin-tip-jar/getting-started

Starts the development server for the Bitcoin tip jar application. This command will open the application in your browser at http://localhost:8888.

```sh
pnpm dev
```

--------------------------------

### Usage Example of Toggle Component in React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/toggle

Illustrates the usage of the Toggle component within a React functional component. This example showcases how to manage the component's state and props.

```javascript
import React, { useState } from 'react';
import Toggle from '@bitcoin-builder-kit/react';

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <Toggle
      active={isActive}
      onToggle={setIsActive}
      size="big"
      disabled={false}
    />
  );
}
```

--------------------------------

### Usage of Button in JavaScript and React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/button

Provides examples of how to use the Button component with different configurations in JavaScript and React.

```javascript
// Example usage in JavaScript
const myButton = new Button({
  content: 'label+icon',
  label: 'Click Me',
  styleType: 'filled',
  size: 'default'
});
document.body.appendChild(myButton.render());
```

```react
import React from 'react';
import { Button } from '@bitcoin-builder-kit/ui';

function App() {
  return (
    <div>
      <Button
        content="label+icon"
        label="Click Me"
        styleType="filled"
        size="default"
      />
    </div>
  );
}
```

--------------------------------

### Scaffold UI with TailwindCSS and Bitcoin Builder Kit (React/TypeScript)

Source: https://bitcoin-builder-kit-docs.netlify.app/guides/bitcoin-tip-jar/getting-started

This snippet demonstrates setting up the UI for a Bitcoin tip jar. It involves installing TailwindCSS and Bitcoin Builder Kit, configuring TailwindCSS in Vite, updating CSS with Bitcoin Builder Kit variables, and setting up the index.html with necessary meta tags and theme attributes.

```typescript
import './index.css';
import { BuiButton, BuiContainer, BuiContentBlock, BuiHeader, BuiLink, BuiSection, BuiTag, BuiTick, BuiTickGroup, BuiTimeline, BuiTimelineEvent, BuiTimelineEventIcon, BuiTimelineEventMarker, BuiTimelineEventTitle, BuiTooltip, BuiTypography } from '@bitcoin-design/bitcoin-builder-kit';

function App() {
  return (
    <BuiContainer>
      <BuiHeader
        avatar="https://i.imgur.com/M0R2YcW.png"
        title="Bitcoin Tip Jar"
        subtitle="Send us a tip">
        <BuiLink
          href=""
          target="_blank">
          Source Code
        </BuiLink>
      </BuiHeader>
      <BuiSection>
        <BuiContentBlock>
          <BuiTypography variant="heading-4">
            Tip Options
          </BuiTypography>
          <BuiTickGroup>
            <BuiTick
              label="10"
              variant="solid"
              tag="USD"
              selected
            />
            <BuiTick label="20" tag="USD" />
            <BuiTick label="50" tag="USD" />
            <BuiTick label="Custom Amount" tag="USD" />
          </BuiTickGroup>
          <BuiButton
            onClick={() => console.log('continue')}>
            Continue
          </BuiButton>
        </BuiContentBlock>
      </BuiSection>
      <BuiTimeline>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Create new Vite project</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Scaffold UI</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Get price of bitcoin</BuiTimelineEventTitle>
        </BuiTimelineEvent>
      </BuiTimeline>
    </BuiContainer>
  );
}

export default App;

```

--------------------------------

### Setup Theming with data-theme and data-mode

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui

Applies theme and mode attributes to the HTML element for component styling. Supported themes are 'bitcoindesign' and 'conduit', with modes 'light' and 'dark'.

```html
<html data-theme="bitcoindesign" data-mode="light">
  <!-- ... -->
</html>
```

--------------------------------

### Handle Payments with Voltage API and Netlify Functions (Node.js/TypeScript)

Source: https://bitcoin-builder-kit-docs.netlify.app/guides/bitcoin-tip-jar/getting-started

This snippet covers setting up backend logic for receiving Bitcoin payments using the Voltage Payments API and Netlify serverless functions. It includes installing necessary packages, configuring Netlify, setting up API service functions, and updating the main application to integrate payment handling.

```typescript
import { uuid } from 'uuidv4';
import { buildResponse } from '@netlify/functions';
import { config } from '../config/voltage';
import { createInvoice, getInvoice } from '../services/voltageApi';

export const handler = async (event) => {
  const { method } = event;

  if (method === 'POST') {
    try {
      const { amount, currency } = JSON.parse(event.body);
      const invoice = await createInvoice({
        amount,
        currency,
        description: 'Tip',
        externalId: uuid(),
      });
      return buildResponse(200, invoice);
    } catch (error) {
      console.error('Error creating invoice:', error);
      return buildResponse(500, { error: 'Failed to create invoice' });
    }
  } else if (method === 'GET') {
    try {
      const { id } = event.queryStringParameters;
      const invoice = await getInvoice(id);
      return buildResponse(200, invoice);
    } catch (error) {
      console.error('Error getting invoice:', error);
      return buildResponse(500, { error: 'Failed to get invoice' });
    }
  }

  return buildResponse(405, { error: 'Method not allowed' });
};

```

```typescript
import {
  BuiButton,
  BuiContainer,
  BuiContentBlock,
  BuiHeader,
  BuiLink,
  BuiSection,
  BuiTag,
  BuiTick,
  BuiTickGroup,
  BuiTimeline,
  BuiTimelineEvent,
  BuiTimelineEventIcon,
  BuiTimelineEventMarker,
  BuiTimelineEventTitle,
  BuiTooltip,
  BuiTypography,
  BuiModal,
  BuiModalHeader,
  BuiModalBody,
  BuiModalFooter,
  BuiInput,
  BuiNumpad,
  BuiNumpadButton,
  BuiReceiveScreen,
} from '@bitcoin-design/bitcoin-builder-kit';
import { useEffect, useState } from 'react';

// Assuming Kraken and CustomAmountModal are defined elsewhere
const Kraken = {
  getBitcoinPrice: async (): Promise<string> => {
    const response = await fetch('https://api.kraken.com/0/public/Ticker?pair=XXBTZUSD');
    const data = await response.json();
    return data.result['XXBTZUSD'].a[0];
  },
};

interface CustomAmountProps {
  visible: boolean;
  onClose: () => void;
  onAmountSelect: (amount: string) => void;
}

const CustomAmountModal: React.FC<CustomAmountProps> = ({ visible, onClose, onAmountSelect }) => {
  const [amount, setAmount] = useState('');

  const handleDigit = (digit: string) => {
    setAmount(prev => prev + digit);
  };

  const handleDelete = () => {
    setAmount(prev => prev.slice(0, -1));
  };

  const handleSelect = () => {
    onAmountSelect(amount);
    setAmount('');
    onClose();
  };

  return (
    <BuiModal visible={visible} onClose={onClose}>
      <BuiModalHeader title="Custom Amount" onClose={onClose} />
      <BuiModalBody>
        <BuiInput label="Amount" value={amount} readOnly />
        <BuiNumpad>
          <BuiNumpadButton onClick={() => handleDigit('1')}>1</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('2')}>2</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('3')}>3</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('4')}>4</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('5')}>5</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('6')}>6</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('7')}>7</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('8')}>8</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('9')}>9</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('0')}>0</BuiNumpadButton>
          <BuiNumpadButton onClick={handleDelete}>Delete</BuiNumpadButton>
        </BuiNumpad>
      </BuiModalBody>
      <BuiModalFooter>
        <BuiButton onClick={handleSelect}>Select</BuiButton>
      </BuiModalFooter>
    </BuiModal>
  );
};

function App() {
  const [bitcoinPrice, setBitcoinPrice] = useState<string | null>(null);
  const [loadingPrices, setLoadingPrices] = useState(true);
  const [isCustomModalVisible, setIsCustomModalVisible] = useState(false);
  const [customAmount, setCustomAmount] = useState('');
  const [invoice, setInvoice] = useState<any>(null);
  const [loadingInvoice, setLoadingInvoice] = useState(false);

  useEffect(() => {
    const fetchPrice = async () => {
      try {
        setLoadingPrices(true);
        const price = await Kraken.getBitcoinPrice();
        setBitcoinPrice(price);
      } catch (error) {
        console.error('Error fetching Bitcoin price:', error);
      } finally {
        setLoadingPrices(false);
      }
    };
    fetchPrice();
  }, []);

  const handleCustomSelect = (amount: string) => {
    setCustomAmount(amount);
    setIsCustomModalVisible(false);
  };

  const handleContinue = async () => {
    const selectedAmount = customAmount || '10'; // Default to 10 if no custom amount
    setLoadingInvoice(true);
    try {
      const response = await fetch('/.netlify/functions/voltage-payments', {
        method: 'POST',
        body: JSON.stringify({
          amount: parseFloat(selectedAmount),
          currency: 'USD',
        }),
      });
      const data = await response.json();
      setInvoice(data);
    } catch (error) {
      console.error('Error creating invoice:', error);
    } finally {
      setLoadingInvoice(false);
    }
  };

  return (
    <BuiContainer>
      <BuiHeader
        avatar="https://i.imgur.com/M0R2YcW.png"
        title="Bitcoin Tip Jar"
        subtitle="Send us a tip">
        <BuiLink
          href=""
          target="_blank">
          Source Code
        </BuiLink>
      </BuiHeader>
      <BuiSection>
        {!invoice ? (
          <BuiContentBlock>
            <BuiTypography variant="heading-4">
              Tip Options
            </BuiTypography>
            <BuiTickGroup>
              <BuiTick
                label="10"
                tag="USD"
                selected={!customAmount}
                price={bitcoinPrice ? `$${(10 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
              />
              <BuiTick
                label="20"
                tag="USD"
                price={bitcoinPrice ? `$${(20 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
              />
              <BuiTick
                label="50"
                tag="USD"
                price={bitcoinPrice ? `$${(50 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
              />
              <BuiTick
                label="Custom Amount"
                tag="USD"
                selected={!!customAmount}
                onClick={() => setIsCustomModalVisible(true)}
                price={customAmount ? `$${(parseFloat(customAmount) / parseFloat(bitcoinPrice ?? '1')).toFixed(8)} BTC` : ''}
              />
            </BuiTickGroup>
            {!loadingPrices && (
              <BuiButton onClick={handleContinue} loading={loadingInvoice}>
                Continue
              </BuiButton>
            )}
          </BuiContentBlock>
        ) : (
          <BuiReceiveScreen
            lnurl={invoice.lnurl} // Assuming invoice object has lnurl property
            invoice={invoice.invoice} // Assuming invoice object has invoice property
            amount={invoice.amount} // Assuming invoice object has amount property
            currency={invoice.currency} // Assuming invoice object has currency property
          />
        )}
      </BuiSection>
      <CustomAmountModal
        visible={isCustomModalVisible}
        onClose={() => setIsCustomModalVisible(false)}
        onAmountSelect={handleCustomSelect}
      />
      <BuiTimeline>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Create new Vite project</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Scaffold UI</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Get price of bitcoin</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Custom amount modal</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Receive payments</BuiTimelineEventTitle>
        </BuiTimelineEvent>
      </BuiTimeline>
    </BuiContainer>
  );
}

export default App;

```

--------------------------------

### Use Option Dot Component (React)

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/option-dot

Provides an example of how to render and use the Option Dot component in a React application.

```jsx
function App() {
  return (
    <div>
      <option-dot></option-dot>
      <option-dot active></option-dot>
    </div>
  );
}
```

--------------------------------

### Import and Usage of Message Component in React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/message

Provides examples of importing and utilizing the Message component within a React environment. Shows how to configure the message content, mood, and icon display.

```jsx
import { Message } from '@bitcoin-builder/ui';

function MyComponent() {
  return (
    <>
      <Message text="Welcome to the dashboard!" mood="success" showIcon={true} icon="check" />
      <Message text="Configuration needed." mood="caution" showIcon={true} icon="alert-triangle" />
      <Message text="Invalid input provided." mood="danger" showIcon={true} icon="x" />
    </>
  );
}
```

--------------------------------

### Use NumPad in React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/numpad

Provides an example of how to use the NumPad component within a React application. It handles the 'click' event to process button presses.

```javascript
import React, { useRef, useEffect } from 'react';
import NumPad from './NumPad';

function App() {
  const numpadRef = useRef(null);

  useEffect(() => {
    const numpadInstance = new NumPad(numpadRef.current);
    numpadInstance.on('click', (value) => {
      console.log('Button clicked:', value);
    });

    return () => {
      // Clean up event listeners if necessary
    };
  }, []);

  return <div ref={numpadRef}></div>;
}
```

--------------------------------

### Usage Button Cluster - JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/button-cluster

Example of using the Button Cluster component in JavaScript. It accepts child elements and can control button direction.

```javascript
{
  component: ButtonCluster,
  props: {
    direction: 'horizontal' // or 'vertical'
  },
  children: [
    // Button components go here
  ]
}
```

--------------------------------

### Import UI Package CSS

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui

Imports the necessary CSS for the UI components. This should typically be done once at a high level in your application.

```javascript
import "@bitcoin-builder-kit/ui/dist/style.css";
```

--------------------------------

### Use Option Dot Component (JavaScript)

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/option-dot

Shows the basic usage of the Option Dot component in plain JavaScript.

```javascript
<option-dot></option-dot>
<option-dot active></option-dot>
```

--------------------------------

### Input Component Behavior

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/input

Describes the behavior and functionality of the input component, including styling, icon support, and event handling.

```APIDOC
## Behavior: Input Component

- **Mood Styling**: The `mood` property controls the visual state and styling of the input.
- **Icon Support**: Both left and right icons can be displayed independently.
- **Label Display**: The label can be shown or hidden with `showLabel`.
- **Value Binding**: The `value` property is two-way bound with the input content.
- **Placeholder Text**: Provides helpful hints when the input is empty.
- **Right Icon Action**: The right icon can have a click action defined.
```

--------------------------------

### Import Option Dot Component (JavaScript)

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/option-dot

Demonstrates how to import the Option Dot component for use in JavaScript projects.

```javascript
import 'option-dot';
```

--------------------------------

### Import Toggle Component in JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/toggle

Demonstrates how to import the Toggle component in a JavaScript environment. This is the first step to using the component in your project.

```javascript
import { Toggle } from '@bitcoin-builder-kit/react';
```

--------------------------------

### Input Component Properties

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/input

Details on the properties available for the input component, including their types, requirements, and descriptions.

```APIDOC
## Properties: Input Component

### Description
This section details the configurable properties for the input component.

### Properties Table
| Property | Attribute | Type | Required | Reflected | Description |
|---|---|---|---|---|---|
| `mood` | `mood` | string | No | Yes | Input mood: “neutral”, “caution”, “danger”, “success” |
| `size` | `size` | string | No | Yes | Input size: “large”, “small” |
| `label` | `label` | string | No | Yes | Label text for the input |
| `value` | `value` | string | No | Yes | Input value |
| `placeholder` | `placeholder` | string | No | Yes | Placeholder text |
| `showLabel` | `show-label` | boolean | No | Yes | Whether to show the label |
| `showIconLeft` | `show-icon-left` | boolean | No | Yes | Whether to show left icon |
| `showIconRight` | `show-icon-right` | boolean | No | Yes | Whether to show right icon |
| `iconRightAction` | `icon-right-action` | string | No | No | Action for right icon click |
```

--------------------------------

### Import and Use Button Component in JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui

Imports and displays the Button component from the UI package in a JavaScript application.

```javascript
import { Button } from "@bitcoin-builder-kit/ui";

// ...

const button = new Button();
document.body.appendChild(button);
```

--------------------------------

### Input Component Events

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/input

Details the events emitted by the input component, such as 'input', 'change', 'focus', 'blur', and 'click'.

```APIDOC
## Events: Input Component

The input component emits standard input events:

- `input`: When the input value changes.
- `change`: When the input value changes and loses focus.
- `focus`: When the input gains focus.
- `blur`: When the input loses focus.
- `click`: When the right icon is clicked (if `iconRightAction` is defined).
```

--------------------------------

### Import Amount Option Tile in JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/amount-option-tile

Demonstrates how to import and use the Amount Option Tile component in a JavaScript environment. This allows for programmatic integration into web applications.

```javascript
import { AmountOptionTile } from '@bitcoin-builder-kit/react';

// Usage example:
<AmountOptionTile
  emoji="₿"
  message="1 BTC"
  primaryAmount={10000}
  primarySymbol="USD"
/>;
```

--------------------------------

### Import Avatar Component (JavaScript)

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/avatar

Demonstrates how to import the Avatar component for use in JavaScript applications.

```javascript
import { Avatar } from "@bit/bitcoin-builder-kit";
```

--------------------------------

### Import Button in JavaScript and React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/button

Demonstrates how to import the Button component for use in both plain JavaScript and React applications.

```javascript
import { Button } from '@bitcoin-builder-kit/ui';
```

```react
import { Button } from '@bitcoin-builder-kit/ui';
```

--------------------------------

### Import and Use Button Component in React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui

Imports and renders the Button component from the UI package within a React application.

```javascript
import { Button } from "@bitcoin-builder-kit/ui/react";

function App() {
  return (
    <Button>Click me</Button>
  );
}
```

--------------------------------

### Import Button Cluster - JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/button-cluster

Demonstrates how to import the Button Cluster component in JavaScript. No external dependencies are required for basic usage.

```javascript
import { ButtonCluster } from '@bitcoin-builder/ui';
```

--------------------------------

### Amount Option Tile Properties

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/amount-option-tile

This section details the properties available for the Amount Option Tile component, including their types, whether they are required, and a description of their functionality.

```APIDOC
## Amount Option Tile

### Description
Represents a customizable tile for displaying currency amounts, with options for emojis, messages, and dual currency display.

### Properties

#### Component Properties

- **emoji** (string) - Optional - Emoji to display on the tile
- **message** (string) - Optional - Message text to display
- **showEmoji** (boolean) - Optional - Whether to show the emoji
- **showMessage** (boolean) - Optional - Whether to show the message
- **showSecondaryCurrency** (boolean) - Optional - Whether to show secondary currency
- **bitcoinFirst** (boolean) - Optional - Display Bitcoin amount first
- **custom** (boolean) - Optional - Whether this is a custom amount
- **amountDefined** (boolean) - Optional - Whether amount is defined
- **selected** (boolean) - Optional - Whether the tile is selected
- **primaryAmount** (number) - Optional - Primary amount value
- **primarySymbol** (string) - Optional - Symbol for primary currency
- **secondaryAmount** (number) - Optional - Secondary amount value
- **secondarySymbol** (string) - Optional - Symbol for secondary currency
- **showEstimate** (boolean) - Optional - Whether to show estimate text
- **primaryTextSize** (string) - Optional - Size of primary text (base, lg, xl, etc.)
- **secondaryTextSize** (string) - Optional - Size of secondary text (base, lg, xl, etc.)

### Events

#### Click Event

- The component emits a `click` event. The detail structure for this event is not specified in the provided documentation.
```

--------------------------------

### Fetch Bitcoin Price with Kraken API (React/TypeScript)

Source: https://bitcoin-builder-kit-docs.netlify.app/guides/bitcoin-tip-jar/getting-started

This snippet shows how to fetch the current price of Bitcoin in USD using the Kraken API. It includes creating a service function for the API call and integrating the price fetching logic into the main React application component to display prices alongside tip options.

```typescript
import './index.css';
import { BuiButton, BuiContainer, BuiContentBlock, BuiHeader, BuiLink, BuiSection, BuiTag, BuiTick, BuiTickGroup, BuiTimeline, BuiTimelineEvent, BuiTimelineEventIcon, BuiTimelineEventMarker, BuiTimelineEventTitle, BuiTooltip, BuiTypography } from '@bitcoin-design/bitcoin-builder-kit';
import { useEffect, useState } from 'react';

const Kraken = {
  getBitcoinPrice: async (): Promise<string> => {
    const response = await fetch('https://api.kraken.com/0/public/Ticker?pair=XXBTZUSD');
    const data = await response.json();
    return data.result['XXBTZUSD'].a[0];
  },
};

function App() {
  const [bitcoinPrice, setBitcoinPrice] = useState<string | null>(null);
  const [loadingPrices, setLoadingPrices] = useState(true);

  useEffect(() => {
    const fetchPrice = async () => {
      try {
        setLoadingPrices(true);
        const price = await Kraken.getBitcoinPrice();
        setBitcoinPrice(price);
      } catch (error) {
        console.error('Error fetching Bitcoin price:', error);
      } finally {
        setLoadingPrices(false);
      }
    };
    fetchPrice();
  }, []);

  return (
    <BuiContainer>
      <BuiHeader
        avatar="https://i.imgur.com/M0R2YcW.png"
        title="Bitcoin Tip Jar"
        subtitle="Send us a tip">
        <BuiLink
          href=""
          target="_blank">
          Source Code
        </BuiLink>
      </BuiHeader>
      <BuiSection>
        <BuiContentBlock>
          <BuiTypography variant="heading-4">
            Tip Options
          </BuiTypography>
          <BuiTickGroup>
            <BuiTick
              label="10"
              tag="USD"
              selected
              price={bitcoinPrice ? `$${(10 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
            />
            <BuiTick
              label="20"
              tag="USD"
              price={bitcoinPrice ? `$${(20 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
            />
            <BuiTick
              label="50"
              tag="USD"
              price={bitcoinPrice ? `$${(50 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
            />
            <BuiTick label="Custom Amount" tag="USD" />
          </BuiTickGroup>
          {!loadingPrices && (
            <BuiButton onClick={() => console.log('continue')}>Continue</BuiButton>
          )}
        </BuiContentBlock>
      </BuiSection>
      <BuiTimeline>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Create new Vite project</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Scaffold UI</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Get price of bitcoin</BuiTimelineEventTitle>
        </BuiTimelineEvent>
      </BuiTimeline>
    </BuiContainer>
  );
}

export default App;

```

--------------------------------

### Usage of Avatar Component (JavaScript)

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/avatar

Shows basic usage of the Avatar component in a JavaScript context. The avatar will expand to fill the available width, so it should be wrapped in a container sized appropriately.

```javascript
const avatarElement = document.createElement('div');
avatarElement.innerHTML = '<div style="width: 50px; height: 50px;"><avatar imageUrl="https://example.com/avatar.png"></avatar></div>';
document.body.appendChild(avatarElement);
```

--------------------------------

### Implement Custom Amount Modal (React/TypeScript)

Source: https://bitcoin-builder-kit-docs.netlify.app/guides/bitcoin-tip-jar/getting-started

This snippet details the implementation of a custom amount modal for the Bitcoin tip jar. It includes adding modal functionality, state management for custom amounts, and updating the UI to trigger and display the custom amount selection.

```typescript
import './index.css';
import { BuiButton, BuiContainer, BuiContentBlock, BuiHeader, BuiLink, BuiSection, BuiTag, BuiTick, BuiTickGroup, BuiTimeline, BuiTimelineEvent, BuiTimelineEventIcon, BuiTimelineEventMarker, BuiTimelineEventTitle, BuiTooltip, BuiTypography, BuiModal, BuiModalHeader, BuiModalBody, BuiModalFooter, BuiInput, BuiNumpad, BuiNumpadButton } from '@bitcoin-design/bitcoin-builder-kit';
import { useEffect, useState } from 'react';

const Kraken = {
  getBitcoinPrice: async (): Promise<string> => {
    const response = await fetch('https://api.kraken.com/0/public/Ticker?pair=XXBTZUSD');
    const data = await response.json();
    return data.result['XXBTZUSD'].a[0];
  },
};

interface CustomAmountProps {
  visible: boolean;
  onClose: () => void;
  onAmountSelect: (amount: string) => void;
}

const CustomAmountModal: React.FC<CustomAmountProps> = ({ visible, onClose, onAmountSelect }) => {
  const [amount, setAmount] = useState('');

  const handleDigit = (digit: string) => {
    setAmount(prev => prev + digit);
  };

  const handleDelete = () => {
    setAmount(prev => prev.slice(0, -1));
  };

  const handleSelect = () => {
    onAmountSelect(amount);
    setAmount('');
    onClose();
  };

  return (
    <BuiModal visible={visible} onClose={onClose}>
      <BuiModalHeader title="Custom Amount" onClose={onClose} />
      <BuiModalBody>
        <BuiInput label="Amount" value={amount} readOnly />
        <BuiNumpad>
          <BuiNumpadButton onClick={() => handleDigit('1')}>1</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('2')}>2</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('3')}>3</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('4')}>4</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('5')}>5</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('6')}>6</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('7')}>7</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('8')}>8</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('9')}>9</BuiNumpadButton>
          <BuiNumpadButton onClick={() => handleDigit('0')}>0</BuiNumpadButton>
          <BuiNumpadButton onClick={handleDelete}>Delete</BuiNumpadButton>
        </BuiNumpad>
      </BuiModalBody>
      <BuiModalFooter>
        <BuiButton onClick={handleSelect}>Select</BuiButton>
      </BuiModalFooter>
    </BuiModal>
  );
};

function App() {
  const [bitcoinPrice, setBitcoinPrice] = useState<string | null>(null);
  const [loadingPrices, setLoadingPrices] = useState(true);
  const [isCustomModalVisible, setIsCustomModalVisible] = useState(false);
  const [customAmount, setCustomAmount] = useState('');

  useEffect(() => {
    const fetchPrice = async () => {
      try {
        setLoadingPrices(true);
        const price = await Kraken.getBitcoinPrice();
        setBitcoinPrice(price);
      } catch (error) {
        console.error('Error fetching Bitcoin price:', error);
      } finally {
        setLoadingPrices(false);
      }
    };
    fetchPrice();
  }, []);

  const handleCustomSelect = (amount: string) => {
    setCustomAmount(amount);
    setIsCustomModalVisible(false);
  };

  return (
    <BuiContainer>
      <BuiHeader
        avatar="https://i.imgur.com/M0R2YcW.png"
        title="Bitcoin Tip Jar"
        subtitle="Send us a tip">
        <BuiLink
          href=""
          target="_blank">
          Source Code
        </BuiLink>
      </BuiHeader>
      <BuiSection>
        <BuiContentBlock>
          <BuiTypography variant="heading-4">
            Tip Options
          </BuiTypography>
          <BuiTickGroup>
            <BuiTick
              label="10"
              tag="USD"
              selected
              price={bitcoinPrice ? `$${(10 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
            />
            <BuiTick
              label="20"
              tag="USD"
              price={bitcoinPrice ? `$${(20 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
            />
            <BuiTick
              label="50"
              tag="USD"
              price={bitcoinPrice ? `$${(50 / parseFloat(bitcoinPrice)).toFixed(8)} BTC` : ''}
            />
            <BuiTick
              label="Custom Amount"
              tag="USD"
              selected={!!customAmount}
              onClick={() => setIsCustomModalVisible(true)}
              price={customAmount ? `$${(parseFloat(customAmount) / parseFloat(bitcoinPrice ?? '1')).toFixed(8)} BTC` : ''}
            />
          </BuiTickGroup>
          {!loadingPrices && (
            <BuiButton onClick={() => console.log('continue')}>Continue</BuiButton>
          )}
        </BuiContentBlock>
      </BuiSection>
      <CustomAmountModal
        visible={isCustomModalVisible}
        onClose={() => setIsCustomModalVisible(false)}
        onAmountSelect={handleCustomSelect}
      />
      <BuiTimeline>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Create new Vite project</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Scaffold UI</BuiTimelineEventTitle>
        </BuiTimelineEvent>
        <BuiTimelineEvent>
          <BuiTimelineEventMarker>
            <BuiTimelineEventIcon>
              <BuiTickTick />
            </BuiTimelineEventIcon>
          </BuiTimelineEventMarker>
          <BuiTimelineEventTitle>Get price of bitcoin</BuiTimelineEventTitle>
        </BuiTimelineEvent>
      </BuiTimeline>
    </BuiContainer>
  );
}

export default App;

```

--------------------------------

### Bitcoin QR Display Properties

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/bitcoin-qr-display

This section outlines the configurable properties of the Bitcoin QR Display component.

```APIDOC
## Properties: Bitcoin QR Display

### Description
This component displays QR codes for Bitcoin addresses and Lightning invoices with various customization options.

### Parameters
#### Request Body (Properties)
- **address** (string) - No - Bitcoin on-chain address
- **lightning** (string) - No - Lightning network invoice
- **option** (string) - No - QR option to display: "unified", "lightning", "onchain"
- **selector** (string) - No - Selector type: "dots", "toggle"
- **size** (number) - No - QR code size in pixels
- **showImage** (boolean) - No - Whether to show an image overlay on the QR code
- **dotType** (string) - No - Style of dots in the QR code
- **dotColor** (string) - No - Color of dots in the QR code
- **unifiedImage** (string) - No - Image URL for unified QR code
- **lightningImage** (string) - No - Image URL for lightning QR code
- **onchainImage** (string) - No - Image URL for on-chain QR code
- **copyOnTap** (boolean) - No - Whether to copy QR data when tapped
- **placeholder** (boolean) - No - Whether to show placeholder state
- **error** (boolean) - No - Whether to show error state
- **errorMessage** (string) - No - Error message to display
- **complete** (boolean) - No - Whether the payment is complete

### Valid Values
#### QR Options
- `unified` - BIP21 URI with both address and lightning
- `lightning` - Lightning network invoice only
- `onchain` - Bitcoin address only

#### Selector Types
- `dots` - Dot-based selector for switching between options
- `toggle` - Toggle button for switching between options

### Behavior
- **Automatic Detection**: If both `address` and `lightning` are provided, the component automatically enables the unified option.
- **Selector Display**: The selector only appears when multiple options are available.
- **QR Generation**: QR codes are generated dynamically based on the selected option.
- **Image Overlay**: Custom images can be overlaid on QR codes for branding.
- **Copy Functionality**: When `copyOnTap` is enabled, tapping the QR code copies the relevant data.

### Events
The component emits a `click` event when the QR code is tapped (if `copyOnTap` is enabled).
```

--------------------------------

### Import Amount Option Tile in React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/amount-option-tile

Shows how to import and utilize the Amount Option Tile component within a React application. This facilitates the creation of interactive UI elements for displaying Bitcoin values.

```javascript
import { AmountOptionTile } from '@bitcoin-builder-kit/react';

function App() {
  return (
    <AmountOptionTile
      emoji="💰"
      message="0.5 BTC"
      showEmoji={true}
      showMessage={true}
      primaryAmount={5000}
      primarySymbol="USD"
      secondaryAmount={0.5}
      secondarySymbol="BTC"
      bitcoinFirst={true}
    />
  );
}
```

--------------------------------

### Input Component Valid Values

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/input

Lists the valid values for specific properties of the input component, such as 'mood' and 'size'.

```APIDOC
## Valid Values: Input Component

### Input Moods
- `neutral`: Default neutral appearance
- `caution`: Warning/caution styling
- `danger`: Error/danger styling
- `success`: Success/positive styling

### Input Sizes
- `large`: Large input size
- `small`: Small input size
```

--------------------------------

### Import Avatar Component (React)

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/avatar

Demonstrates how to import the Avatar component for use in React applications.

```jsx
import Avatar from "@bit/bitcoin-builder-kit/avatar";
```

--------------------------------

### Import NumPad in JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/numpad

Shows how to import the NumPad component for use in JavaScript projects. No specific dependencies are mentioned beyond standard JavaScript environments.

```javascript
import NumPad from './NumPad';
```

--------------------------------

### Import and Usage of Message Component in JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/message

Demonstrates how to import and use the Message component in a JavaScript React application. It covers setting the message text and mood.

```javascript
import { Message } from '@bitcoin-builder/ui';

function App() {
  return (
    <div>
      <Message text="This is a neutral message." mood="neutral" />
      <Message text="Operation successful!" mood="success" />
      <Message text="Please check this warning." mood="caution" />
      <Message text="An error occurred." mood="danger" />
    </div>
  );
}
```

--------------------------------

### Import Button Cluster - React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/button-cluster

Shows how to import the Button Cluster component within a React application. Assumes React and JSX are being used.

```jsx
import { ButtonCluster } from '@bitcoin-builder/react';
```

--------------------------------

### Usage Button Cluster - React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/button-cluster

Illustrates how to render and use the Button Cluster component in a React application, including setting the direction property.

```jsx
<ButtonCluster direction="horizontal">
  {/* Buttons will be rendered here */}
</ButtonCluster>

<ButtonCluster direction="vertical">
  {/* Buttons will be rendered here */}
</ButtonCluster>
```

--------------------------------

### Usage of Avatar Component (React)

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/avatar

Illustrates how to use the Avatar component within a React application. It's recommended to wrap the Avatar in a container to control its size, as it expands to fill available width.

```jsx
function App() {
  return (
    <div style={{ width: '50px', height: '50px' }}>
      <Avatar imageUrl="https://example.com/avatar.png" />
    </div>
  );
}
```

--------------------------------

### Use NumPad in JavaScript

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/numpad

Illustrates the basic usage of the NumPad component in a JavaScript context. The component emits click events with button values.

```javascript
const numpad = new NumPad(document.getElementById('numpad-container'));
numpad.on('click', (value) => {
  console.log('Button clicked:', value);
});
```

--------------------------------

### Import Toggle Component in React

Source: https://bitcoin-builder-kit-docs.netlify.app/packages/ui/toggle

Shows the import statement for the Toggle component within a React application. This is specific to React projects utilizing the component.

```javascript
import Toggle from '@bitcoin-builder-kit/react';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.