@creit.tech/stellar-wallets-kit/components/selector-modal/stellar-selector-modal.mjs.map

A kit to handle all Stellar Wallets at once

{"version":3,"file":"stellar-selector-modal.mjs","sources":["../../../src/components/selector-modal/stellar-selector-modal.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { IModalTheme } from '../../types';\nimport {\n  backdropStyles,\n  modalAnimations,\n  modalDialogBodyStyles,\n  modalHelpSection,\n  modalWalletsSection,\n  modalDialogStyles,\n} from './styles';\n\nexport enum ModalThemeType {\n  DARK = 'DARK',\n  LIGHT = 'LIGHT',\n}\n\nexport const ModalThemes: { [key in ModalThemeType]: IModalTheme } = {\n  DARK: {\n    bgColor: '#161616',\n    textColor: '#a0a0a0',\n    solidTextColor: '#ededed',\n    headerButtonColor: '#707070',\n    dividerColor: 'rgba(255, 255, 255, 0.15)',\n    helpBgColor: '#1c1c1c',\n    notAvailableTextColor: '#a0a0a0',\n    notAvailableBgColor: '#232323',\n    notAvailableBorderColor: '#343434',\n  },\n  LIGHT: {\n    bgColor: '#fcfcfc',\n    textColor: '#181818',\n    solidTextColor: '#000000',\n    headerButtonColor: '#8f8f8f',\n    dividerColor: 'rgba(0, 0, 0, 0.15)',\n    helpBgColor: '#f8f8f8',\n    notAvailableTextColor: '#6f6f6f',\n    notAvailableBgColor: '#f3f3f3',\n    notAvailableBorderColor: '#e2e2e2',\n  },\n};\n\n@customElement('stellar-accounts-selector')\nexport class StellarSelectorModal extends LitElement {\n  static override styles = [\n    css`\n      :host * {\n        box-sizing: border-box;\n      }\n\n      .mb-0 {\n        margin-bottom: 0 !important;\n      }\n    `,\n    modalDialogStyles,\n    modalDialogBodyStyles,\n    modalHelpSection,\n    backdropStyles,\n    modalAnimations,\n    modalWalletsSection,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  showModal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  loadingAccounts: boolean = false;\n\n  @state()\n  closingModal: boolean = false;\n\n  @property({ type: String, reflect: true })\n  modalTitle: string = 'Pick your account';\n\n  @property({ type: String, reflect: true, converter: value => (value ? JSON.parse(value) : []) })\n  accounts: { index: number; publicKey: string }[] = [];\n\n  override connectedCallback() {\n    super.connectedCallback();\n  }\n\n  async pickAccount(option: { publicKey: string; index: number }): Promise<void> {\n    this.closingModal = true;\n\n    await new Promise(r => setTimeout(r, 280));\n\n    this.dispatchEvent(\n      new CustomEvent('account-selected', {\n        detail: option,\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.closingModal = false;\n  }\n\n  async closeModal(): Promise<void> {\n    this.closingModal = true;\n\n    await new Promise(r => setTimeout(r, 280));\n\n    this.showModal = false;\n\n    this.dispatchEvent(\n      new CustomEvent('account-selector-closed', {\n        detail: new Error('Account selector closed'),\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.closingModal = false;\n  }\n\n  override render() {\n    const loadingIcon = html`\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <style>\n          .spinner_qM83 {\n            animation: spinner_8HQG 1.05s infinite;\n            fill: white;\n          }\n          .spinner_oXPr {\n            animation-delay: 0.1s;\n          }\n          .spinner_ZTLf {\n            animation-delay: 0.2s;\n          }\n          @keyframes spinner_8HQG {\n            0%,\n            57.14% {\n              animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);\n              transform: translate(0);\n            }\n            28.57% {\n              animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);\n              transform: translateY(-6px);\n            }\n            100% {\n              transform: translate(0);\n            }\n          }\n        </style>\n        <circle class=\"spinner_qM83\" cx=\"4\" cy=\"12\" r=\"3\" />\n        <circle class=\"spinner_qM83 spinner_oXPr\" cx=\"12\" cy=\"12\" r=\"3\" />\n        <circle class=\"spinner_qM83 spinner_ZTLf\" cx=\"20\" cy=\"12\" r=\"3\" />\n      </svg>\n    `;\n\n    const accountsList = html`\n      <ul class=\"wallets-body\">\n        ${this.accounts.map(\n          ({ publicKey, index }) => html`\n            <li @click=\"${() => this.pickAccount({ publicKey, index })}\" class=\"wallets-body__item\">\n              <span style=\"margin-right: 1rem;\" class=\"dialog-text-solid\">\n                ${publicKey.slice(0, 4)}....${publicKey.slice(-6)}\n              </span>\n              <span class=\"dialog-text\">(44'/148'/${index}')</span>\n            </li>\n          `\n        )}\n      </ul>\n    `;\n\n    return html`\n      <dialog style=\"\" class=\"dialog-modal ${this.closingModal ? 'closing' : ''}\" .open=${this.showModal}>\n        <section class=\"dialog-modal-body\">\n          <div class=\"dialog-modal-body__wallets\">\n            <section class=\"wallets-container\">\n              <header class=\"wallets-header\">\n                <h2 class=\"wallets-header__modal-title dialog-text-solid\">${this.modalTitle}</h2>\n\n                <button @click=${() => this.closeModal()} class=\"wallets-header__button\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"#000000\"\n                    height=\"20px\"\n                    width=\"20px\"\n                    viewBox=\"0 0 490 490\">\n                    <polygon\n                      points=\"456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490   489.292,457.678 277.331,245.004 489.292,32.337 \" />\n                  </svg>\n                </button>\n              </header>\n\n              ${this.loadingAccounts ? loadingIcon : accountsList}\n            </section>\n          </div>\n        </section>\n      </dialog>\n\n      <div\n        style=\"position: fixed; z-index: 950\"\n        class=\"backdrop ${this.closingModal ? 'closing' : ''}\"\n        @click=${() => this.closeModal()}></div>\n    `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA2Ca,IAAA,oBAAA,GAAN,cAAmC,UAAW,CAAA;AAAA,EAA9C,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAoBL,IAAqB,IAAA,CAAA,SAAA,GAAA,KAAA;AAGrB,IAA2B,IAAA,CAAA,eAAA,GAAA,KAAA;AAG3B,IAAwB,IAAA,CAAA,YAAA,GAAA,KAAA;AAGxB,IAAqB,IAAA,CAAA,UAAA,GAAA,mBAAA;AAGrB,IAAA,IAAA,CAAA,QAAA,GAAmD,EAAC;AAAA;AAAA,EAE3C,iBAAoB,GAAA;AAC3B,IAAA,KAAA,CAAM,iBAAkB,EAAA;AAAA;AAC1B,EAEA,MAAM,YAAY,MAA6D,EAAA;AAC7E,IAAA,IAAA,CAAK,YAAe,GAAA,IAAA;AAEpB,IAAA,MAAM,IAAI,OAAQ,CAAA,CAAA,CAAA,KAAK,UAAW,CAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAEzC,IAAK,IAAA,CAAA,aAAA;AAAA,MACH,IAAI,YAAY,kBAAoB,EAAA;AAAA,QAClC,MAAQ,EAAA,MAAA;AAAA,QACR,OAAS,EAAA,IAAA;AAAA,QACT,QAAU,EAAA;AAAA,OACX;AAAA,KACH;AAEA,IAAA,IAAA,CAAK,YAAe,GAAA,KAAA;AAAA;AACtB,EAEA,MAAM,UAA4B,GAAA;AAChC,IAAA,IAAA,CAAK,YAAe,GAAA,IAAA;AAEpB,IAAA,MAAM,IAAI,OAAQ,CAAA,CAAA,CAAA,KAAK,UAAW,CAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAEzC,IAAA,IAAA,CAAK,SAAY,GAAA,KAAA;AAEjB,IAAK,IAAA,CAAA,aAAA;AAAA,MACH,IAAI,YAAY,yBAA2B,EAAA;AAAA,QACzC,MAAA,EAAQ,IAAI,KAAA,CAAM,yBAAyB,CAAA;AAAA,QAC3C,OAAS,EAAA,IAAA;AAAA,QACT,QAAU,EAAA;AAAA,OACX;AAAA,KACH;AAEA,IAAA,IAAA,CAAK,YAAe,GAAA,KAAA;AAAA;AACtB,EAES,MAAS,GAAA;AAChB,IAAA,MAAM,WAAc,GAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAkCpB,IAAA,MAAM,YAAe,GAAA,IAAA;AAAA;AAAA,QAAA,EAEf,KAAK,QAAS,CAAA,GAAA;AAAA,MACd,CAAC,EAAE,SAAW,EAAA,KAAA,EAAY,KAAA,IAAA;AAAA,wBAAA,EACV,MAAM,IAAK,CAAA,WAAA,CAAY,EAAE,SAAW,EAAA,KAAA,EAAO,CAAC,CAAA;AAAA;AAAA,gBAEpD,EAAA,SAAA,CAAU,MAAM,CAAG,EAAA,CAAC,CAAC,CAAO,IAAA,EAAA,SAAA,CAAU,KAAM,CAAA,CAAA,CAAE,CAAC;AAAA;AAAA,kDAAA,EAEb,KAAK,CAAA;AAAA;AAAA,UAAA;AAAA,KAGhD;AAAA;AAAA,IAAA,CAAA;AAIL,IAAO,OAAA,IAAA;AAAA,2CAAA,EACkC,KAAK,YAAe,GAAA,SAAA,GAAY,EAAE,CAAA,QAAA,EAAW,KAAK,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0EAAA,EAK5B,KAAK,UAAU,CAAA;;AAAA,+BAE1D,EAAA,MAAM,IAAK,CAAA,UAAA,EAAY,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,cAaxC,EAAA,IAAA,CAAK,eAAkB,GAAA,WAAA,GAAc,YAAY;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,wBAQvC,EAAA,IAAA,CAAK,YAAe,GAAA,SAAA,GAAY,EAAE,CAAA;AAAA,eAC3C,EAAA,MAAM,IAAK,CAAA,UAAA,EAAY,CAAA;AAAA,IAAA,CAAA;AAAA;AAGxC;AA3Ja,oBAAA,CACK,MAAS,GAAA;AAAA,EACvB,GAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,EASA,iBAAA;AAAA,EACA,qBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA;AAGA,eAAA,CAAA;AAAA,EADC,SAAS,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,EAAS,MAAM;AAAA,CAAA,EAnB/B,oBAoBX,CAAA,SAAA,EAAA,WAAA,EAAA,CAAA,CAAA;AAGA,eAAA,CAAA;AAAA,EADC,SAAS,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,EAAS,MAAM;AAAA,CAAA,EAtB/B,oBAuBX,CAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,CAAA;AAGA,eAAA,CAAA;AAAA,EADC,KAAM;AAAA,CAAA,EAzBI,oBA0BX,CAAA,SAAA,EAAA,cAAA,EAAA,CAAA,CAAA;AAGA,eAAA,CAAA;AAAA,EADC,SAAS,EAAE,IAAA,EAAM,MAAQ,EAAA,OAAA,EAAS,MAAM;AAAA,CAAA,EA5B9B,oBA6BX,CAAA,SAAA,EAAA,YAAA,EAAA,CAAA,CAAA;AAGA,eAAA,CAAA;AAAA,EADC,QAAS,CAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,IAAM,EAAA,SAAA,EAAW,CAAU,KAAA,KAAA,KAAA,GAAQ,KAAK,KAAM,CAAA,KAAK,CAAI,GAAA,IAAK;AAAA,CAAA,EA/BpF,oBAgCX,CAAA,SAAA,EAAA,UAAA,EAAA,CAAA,CAAA;AAhCW,oBAAN,GAAA,eAAA,CAAA;AAAA,EADN,cAAc,2BAA2B;AAAA,CAC7B,EAAA,oBAAA,CAAA;;;;"}