@swingby-protocol/widget/dist/widget.esm.js

Small util to load Swingby's swap widget in your app.

import { stringifyUrl } from 'query-string';

var getHeight = function getHeight(_ref) {
  var size = _ref.size;

  switch (size) {
    case 'banner':
      return 76 / 16 + "rem";

    case 'small':
      return 375 / 16 + "rem";

    case 'big':
      return 510 / 16 + "rem";
  }
};

var createWidget = function createWidget(_ref) {
  var resource = _ref.resource,
      mode = _ref.mode,
      _ref$iframeTitle = _ref.iframeTitle,
      iframeTitle = _ref$iframeTitle === void 0 ? 'Skybridge Swap Widget' : _ref$iframeTitle,
      size = _ref.size,
      hash = _ref.hash,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? 'auto' : _ref$theme,
      locale = _ref.locale,
      defaultCurrencyDeposit = _ref.defaultCurrencyDeposit,
      defaultCurrencyReceiving = _ref.defaultCurrencyReceiving,
      defaultAddressReceiving = _ref.defaultAddressReceiving,
      defaultAmountDesired = _ref.defaultAmountDesired,
      affiliateCode = _ref.affiliateCode,
      bridge = _ref.bridge;
  var url = stringifyUrl({
    url: 'https://widget.skybridge.exchange',
    query: {
      mode: mode,
      resource: resource,
      hash: hash,
      locale: locale,
      defaultCurrencyDeposit: defaultCurrencyDeposit,
      defaultCurrencyReceiving: defaultCurrencyReceiving,
      defaultAddressReceiving: defaultAddressReceiving,
      defaultAmountDesired: defaultAmountDesired,
      theme: theme,
      aff: affiliateCode,
      bridge: bridge
    }
  });
  return {
    __sswi__url: url,
    __sswi__iframe: "<iframe allow=\"clipboard-write\" title=\"" + iframeTitle + "\" src=\"" + url + "\" style=\"border: none; display: block; width: 100%; height: " + getHeight({
      size: size
    }) + ";\"></iframe>"
  };
};

var getHtml = function getHtml(_ref) {
  var __sswi__iframe = _ref.widget.__sswi__iframe;
  return __sswi__iframe;
};

var getUrl = function getUrl(_ref) {
  var __sswi__url = _ref.widget.__sswi__url;
  return __sswi__url;
};

var popupContainer = null;
var closePopup = function closePopup() {
  if (!popupContainer) return;
  popupContainer.remove();
  popupContainer = null;
};
var openPopup = function openPopup(_ref) {
  var widget = _ref.widget,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? 9000 : _ref$zIndex;
  if (typeof document === 'undefined') return;
  if (popupContainer) return;
  popupContainer = document.createElement('div');
  popupContainer.setAttribute('style', "background: #1c232f33; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; align-items: center; justify-content: center; z-index: " + zIndex + ";");
  popupContainer.addEventListener('click', closePopup);
  var box = document.createElement('div');
  box.setAttribute('style', "background: transparent; max-width: " + 445 / 16 + "rem; width: 100%; box-shadow: 0px 50px 78px -10px rgba(43, 55, 74, 0.152644); border-radius: 14px; overflow: hidden;");
  box.innerHTML = widget.__sswi__iframe;
  popupContainer.appendChild(box);
  document.body.appendChild(popupContainer);
};

export { closePopup, createWidget, getHtml, getUrl, openPopup };
//# sourceMappingURL=widget.esm.js.map