dev/vite/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Lit + TS</title>
    <script type="module">
      import {LightningAddress} from 'https://cdn.skypack.dev/@getalby/lightning-tools';
      const bcTheme = window.localStorage.getItem('bcTheme');
      if (bcTheme) {
        window.bcDarkMode = 'class';
        document.documentElement.classList.add(bcTheme);
      } else {
        document.documentElement.classList.add('system');
      }

      const colorBrand = window.localStorage.getItem('colorBrand');
      if (colorBrand) {
        document.documentElement.style.setProperty(
          '--bc-color-brand',
          colorBrand
        );
      }
      const brandMix = window.localStorage.getItem('brandMix');
      if (brandMix) {
        document.documentElement.style.setProperty('--bc-brand-mix', brandMix);
      }

      (async () => {
        const ln = new LightningAddress('hello@getalby.com');
        await ln.fetch();
        const invoice = await ln.requestInvoice({satoshi: 1});
        document
          .getElementById('send-payment')
          .setAttribute('invoice', invoice.paymentRequest);
        document.getElementById('pay-button').addEventListener('click', () => {
          setTimeout(() => {
            // fake a delay fetching an invoice
            document
              .getElementById('pay-button')
              .setAttribute('invoice', invoice.paymentRequest);
          }, 1000);
        });
        document
          .getElementById('payment-flow')
          .setAttribute('invoice', invoice.paymentRequest);
      })();
    </script>
    <script type="module">
      import {
        onConnected,
        onConnecting,
        onDisconnected,
        onModalOpened,
        onModalClosed,
      } from '../../src/index.ts';
      onConnected((provider) => {
        console.info('onConnected callback', provider);
      });
      onConnecting(() => {
        console.info('onConnecting callback');
      });
      onDisconnected(() => {
        console.info('onDisconnected callback');
      });
      onModalOpened(() => {
        console.info('onModalOpened callback');
      });
      onModalClosed(() => {
        console.info('onModalClosed callback');
      });
    </script>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0px;
        @media (prefers-color-scheme: dark) {
          background-color: black;
          color: white;
        }
      }
      .dark body {
        background-color: black;
        color: white;
      }
      .light body {
        background-color: white;
        color: black;
      }
      .dark #button-theme-dark {
        background-color: skyblue;
      }
      .light #button-theme-light {
        background-color: skyblue;
      }
      .system #button-theme-system {
        background-color: skyblue;
      }

      .container {
        padding: 20px;
        max-width: 448px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Programmatic Access</h1>
      <button id="request-provider">Request provider</button>
      <button id="launch-modal">Open modal</button>
      <button id="launch-modal-pay-invoice">Open modal to pay invoice</button>
      <br /><br />
      <button id="launch-modal-pay-invoice-lnurl-verify">
        Open modal to pay invoice (LNURL-verify payment checker)
      </button>

      <br /><br />

      <h1>Light / Dark Mode</h1>

      <button
        id="button-theme-system"
        onclick="window.localStorage.removeItem('bcTheme');window.location.reload();"
      >
        System
      </button>
      <button
        id="button-theme-dark"
        onclick="window.localStorage.setItem('bcTheme', 'dark');window.location.reload();"
      >
        Force Dark
      </button>
      <button
        id="button-theme-light"
        onclick="window.localStorage.setItem('bcTheme', 'light');window.location.reload();"
      >
        Force Light
      </button>

      <h1>Settings</h1>
      <p>Name (e.g. Zap.Stream)</p>
      <input
        id="app-name"
        onchange="localStorage.setItem('app-name', document.getElementById('app-name').value); window.location.reload()"
      />
      <p>Filters (e.g. nwc)</p>
      <input
        id="filters"
        onchange="localStorage.setItem('filters', document.getElementById('filters').value); window.location.reload()"
      />
      <p>Invoice</p>
      <input
        id="invoice"
        onchange="localStorage.setItem('invoice', document.getElementById('invoice').value); window.location.reload()"
      />
      <p>Payment methods (all, external, internal)</p>
      <input
        id="payment-methods"
        onchange="localStorage.setItem('payment-methods', document.getElementById('payment-methods').value); window.location.reload()"
      />
      <p>Show Balance</p>
      <input
        id="show-balance"
        type="checkbox"
        onchange="localStorage.setItem('show-balance', document.getElementById('show-balance').checked.toString()); window.location.reload()"
        style="width: 24px; height: 24px"
      />
      <br />
      <br />
      <h1>Colors</h1>
      <button
        onclick="window.localStorage.removeItem('colorBrand');window.localStorage.removeItem('brandMix');window.location.reload()"
      >
        Default
      </button>
      <button
        onclick="window.localStorage.setItem('colorBrand', '#21ecc7');window.localStorage.setItem('brandMix', '75%');window.location.reload()"
        style="background-color: #21ecc7"
      >
        Geyser
      </button>
      <button
        onclick="window.localStorage.setItem('colorBrand', '#fada5e');window.localStorage.setItem('brandMix', '75%');window.location.reload()"
        style="background-color: #fada5e"
      >
        Stacker News
      </button>
      <button
        onclick="window.localStorage.setItem('colorBrand', '#000000');window.localStorage.setItem('brandMix', '50%');window.location.reload()"
        style="background-color: #000000; color: #fff"
      >
        Black
      </button>
      <button
        onclick="window.localStorage.setItem('colorBrand', '#ffffff');window.localStorage.setItem('brandMix', '50%');window.location.reload()"
        style="background-color: #ffffff"
      >
        White
      </button>
      <button
        onclick="window.localStorage.setItem('colorBrand', prompt('color','#ffffff'));window.localStorage.setItem('brandMix', prompt('brand mix', '100%'));window.location.reload()"
        style="background-color: #ff00ff"
      >
        Custom
      </button>

      <h1>Flows</h1>
      <h2>Connect Flow</h2>
      <bc-connect></bc-connect>
      <h2>Payment Flow</h2>
      <bc-payment id="payment-flow"></bc-payment>

      <h1>Components</h1>
      <h2>Button</h2>
      <bc-button></bc-button>
      <a href="/dev/vite/button.html">Button on its own</a>
      <h2>Pay Button</h2>
      <bc-pay-button id="pay-button"></bc-pay-button>

      <h2>Modal header</h2>
      <bc-modal-header show-help>Example Title</bc-modal-header>
      <h2>Navbar</h2>
      <bc-navbar heading="Custom Heading"></bc-navbar>
      <h2>Router outlet</h2>
      <bc-router-outlet></bc-router-outlet>

      <h2>Request Payment Screen</h2>
      <p>
        Note: connect button will do nothing because requires higher component.
        Use "Payment Flow" above instead.
      </p>
      <bc-send-payment
        id="send-payment"
        invoice="lnbc10n1pj4g7ugpp5h0lld9qzh06ngn8ur756rva0ntfdfg34h298337rljjyztxy8rfqhp50kncf9zk35xg4lxewt4974ry6mudygsztsz8qn3ar8pn3mtpe50scqzzsxqyz5vqsp5lwlnu7xjs7hj7vltx7rhzsjf60l5mwckuw93qngjrz7sdhdkw7gs9qyyssqzy543rxhkdtncjrmuzlz4lrh2eauldawa9np5yysh7dhqhv8kaahydurha2cfelr7t6wt33xse7fdykupnjv36na6x6crrhy53lyg6cqf2jhjj"
        payment-methods="all"
      ></bc-send-payment>

      <h2>Start screen</h2>
      <bc-start></bc-start>

      <h2>Help screen</h2>
      <bc-help></bc-help>
      <h2>New Wallet</h2>
      <bc-new-wallet></bc-new-wallet>
      <h2>NWC screen</h2>
      <bc-nwc></bc-nwc>

      <h2>Connector List</h2>
      <bc-connector-list></bc-connector-list>

      <h2>Balance</h2>
      <bc-balance></bc-balance>

      <h2>Misc Helpers</h2>
      <h3>Pay an invoice</h3>
      <button id="pay-invoice">Pay 1 sat to Alby team</button>
      <h3>Make an invoice</h3>
      <button id="make-invoice">Make a 1 sat invoice</button>
      <h3>Connector config</h3>
      <button id="get-connector-config">Get connector config</button>
      <h3>Try it yourself</h3>
      <p>
        Open devtools and use <b>window.bitcoinConnectSandbox</b> to access the
        Bitcoin Connect API
      </p>
    </div>
    <script type="module">
      import {LightningAddress} from 'https://cdn.skypack.dev/@getalby/lightning-tools';
      import {
        init,
        launchModal,
        launchPaymentModal,
        requestProvider,
        getConnectorConfig,
      } from '../../src/index.ts';

      const appName = localStorage.getItem('app-name');
      document.getElementById('app-name').value = appName;

      const filters = localStorage.getItem('filters');
      document.getElementById('filters').value = filters;

      const invoice = localStorage.getItem('invoice');
      document.getElementById('invoice').value = invoice;

      const paymentMethods = localStorage.getItem('payment-methods');
      document.getElementById('payment-methods').value = paymentMethods;

      const showBalance =
        localStorage.getItem('show-balance') !== false.toString();
      document.getElementById('show-balance').checked = showBalance;

      init({
        appName,
        filters: filters?.split(','),
        showBalance,
        // example of customizing WebLN provider
        /*providerConfig: {
          nwc: {
            authorizationUrlOptions: {
              requestMethods: ['get_balance', 'make_invoice', 'lookup_invoice'],
            },
          },
        },*/
      });

      document
        .getElementById('request-provider')
        .addEventListener('click', async () => {
          try {
            const provider = await requestProvider();
            console.log('WebLN provider: ', provider);
            alert('WebLN provider available');
          } catch (error) {
            console.error('Failed to request provider:', error);
            alert('Failed to request provider');
          }
        });
      document.getElementById('launch-modal').addEventListener('click', () => {
        launchModal();
      });
      document
        .getElementById('launch-modal-pay-invoice')
        .addEventListener('click', () => {
          const invoice = localStorage.getItem('invoice');
          const invoiceToPay = invoice || window.prompt('paste invoice');
          if (!invoiceToPay) {
            alert('No invoice provided');
            return;
          }
          launchPaymentModal({
            invoice: invoiceToPay,
            paymentMethods,
            onPaid: (response) => {
              alert('Paid! ' + response.preimage);
            },
            onCancelled: () => {
              alert('Payment cancelled');
            },
          });
        });

      document
        .getElementById('launch-modal-pay-invoice-lnurl-verify')
        .addEventListener('click', async () => {
          const ln = new LightningAddress('hello@getalby.com');
          await ln.fetch();
          const invoice = await ln.requestInvoice({satoshi: 1});

          const {setPaid} = launchPaymentModal({
            invoice: invoice.paymentRequest,
            paymentMethods,
            onPaid: (response) => {
              clearInterval(checkPaymentInterval);
              alert('Received payment! ' + response.preimage);
            },
            onCancelled: () => {
              clearInterval(checkPaymentInterval);
              alert('Payment cancelled');
            },
          });

          const checkPaymentInterval = setInterval(async () => {
            const paid = await invoice.verifyPayment();

            if (paid) {
              setPaid({
                preimage: invoice.preimage,
              });
            }
          }, 1000);
        });

      document
        .getElementById('pay-invoice')
        .addEventListener('click', async () => {
          try {
            const ln = new LightningAddress('hello@getalby.com');
            await ln.fetch();
            const invoice = await ln.requestInvoice({satoshi: 1});
            const provider = await requestProvider();
            const result = await provider.sendPayment(invoice.paymentRequest);
            alert('PAID! ' + JSON.stringify(result));
          } catch (error) {
            console.error(error);
            alert('Failed to pay: ' + error.message || JSON.stringify(error));
          }
        });

      document
        .getElementById('make-invoice')
        .addEventListener('click', async () => {
          try {
            const provider = await requestProvider();
            const result = await provider.makeInvoice({
              amount: 1,
            });
            prompt('Invoice created!', result.paymentRequest);
          } catch (error) {
            console.error(error);
            alert(
              'Failed to make invoice: ' + error.message ||
                JSON.stringify(error)
            );
          }
        });

      document
        .getElementById('get-connector-config')
        .addEventListener('click', async () => {
          alert(JSON.stringify(getConnectorConfig(), null, 2));
        });

      document.addEventListener('bc:onpaid', (e) => console.log('PAID!', e));

      if (paymentMethods) {
        document
          .getElementById('send-payment')
          .setAttribute('payment-methods', paymentMethods);
        document
          .getElementById('payment-flow')
          .setAttribute('payment-methods', paymentMethods);
        document
          .getElementById('pay-button')
          .setAttribute('payment-methods', paymentMethods);
      }
    </script>
    <script type="module">
      import * as bitcoinConnectSandbox from '../../src/index.ts';
      window.bitcoinConnectSandbox = bitcoinConnectSandbox;
    </script>
  </body>
</html>