brk/website_next/wallets/selector-view.js

/**
 * @typedef {Object} StoredWallet
 * @property {string} id
 * @property {string} name
 */

/**
 * @typedef {Object} WalletSelectorRenderOptions
 * @property {StoredWallet[]} wallets
 * @property {string} selectedWalletId
 * @property {(walletId: string) => void} onSelect
 */

/**
 * @typedef {Object} WalletSelectorInteractionOptions
 * @property {() => string} getSelectedWalletId
 * @property {(walletId: string) => void} onSelect
 */

/**
 * @param {HTMLElement} walletList
 * @param {WalletSelectorRenderOptions} options
 */
export function renderWalletSelector(walletList, options) {
  walletList.replaceChildren();

  for (const wallet of options.wallets) {
    const button = document.createElement("button");
    const selected = wallet.id === options.selectedWalletId;

    button.type = "button";
    button.className = "wallets__wallet-button";
    button.setAttribute("aria-pressed", selected ? "true" : "false");
    button.setAttribute("data-wallet-id", wallet.id);
    button.append(wallet.name);
    button.addEventListener("click", () => {
      options.onSelect(wallet.id);
    });
    walletList.append(button);
  }
}

/**
 * @param {HTMLElement} walletList
 * @param {WalletSelectorInteractionOptions} options
 */
export function initWalletSelector(walletList, options) {
  function selectSnappedWallet() {
    const buttons = [...walletList.querySelectorAll(".wallets__wallet-button")];

    if (buttons.length === 0) return;

    const listRect = walletList.getBoundingClientRect();
    const listCenter = listRect.left + listRect.width / 2;
    const closest = buttons.reduce((best, button) => {
      const rect = button.getBoundingClientRect();
      const center = rect.left + rect.width / 2;
      const distance = Math.abs(center - listCenter);

      return distance < best.distance
        ? { button, distance }
        : best;
    }, {
      button: buttons[0],
      distance: Number.POSITIVE_INFINITY,
    });
    const id = closest.button.getAttribute("data-wallet-id");

    if (id && id !== options.getSelectedWalletId()) {
      options.onSelect(id);
    }
  }

  walletList.addEventListener("scrollend", () => {
    selectSnappedWallet();
  });

  walletList.addEventListener("wheel", (event) => {
    const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY)
      ? event.deltaX
      : event.deltaY;

    if (delta === 0) return;

    const maxScrollLeft = walletList.scrollWidth - walletList.clientWidth;
    const nextScrollLeft = Math.max(
      0,
      Math.min(maxScrollLeft, walletList.scrollLeft + delta),
    );

    if (nextScrollLeft === walletList.scrollLeft) return;

    event.preventDefault();
    walletList.scrollLeft = nextScrollLeft;
  }, { passive: false });
}