@stacks/connect-ui
Advanced tools
Comparing version 6.1.3 to 6.1.4-alpha.a82b2d4.0
@@ -5,10 +5,7 @@ 'use strict'; | ||
const index = require('./index-0b8ea6c8.js'); | ||
const index = require('./index-d4ed74d5.js'); | ||
const session = require('./session-ba2bc548.js'); | ||
const closeIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcgNyAxMCAxME0xNyA3IDcgMTciIHN0cm9rZT0iIzI0MjYyOSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=='; | ||
const leatherLogoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgcng9IjI2LjgzODciIGZpbGw9IiMxMjEwMEYiLz4KPHBhdGggZD0iTTc0LjkxNzEgNTIuNzExNEM4Mi40NzY2IDUxLjU0MDggOTMuNDA4NyA0My41ODA0IDkzLjQwODcgMzcuMzc2MUM5My40MDg3IDM1LjUwMzEgOTEuODk2OCAzNC4yMTU0IDg5LjY4NzEgMzQuMjE1NEM4NS41MDA0IDM0LjIxNTQgNzguNDA2MSA0MC41MzY4IDc0LjkxNzEgNTIuNzExNFpNMzkuOTExIDgzLjQ5OTFDMzAuMDI1NiA4My40OTkxIDI5LjIxMTUgOTMuMzMyNCAzOS4wOTY5IDkzLjMzMjRDNDMuNTE2MyA5My4zMzI0IDQ4Ljg2NjEgOTEuNTc2NCA1MS42NTczIDg4LjQxNTdDNDcuNTg2OCA4NC45MDM4IDQ0LjIxNDEgODMuNDk5MSAzOS45MTEgODMuNDk5MVpNMTAyLjgyOSA3OS4yODQ4QzEwMy40MSA5NS43OTA3IDk1LjAzNjkgMTA1LjAzOSA4MC44NDg0IDEwNS4wMzlDNzIuNDc0OCAxMDUuMDM5IDY4LjI4ODEgMTAxLjg3OCA1OS4zMzMgOTYuMDI0OUM1NC42ODEgMTAxLjE3NiA0NS44NDIzIDEwNS4wMzkgMzguNTE1NCAxMDUuMDM5QzEzLjI3ODUgMTA1LjAzOSAxNC4zMjUyIDcyLjg0NjMgNDAuMDI3MyA3Mi44NDYzQzQ1LjM3NzEgNzIuODQ2MyA0OS45MTI4IDc0LjI1MTEgNTUuNzI3NyA3Ny44OEw1OS41NjU2IDY0LjQxNzdDNDMuNzQ4OSA2MC4wODY0IDM1Ljg0MDUgNDcuOTExOCA0My42MzI2IDMwLjQ2OTNINTYuMTkyOUM0OS4yMTUgNDIuMDU4NiA1My45ODMyIDUxLjY1NzggNjIuODIyIDUyLjcxMTRDNjcuNTkwMyAzNS43MzcyIDc3LjgyNDYgMjIuNTA5IDkxLjQzMTYgMjIuNTA5Qzk5LjEwNzQgMjIuNTA5IDEwNS4xNTUgMjcuNTQyOCAxMDUuMTU1IDM2LjY3MzdDMTA1LjE1NSA1MS4zMDY2IDg2LjA4MTkgNjMuMjQ3MSA3MS42NjA3IDY0LjQxNzdMNjUuNzI5NSA4NS4zNzIxQzcyLjQ3NDggOTMuMjE1MyA5MS4xOTkgMTAwLjgyNCA5MS4xOTkgNzkuMjg0OEgxMDIuODI5WiIgZmlsbD0iI0Y1RjFFRCIvPgo8L3N2Zz4K'; | ||
const xverseWalletLogoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iMTAuMjkyNCIgZmlsbD0iIzEyMTUxRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjk0OTQgMTEuMTAxQzE2LjUxMjIgNi45NjYzMiAyMy40ODgxIDYuOTY2MzUgMjguMDUwOSAxMS4xMDFMMjYuOTg3MiAxMi4xNjQ3QzIzLjAxMzQgOC42MTQ2NiAxNi45ODcgOC42MTQ2MyAxMy4wMTMxIDEyLjE2NDZMMTEuOTQ5NCAxMS4xMDFaTTI4Ljg5OTQgMTEuOTQ5NkwyNy44MzU4IDEzLjAxMzNDMzEuMzg1NSAxNi45ODcxIDMxLjM4NTUgMjMuMDEzMyAyNy44MzU2IDI2Ljk4NzFMMjguODk5MiAyOC4wNTA4QzMzLjAzMzggMjMuNDg4MSAzMy4wMzM4IDE2LjUxMjQgMjguODk5NCAxMS45NDk2Wk0xMy4wMTMzIDI3LjgzNTdDMTYuOTg3MSAzMS4zODU1IDIzLjAxMzIgMzEuMzg1NSAyNi45ODcgMjcuODM1NkwyOC4wNTA3IDI4Ljg5OTNDMjMuNDg3OSAzMy4wMzM4IDE2LjUxMjQgMzMuMDMzOCAxMS45NDk2IDI4Ljg5OTRMMTMuMDEzMyAyNy44MzU3Wk0xMi4xNjQ3IDI2Ljk4NzJMMTEuMTAxIDI4LjA1MDlDNi45NjYzOCAyMy40ODgxIDYuOTY2MzIgMTYuNTEyNCAxMS4xMDA4IDExLjk0OTVMMTIuMTY0NSAxMy4wMTMyQzguNjE0NjMgMTYuOTg3MSA4LjYxNDY5IDIzLjAxMzQgMTIuMTY0NyAyNi45ODcyWk0yNy40Nzg2IDE0Ljk4OTZDMjcuMTU3OSAxNC41MTIxIDI2Ljc4NjQgMTQuMDU4NSAyNi4zNjQzIDEzLjYzNjRDMjMuNTY4MiAxMC44NDAyIDE5LjM4OTkgMTAuMjY4NSAxNi4wMjg2IDExLjkyMTRMMTYuNzgxOSAxMy4yMjYxQzE5LjU2NjQgMTEuOTAzMiAyMi45OTc3IDEyLjM5NDEgMjUuMzAyMiAxNC42OTg1QzI1LjYyOTMgMTUuMDI1NiAyNS45MTk4IDE1LjM3NTQgMjYuMTczOCAxNS43NDI5TDI3LjQ3ODYgMTQuOTg5NlpNMjYuNzc0NSAxNi43ODE3TDI4LjA3OTMgMTYuMDI4NEMyOS43MzIyIDE5LjM4OTggMjkuMTYwNiAyMy41NjgyIDI2LjM2NDMgMjYuMzY0NEMyNS45NDIyIDI2Ljc4NjYgMjUuNDg4NSAyNy4xNTggMjUuMDEwOCAyNy40Nzg4TDI0LjI1NzYgMjYuMTc0MUMyNC42MjUxIDI1LjkyIDI0Ljk3NSAyNS42Mjk0IDI1LjMwMjIgMjUuMzAyMkMyNy42MDY3IDIyLjk5NzcgMjguMDk3NSAxOS41NjYyIDI2Ljc3NDUgMTYuNzgxN1pNMjMuMjE4NyAyNi43NzQ3QzIwLjQzNDIgMjguMDk3NSAxNy4wMDI5IDI3LjYwNjYgMTQuNjk4NSAyNS4zMDIyQzE0LjM3MTIgMjQuOTc0OSAxNC4wODA1IDI0LjYyNDkgMTMuODI2NCAyNC4yNTczTDEyLjUyMTcgMjUuMDEwNkMxMi44NDI1IDI1LjQ4ODMgMTMuMjE0IDI1Ljk0MjEgMTMuNjM2MyAyNi4zNjQ0QzE2LjQzMjUgMjkuMTYwNSAyMC42MTA3IDI5LjczMjIgMjMuOTcyIDI4LjA3OTRMMjMuMjE4NyAyNi43NzQ3Wk0xMS45MjExIDIzLjk3MTdMMTMuMjI1OCAyMy4yMTg0QzExLjkwMzMgMjAuNDM0IDEyLjM5NDIgMTcuMDAyOSAxNC42OTg1IDE0LjY5ODVDMTUuMDI1NyAxNC4zNzE0IDE1LjM3NTUgMTQuMDgwOCAxNS43NDMgMTMuODI2N0wxNC45ODk3IDEyLjUyMkMxNC41MTIxIDEyLjg0MjggMTQuMDU4NSAxMy4yMTQyIDEzLjYzNjMgMTMuNjM2NEMxMC44NDAzIDE2LjQzMjQgMTAuMjY4NSAyMC42MTA0IDExLjkyMTEgMjMuOTcxN1pNMjQuMjQyOCAxNS43NTc0QzI1LjEyODcgMTYuNjQzMyAyNS42Nzk3IDE3LjczNzMgMjUuODk1NyAxOC44ODIxTDI0LjM4OTIgMTkuMDEzOUMyNC4yMDkzIDE4LjIwOTcgMjMuODA2NCAxNy40NDU0IDIzLjE4MDYgMTYuODE5NUMyMi4zNTU2IDE1Ljk5NDUgMjEuMjg5NyAxNS41NTY5IDIwLjIwOTIgMTUuNTA3TDIwLjA3NzQgMTQuMDAwNUMyMS41ODcxIDE0LjAxOTggMjMuMDkwOSAxNC42MDU0IDI0LjI0MjggMTUuNzU3NFpNMTguODgyIDE0LjEwNDVDMTcuNzM3MyAxNC4zMjA2IDE2LjY0MzMgMTQuODcxNSAxNS43NTc1IDE1Ljc1NzRDMTQuNjA1NiAxNi45MDkyIDE0LjAyIDE4LjQxMjkgMTQuMDAwNiAxOS45MjI1TDE1LjUwNzEgMTkuNzkwN0MxNS41NTcxIDE4LjcxMDMgMTUuOTk0NiAxNy42NDQ2IDE2LjgxOTYgMTYuODE5NUMxNy40NDU0IDE2LjE5MzggMTguMjA5NyAxNS43OTA5IDE5LjAxMzggMTUuNjExTDE4Ljg4MiAxNC4xMDQ1Wk0xNC4xMDQ2IDIxLjExOEMxNC4zMjA2IDIyLjI2MjggMTQuODcxNSAyMy4zNTY4IDE1Ljc1NzUgMjQuMjQyN0MxNi45MDkzIDI1LjM5NDYgMTguNDEzIDI1Ljk4MDIgMTkuOTIyNiAyNS45OTk2TDE5Ljc5MDcgMjQuNDkzMUMxOC43MTA0IDI0LjQ0MyAxNy42NDQ2IDI0LjAwNTUgMTYuODE5NiAyMy4xODA1QzE2LjE5MzggMjIuNTU0NyAxNS43OTEgMjEuNzkwNCAxNS42MTExIDIwLjk4NjJMMTQuMTA0NiAyMS4xMThaTTI0LjI0MjggMjQuMjQyN0MyMy4zNTY5IDI1LjEyODYgMjIuMjYyOCAyNS42Nzk2IDIxLjExOCAyNS44OTU2TDIwLjk4NjIgMjQuMzg5MUMyMS43OTA0IDI0LjIwOTIgMjIuNTU0OCAyMy44MDY0IDIzLjE4MDYgMjMuMTgwNUMyNC4wMDU2IDIyLjM1NTUgMjQuNDQzMiAyMS4yODk3IDI0LjQ5MzIgMjAuMjA5NEwyNS45OTk3IDIwLjA3NzZDMjUuOTgwMyAyMS41ODcyIDI1LjM5NDcgMjMuMDkwOCAyNC4yNDI4IDI0LjI0MjdaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNTA1Nl8yNDIzNjgpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNTA1Nl8yNDIzNjgiIHgxPSIxMS41NjgxIiB5MT0iMjguNTY5MSIgeDI9IjMyLjc2NjkiIHkyPSI3LjM3MDMzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1NTY1RjciLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOUVBN0ZBIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=='; | ||
const isChrome = () => { | ||
@@ -56,59 +53,64 @@ const isChromium = !!window['chrome']; | ||
const modalCss = ":host{all:initial}.modal-container{display:flex;flex-direction:column;background-color:rgba(0, 0, 0, 0.48);width:100%;height:100%;position:fixed;top:0px;left:0px;justify-content:center;font-family:\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";z-index:8999;overflow-y:scroll}.modal-body{width:486px;max-width:100%;max-height:calc(100% - 48px);background:white;margin-left:auto;margin-right:auto;border-radius:12px;padding:20px 24px 20px;box-sizing:border-box;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.modal-body::-webkit-scrollbar{display:none}@media (max-width: 640px){.modal-body{max-height:100%}}.modal-header{display:flex;flex-direction:column}@media (max-width: 640px){.modal-header{flex-direction:row-reverse;align-items:flex-start}}.close-modal{display:flex;align-items:flex-end;justify-content:flex-end}.close-icon{cursor:pointer}.modal-content{display:flex;flex-direction:column}.modal-title{color:#242629;font-family:\"Open Sauce One\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:500;font-size:32px;line-height:32px;margin-bottom:18px;padding-right:48px;margin-top:18px}@media (max-width: 640px){.modal-title{font-size:24px;line-height:24px;margin-bottom:8px;margin-top:0px;padding-right:0px}}.modal-subtitle{font-size:16px;font-weight:400;line-height:24px;color:#74777d}@media (max-width: 640px){.modal-subtitle{font-size:13px}}.download-app-container{display:flex;flex-direction:column;margin-top:20px}.button{width:100%;max-width:139px;box-sizing:border-box;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;background-color:#5546ff;color:#ffffff;min-height:48px;min-width:126px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:all 250ms;transition:all 250ms;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;outline:none;border:none;cursor:pointer}.link{color:#5546ff;font-size:14px;line-height:20px;cursor:pointer;margin-top:4px}.modal-subheading{font-size:16px;font-weight:600;line-height:19px;color:#000000}.modal-wallet-card{display:flex;align-items:flex-start;background:white;border:2px solid #f4f4f6;border-radius:16px;margin-top:12px;padding:24px 10px 24px 20px}.wallet-container{display:flex;flex-direction:column}@media (max-width: 640px){.wallet-container{flex-direction:column-reverse}}.modal-wallet-text{font-size:14px;font-weight:400;line-height:20px;margin-top:4px;color:#74777d}.modal-wallet-text a{color:#5546ff;text-decoration:none}@media (max-width: 640px){.modal-wallet-text{font-size:13px}}.modal-wallet-card-content{display:flex;flex-direction:column;padding-left:14px}"; | ||
const modalCss = "/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}:host{all:initial}.modal-container{color:#74777d;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.modal-body{-ms-overflow-style:none;scrollbar-width:none}.modal-body::-webkit-scrollbar{display:none}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.z-\\[8999\\]{z-index:8999}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.box-border{box-sizing:border-box}.flex{display:flex}.aspect-square{aspect-ratio:1/1}.h-full{height:100%}.max-h-\\[calc\\(100\\%-24px\\)\\]{max-height:calc(100% - 24px)}.w-full{width:100%}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.basis-9{flex-basis:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.space-x-\\[5px\\]>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(5px*(1 - var(--tw-space-x-reverse)));margin-right:calc(5px*var(--tw-space-x-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-\\[10px\\]>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(10px*var(--tw-space-y-reverse));margin-top:calc(10px*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-scroll{overflow-y:scroll}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-\\[\\#333\\]{--tw-border-opacity:1;border-color:rgb(51 51 51/var(--tw-border-opacity))}.border-\\[\\#EFEFF2\\]{--tw-border-opacity:1;border-color:rgb(239 239 242/var(--tw-border-opacity))}.bg-\\[\\#00000040\\]{background-color:#00000040}.bg-\\[\\#323232\\]{--tw-bg-opacity:1;background-color:rgb(50 50 50/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-6{padding:1.5rem}.p-\\[14px\\]{padding:14px}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.align-text-bottom{vertical-align:text-bottom}.text-\\[9px\\]{font-size:9px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.leading-snug{line-height:1.375}.text-\\[\\#242629\\]{--tw-text-opacity:1;color:rgb(36 38 41/var(--tw-text-opacity))}.text-\\[\\#EFEFEF\\]{--tw-text-opacity:1;color:rgb(239 239 239/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_1px_2px_0_\\#0000000A\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_1px_2px_0_\\#0000000A\\]{--tw-shadow:0 1px 2px 0 #0000000a;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_4px_5px_0_\\#00000005\\2c 0_16px_40px_0_\\#00000014\\]{--tw-shadow:0 4px 5px 0 #00000005,0 16px 40px 0 #00000014;--tw-shadow-colored:0 4px 5px 0 var(--tw-shadow-color),0 16px 40px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-\\[\\#FFBD7A\\]{outline-color:#ffbd7a}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.animate-in{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-duration:.15s;animation-name:enter}.fade-in{--tw-enter-opacity:0}.slide-in-from-bottom{--tw-enter-translate-y:100%}.hover\\:bg-\\[\\#0C0C0D\\]:hover{--tw-bg-opacity:1;background-color:rgb(12 12 13/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.hover\\:text-\\[\\#242629\\]:hover{--tw-text-opacity:1;color:rgb(36 38 41/var(--tw-text-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-\\[0_1px_2px_0_\\#00000010\\]:hover{--tw-shadow:0 1px 2px 0 #00000010;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.hover\\:shadow-\\[0_1px_2px_0_\\#00000010\\]:hover,.hover\\:shadow-\\[0_8px_16px_0_\\#00000020\\]:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:shadow-\\[0_8px_16px_0_\\#00000020\\]:hover{--tw-shadow:0 8px 16px 0 #00000020;--tw-shadow-colored:0 8px 16px 0 var(--tw-shadow-color)}.focus\\:underline:focus{text-decoration-line:underline}.focus\\:outline:focus{outline-style:solid}.focus\\:outline-\\[3px\\]:focus{outline-width:3px}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:768px){.md\\:max-h-\\[calc\\(100\\%-48px\\)\\]{max-height:calc(100% - 48px)}.md\\:w-\\[400px\\]{width:400px}.md\\:items-center{align-items:center}.md\\:justify-center{justify-content:center}.md\\:rounded-b-2xl{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.md\\:zoom-in-50{--tw-enter-scale:.5}.md\\:slide-in-from-bottom-0{--tw-enter-translate-y:0px}}"; | ||
const CHROME_BROWSER_URL = 'https://www.google.com/chrome/'; | ||
const BRAVE_BROWSER_URL = 'https://brave.com/'; | ||
const FIREFOX_BROWSER_URL = 'https://www.mozilla.org/en-US/'; | ||
const CHROME_STORE_URL = 'https://chrome.google.com/webstore/detail/hiro-wallet/ldinpeekobnhjjdofggfgjlcehhmanlj/'; | ||
const FIREFOX_STORE_URL = 'https://addons.mozilla.org/en-US/firefox/addon/hiro-wallet/'; | ||
const XVERSE_APP_STORE_URL = 'https://apps.apple.com/app/id1552272513'; | ||
const XVERSE_PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.secretkeylabs.xverse'; | ||
const XVERSE_CHROME_STORE_URL = 'https://chrome.google.com/webstore/detail/xverse-wallet/idnnbdplmphpflfnlkomgpfbpcgelopg'; | ||
const Modal = class { | ||
constructor(hostRef) { | ||
index.registerInstance(this, hostRef); | ||
this.authOptions = undefined; | ||
this.hasOpenedInstall = undefined; | ||
this.hasOpenedInstallXverse = undefined; | ||
this.defaultProviders = undefined; | ||
this.installedProviders = undefined; | ||
this.callback = undefined; | ||
} | ||
handleSelectProvider(providerId) { | ||
session.setSelectedProvider(providerId); | ||
this.modalEl.remove(); | ||
this.callback(); | ||
} | ||
handleCloseModal() { | ||
var _a, _b; | ||
this.modalEl.remove(); | ||
(_b = (_a = this.authOptions).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
// todo: throw Error that website can catch and handle (e.g. ConnectCancelError) | ||
} | ||
handleDownloadPath(browser) { | ||
// todo: nice to have: | ||
// getComment(provider: WebBTCProvider, browser: string, isMobile?: string) { | ||
// if (!provider) return null; | ||
// const hasExtension = this.getBrowserUrl(provider); | ||
// const hasMobile = this.getMobileUrl(provider); | ||
// if (isMobile && hasExtension && !hasMobile) return 'Extension Only'; | ||
// if (!isMobile && !hasExtension && hasMobile) return 'Mobile Only'; | ||
// if (!isMobile && !browser) return 'Current browser not supported'; | ||
// return null; | ||
// } | ||
getBrowserUrl(provider) { | ||
var _a; | ||
return (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : provider.mozillaAddOnsUrl; | ||
} | ||
getMobileUrl(provider) { | ||
var _a; | ||
return (_a = provider.iOSAppStoreUrl) !== null && _a !== void 0 ? _a : provider.googlePlayStoreUrl; | ||
} | ||
getInstallUrl(provider, browser) { | ||
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k; | ||
if (browser === 'Chrome') { | ||
window.open(CHROME_STORE_URL, '_blank'); | ||
return (_b = (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : this.getMobileUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl; | ||
} | ||
else if (browser === 'Firefox') { | ||
window.open(FIREFOX_STORE_URL, '_blank'); | ||
return (_d = (_c = provider.mozillaAddOnsUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl; | ||
} | ||
else if (browser === 'IOS') { | ||
window.open(XVERSE_APP_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
return (_f = (_e = provider.iOSAppStoreUrl) !== null && _e !== void 0 ? _e : this.getBrowserUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl; | ||
} | ||
else if (browser === 'Android') { | ||
window.open(XVERSE_PLAY_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
return (_h = (_g = provider.googlePlayStoreUrl) !== null && _g !== void 0 ? _g : this.getBrowserUrl(provider)) !== null && _h !== void 0 ? _h : provider.webUrl; | ||
} | ||
else if (browser === 'Xverse-Chrome') { | ||
window.open(XVERSE_CHROME_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
} | ||
else { | ||
window.open('https://www.hiro.so/wallet/install-web', '_blank'); | ||
return (_k = (_j = this.getBrowserUrl(provider)) !== null && _j !== void 0 ? _j : provider.webUrl) !== null && _k !== void 0 ? _k : this.getMobileUrl(provider); | ||
} | ||
this.hasOpenedInstall = true; | ||
} | ||
render() { | ||
const browser = getBrowser(); | ||
const isMobile = getPlatform(); | ||
return (index.h("div", { class: "modal-container" }, index.h("div", { class: "modal-body" }, index.h("div", { class: "modal-header" }, index.h("div", { class: "close-modal" }, index.h("img", { class: "close-icon", src: closeIconSvg, onClick: () => this.handleCloseModal() })), isMobile || browser ? (index.h("span", { class: "modal-title" }, "Get wallet to use ", this.authOptions.appDetails.name)) : (index.h("span", { class: "modal-title" }, "Your browser isn't supported"))), index.h("div", { class: "modal-subtitle" }, "To sign in to ", this.authOptions.appDetails.name, ", you will need a Stacks-compatible wallet."), index.h("div", { class: "modal-content" }, index.h("div", { class: "wallet-container" }, index.h("div", { class: "modal-wallet-card" }, index.h("img", { src: leatherLogoSvg }), index.h("div", { class: "modal-wallet-card-content" }, index.h("span", { class: "modal-subheading" }, "Leather"), browser && !isMobile ? (index.h("div", { class: "modal-wallet-text" }, "Leather is the only Bitcoin wallet you need to tap into the emerging Bitcoin economy.")) : (index.h("div", { class: "modal-wallet-text" }, "Browser extension for ", ` `, index.h("a", { href: CHROME_BROWSER_URL, target: "_blank" }, "Chrome"), `, `, index.h("a", { href: BRAVE_BROWSER_URL, target: "_blank" }, "Brave"), `, or `, index.h("a", { href: FIREFOX_BROWSER_URL, target: "_blank" }, "Firefox"), ` on desktop.`)), index.h("span", { class: "link", onClick: () => window.open('https://leather.io/', '_blank') }, "About Leather \u2192"), browser && !isMobile && (index.h("div", { class: "download-app-container" }, this.hasOpenedInstall ? (index.h("div", { class: "modal-wallet-text" }, "After installing Leather, reload this page and sign in.")) : (index.h("button", { class: "button", onClick: () => { | ||
this.handleDownloadPath(browser); | ||
} }, "Download")))))), index.h("div", { class: "modal-wallet-card" }, index.h("img", { src: xverseWalletLogoSvg }), index.h("div", { class: "modal-wallet-card-content" }, index.h("span", { class: "modal-subheading" }, "Xverse Wallet"), browser === 'Chrome' ? (index.h("div", { class: "modal-wallet-text" }, "Xverse is an advanced web3 wallet for Bitcoin and Stacks. Available for Chrome, Android and iOS. Add it to Chrome to continue.")) : isMobile ? (index.h("div", { class: "modal-wallet-text" }, "Xverse is your gateway to Stacks apps like ", this.authOptions.appDetails.name, ". Install it on your device to continue.`")) : (index.h("div", { class: "modal-wallet-text" }, "Browser extension for ", ` `, index.h("a", { href: CHROME_BROWSER_URL, target: "_blank" }, "Chrome"), ` on desktop, application for iOS and Android on mobile.`)), index.h("span", { class: "link", onClick: () => window.open('https://www.xverse.app/', '_blank') }, "About Xverse Wallet \u2192"), index.h("div", { class: "download-app-container" }, this.hasOpenedInstallXverse ? (isMobile ? (index.h("span", { class: "link", onClick: () => window.open(`stacks://browser?url=${window.location.href}`, '_blank') }, "Open this page in Xverse Wallet \u2192")) : (index.h("div", { class: "modal-wallet-text" }, "After installing Xverse Wallet, reload this page and sign in."))) : ((browser === 'Chrome' || isMobile) && (index.h("button", { class: "button", onClick: () => { | ||
this.handleDownloadPath(isMobile !== null && isMobile !== void 0 ? isMobile : `Xverse-${browser}`); | ||
} }, "Download"))))))))))); | ||
const mobile = getPlatform(); | ||
const notInstalledProviders = this.defaultProviders.filter(p => this.installedProviders.findIndex(i => i.id === p.id) === -1 // keep providers NOT already in installed list | ||
); | ||
const hasInstalled = this.installedProviders.length > 0; | ||
const hasMore = notInstalledProviders.length > 0; | ||
return (index.h("div", { class: "modal-container animate-in fade-in fixed inset-0 z-[8999] box-border flex h-full w-full items-end overflow-y-scroll bg-[#00000040] md:items-center md:justify-center" }, index.h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 box-border flex max-h-[calc(100%-24px)] w-full max-w-full cursor-default flex-col overflow-y-scroll rounded-2xl rounded-b-none bg-white p-6 text-sm leading-snug shadow-[0_4px_5px_0_#00000005,0_16px_40px_0_#00000014] md:max-h-[calc(100%-48px)] md:w-[400px] md:rounded-b-2xl" }, index.h("div", { class: "flex flex-col space-y-[10px]" }, index.h("div", { class: "flex items-center" }, index.h("div", { class: "flex-1 text-xl font-medium text-[#242629]" }, "Connect a wallet"), index.h("button", { class: "rounded-full bg-transparent p-1 transition-colors hover:bg-gray-100 active:scale-95", onClick: () => this.handleCloseModal() }, index.h("span", { class: "sr-only" }, "Close popup"), index.h("img", { src: closeIconSvg }))), hasInstalled ? (index.h("p", null, "Select the wallet you want to connect to.")) : (index.h("p", null, "You don't have any wallets in your browser that support this app. You need to install a wallet to proceed."))), !mobile && !browser && (index.h("div", { class: "mx-auto mt-4 rounded-xl bg-gray-200 px-3 py-1.5 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-300" }, "Unfortunately, your browser isn't supported")), hasInstalled && (index.h("div", { class: "mt-6" }, index.h("p", { class: "mb-4 text-sm font-medium" }, "Installed wallets"), index.h("ul", { class: "space-y-3" }, this.installedProviders.map((provider) => (index.h("li", { class: "flex items-center gap-3 rounded-[10px] border border-[#EFEFF2] p-[14px]" }, index.h("div", { class: "aspect-square basis-9 overflow-hidden" }, index.h("img", { src: provider.icon, class: "h-full w-full rounded-[10px] bg-gray-700" })), index.h("div", { class: "flex-1" }, index.h("div", { class: "text-sm font-medium text-[#242629]" }, provider.name), provider.webUrl && (index.h("a", { href: provider.webUrl, class: "text-sm", rel: "noopener noreferrer" }, new URL(provider.webUrl).hostname))), index.h("button", { class: "rounded-[10px] border border-[#333] bg-[#323232] px-4 py-2 text-sm font-medium text-[#EFEFEF] shadow-[0_1px_2px_0_#0000000A] outline-[#FFBD7A] transition-all hover:bg-[#0C0C0D] hover:text-white hover:shadow-[0_8px_16px_0_#00000020] focus:outline focus:outline-[3px] active:scale-95", onClick: () => this.handleSelectProvider(provider.id) }, "Connect"))))))), hasMore && (index.h("div", { class: "mt-6" }, hasInstalled ? (index.h("p", { class: "mb-4 text-sm font-medium" }, "Other wallets")) : (index.h("div", { class: "mb-5 flex justify-between" }, index.h("p", { class: "text-sm font-medium" }, "Recommended wallets"), index.h("a", { class: "flex cursor-pointer items-center space-x-[5px] text-xs transition-colors hover:text-[#242629] hover:underline focus:underline", href: "https://docs.hiro.so/what-is-a-wallet", rel: "noopener noreferrer", target: "_blank" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { stroke: "#74777D", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.2", d: "M8.006 15a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" }), index.h("path", { stroke: "#74777D", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.2", d: "M5.97 5.9a2.1 2.1 0 0 1 4.08.7c0 1.4-2.1 2.1-2.1 2.1M8.006 11.5h.01" })), index.h("p", null, "What is a wallet?\u2009", index.h("span", { class: "align-text-bottom text-[9px]" }, "\u2197"))))), index.h("ul", { class: "space-y-3" }, notInstalledProviders.map((provider) => (index.h("li", { class: "flex items-center gap-3 rounded-[10px] border border-[#EFEFF2] p-[14px]" }, index.h("div", { class: "aspect-square basis-9 overflow-hidden" }, index.h("img", { src: provider.icon, class: "h-full w-full rounded-[10px] bg-gray-700" })), index.h("div", { class: "flex-1" }, index.h("div", { class: "text-sm font-medium text-[#242629]" }, provider.name), provider.webUrl && (index.h("a", { href: provider.webUrl, class: "text-sm", rel: "noopener noreferrer" }, new URL(provider.webUrl).hostname))), this.getInstallUrl(provider, browser) && (index.h("a", { class: "rounded-[10px] border border-[#EFEFF2] px-4 py-2 text-sm font-medium shadow-[0_1px_2px_0_#0000000A] outline-[#FFBD7A] transition-colors hover:text-[#242629] hover:shadow-[0_1px_2px_0_#00000010] focus:outline focus:outline-[3px] active:scale-95", href: this.getInstallUrl(provider, browser), rel: "noopener noreferrer", target: "_blank" }, "Install \u2192"))))))))))); | ||
} | ||
@@ -115,0 +117,0 @@ static get assetsDirs() { return ["assets"]; } |
@@ -5,3 +5,3 @@ 'use strict'; | ||
const index = require('./index-0b8ea6c8.js'); | ||
const index = require('./index-d4ed74d5.js'); | ||
@@ -21,5 +21,5 @@ /* | ||
patchBrowser().then(options => { | ||
return index.bootstrapLazy([["connect-modal.cjs",[[1,"connect-modal",{"authOptions":[8,"auth-options"],"hasOpenedInstall":[32],"hasOpenedInstallXverse":[32]}]]]], options); | ||
return index.bootstrapLazy([["connect-modal.cjs",[[1,"connect-modal",{"defaultProviders":[16],"installedProviders":[16],"callback":[16]}]]]], options); | ||
}); | ||
exports.setNonce = index.setNonce; |
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
const session = require('./session-ba2bc548.js'); | ||
// AUTO REGISTERED PROVIDERS | ||
const getRegisteredProviders = () => { | ||
if (typeof window === 'undefined') | ||
return []; | ||
if (!window.webbtc_stx_providers) | ||
return []; | ||
return window.webbtc_stx_providers; | ||
}; | ||
const getInstalledProviders = (defaultProviders = []) => { | ||
if (typeof window === 'undefined') | ||
return []; | ||
const registeredProviders = getRegisteredProviders(); | ||
const additionalInstalledProviders = defaultProviders.filter(dp => { | ||
// already registered, don't add again | ||
if (registeredProviders.find(rp => rp.id === dp.id)) | ||
return false; | ||
// check if default provider is installed (even if not registered) | ||
const provider = dp.id.split('.').reduce((acc, part) => acc === null || acc === void 0 ? void 0 : acc[part], window); | ||
return !!provider; | ||
}); | ||
return registeredProviders.concat(additionalInstalledProviders); | ||
}; | ||
exports.clearSelectedProvider = session.clearSelectedProvider; | ||
exports.getSelectedProvider = session.getSelectedProvider; | ||
exports.setSelectedProvider = session.setSelectedProvider; | ||
exports.getInstalledProviders = getInstalledProviders; | ||
exports.getRegisteredProviders = getRegisteredProviders; |
@@ -5,3 +5,3 @@ 'use strict'; | ||
const index = require('./index-0b8ea6c8.js'); | ||
const index = require('./index-d4ed74d5.js'); | ||
@@ -18,3 +18,3 @@ /* | ||
return patchEsm().then(() => { | ||
return index.bootstrapLazy([["connect-modal.cjs",[[1,"connect-modal",{"authOptions":[8,"auth-options"],"hasOpenedInstall":[32],"hasOpenedInstallXverse":[32]}]]]], options); | ||
return index.bootstrapLazy([["connect-modal.cjs",[[1,"connect-modal",{"defaultProviders":[16],"installedProviders":[16],"callback":[16]}]]]], options); | ||
}); | ||
@@ -21,0 +21,0 @@ }; |
import { h } from '@stencil/core'; | ||
import { setSelectedProvider } from '../../session'; | ||
import CloseIcon from './assets/close-icon.svg'; | ||
import LeatherLogo from './assets/leather-logo.svg'; | ||
import XverseWalletLogo from './assets/xverse-wallet-logo.svg'; | ||
import { getBrowser, getPlatform } from './utils'; | ||
const CHROME_BROWSER_URL = 'https://www.google.com/chrome/'; | ||
const BRAVE_BROWSER_URL = 'https://brave.com/'; | ||
const FIREFOX_BROWSER_URL = 'https://www.mozilla.org/en-US/'; | ||
const CHROME_STORE_URL = 'https://chrome.google.com/webstore/detail/hiro-wallet/ldinpeekobnhjjdofggfgjlcehhmanlj/'; | ||
const FIREFOX_STORE_URL = 'https://addons.mozilla.org/en-US/firefox/addon/hiro-wallet/'; | ||
const XVERSE_APP_STORE_URL = 'https://apps.apple.com/app/id1552272513'; | ||
const XVERSE_PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.secretkeylabs.xverse'; | ||
const XVERSE_CHROME_STORE_URL = 'https://chrome.google.com/webstore/detail/xverse-wallet/idnnbdplmphpflfnlkomgpfbpcgelopg'; | ||
export class Modal { | ||
constructor() { | ||
this.authOptions = undefined; | ||
this.hasOpenedInstall = undefined; | ||
this.hasOpenedInstallXverse = undefined; | ||
this.defaultProviders = undefined; | ||
this.installedProviders = undefined; | ||
this.callback = undefined; | ||
} | ||
handleSelectProvider(providerId) { | ||
setSelectedProvider(providerId); | ||
this.modalEl.remove(); | ||
this.callback(); | ||
} | ||
handleCloseModal() { | ||
var _a, _b; | ||
this.modalEl.remove(); | ||
(_b = (_a = this.authOptions).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
// todo: throw Error that website can catch and handle (e.g. ConnectCancelError) | ||
} | ||
handleDownloadPath(browser) { | ||
// todo: nice to have: | ||
// getComment(provider: WebBTCProvider, browser: string, isMobile?: string) { | ||
// if (!provider) return null; | ||
// const hasExtension = this.getBrowserUrl(provider); | ||
// const hasMobile = this.getMobileUrl(provider); | ||
// if (isMobile && hasExtension && !hasMobile) return 'Extension Only'; | ||
// if (!isMobile && !hasExtension && hasMobile) return 'Mobile Only'; | ||
// if (!isMobile && !browser) return 'Current browser not supported'; | ||
// return null; | ||
// } | ||
getBrowserUrl(provider) { | ||
var _a; | ||
return (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : provider.mozillaAddOnsUrl; | ||
} | ||
getMobileUrl(provider) { | ||
var _a; | ||
return (_a = provider.iOSAppStoreUrl) !== null && _a !== void 0 ? _a : provider.googlePlayStoreUrl; | ||
} | ||
getInstallUrl(provider, browser) { | ||
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k; | ||
if (browser === 'Chrome') { | ||
window.open(CHROME_STORE_URL, '_blank'); | ||
return (_b = (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : this.getMobileUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl; | ||
} | ||
else if (browser === 'Firefox') { | ||
window.open(FIREFOX_STORE_URL, '_blank'); | ||
return (_d = (_c = provider.mozillaAddOnsUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl; | ||
} | ||
else if (browser === 'IOS') { | ||
window.open(XVERSE_APP_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
return (_f = (_e = provider.iOSAppStoreUrl) !== null && _e !== void 0 ? _e : this.getBrowserUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl; | ||
} | ||
else if (browser === 'Android') { | ||
window.open(XVERSE_PLAY_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
return (_h = (_g = provider.googlePlayStoreUrl) !== null && _g !== void 0 ? _g : this.getBrowserUrl(provider)) !== null && _h !== void 0 ? _h : provider.webUrl; | ||
} | ||
else if (browser === 'Xverse-Chrome') { | ||
window.open(XVERSE_CHROME_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
} | ||
else { | ||
window.open('https://www.hiro.so/wallet/install-web', '_blank'); | ||
return (_k = (_j = this.getBrowserUrl(provider)) !== null && _j !== void 0 ? _j : provider.webUrl) !== null && _k !== void 0 ? _k : this.getMobileUrl(provider); | ||
} | ||
this.hasOpenedInstall = true; | ||
} | ||
render() { | ||
const browser = getBrowser(); | ||
const isMobile = getPlatform(); | ||
return (h("div", { class: "modal-container" }, h("div", { class: "modal-body" }, h("div", { class: "modal-header" }, h("div", { class: "close-modal" }, h("img", { class: "close-icon", src: CloseIcon, onClick: () => this.handleCloseModal() })), isMobile || browser ? (h("span", { class: "modal-title" }, "Get wallet to use ", this.authOptions.appDetails.name)) : (h("span", { class: "modal-title" }, "Your browser isn't supported"))), h("div", { class: "modal-subtitle" }, "To sign in to ", this.authOptions.appDetails.name, ", you will need a Stacks-compatible wallet."), h("div", { class: "modal-content" }, h("div", { class: "wallet-container" }, h("div", { class: "modal-wallet-card" }, h("img", { src: LeatherLogo }), h("div", { class: "modal-wallet-card-content" }, h("span", { class: "modal-subheading" }, "Leather"), browser && !isMobile ? (h("div", { class: "modal-wallet-text" }, "Leather is the only Bitcoin wallet you need to tap into the emerging Bitcoin economy.")) : (h("div", { class: "modal-wallet-text" }, "Browser extension for ", ` `, h("a", { href: CHROME_BROWSER_URL, target: "_blank" }, "Chrome"), `, `, h("a", { href: BRAVE_BROWSER_URL, target: "_blank" }, "Brave"), `, or `, h("a", { href: FIREFOX_BROWSER_URL, target: "_blank" }, "Firefox"), ` on desktop.`)), h("span", { class: "link", onClick: () => window.open('https://leather.io/', '_blank') }, "About Leather \u2192"), browser && !isMobile && (h("div", { class: "download-app-container" }, this.hasOpenedInstall ? (h("div", { class: "modal-wallet-text" }, "After installing Leather, reload this page and sign in.")) : (h("button", { class: "button", onClick: () => { | ||
this.handleDownloadPath(browser); | ||
} }, "Download")))))), h("div", { class: "modal-wallet-card" }, h("img", { src: XverseWalletLogo }), h("div", { class: "modal-wallet-card-content" }, h("span", { class: "modal-subheading" }, "Xverse Wallet"), browser === 'Chrome' ? (h("div", { class: "modal-wallet-text" }, "Xverse is an advanced web3 wallet for Bitcoin and Stacks. Available for Chrome, Android and iOS. Add it to Chrome to continue.")) : isMobile ? (h("div", { class: "modal-wallet-text" }, "Xverse is your gateway to Stacks apps like ", this.authOptions.appDetails.name, ". Install it on your device to continue.`")) : (h("div", { class: "modal-wallet-text" }, "Browser extension for ", ` `, h("a", { href: CHROME_BROWSER_URL, target: "_blank" }, "Chrome"), ` on desktop, application for iOS and Android on mobile.`)), h("span", { class: "link", onClick: () => window.open('https://www.xverse.app/', '_blank') }, "About Xverse Wallet \u2192"), h("div", { class: "download-app-container" }, this.hasOpenedInstallXverse ? (isMobile ? (h("span", { class: "link", onClick: () => window.open(`stacks://browser?url=${window.location.href}`, '_blank') }, "Open this page in Xverse Wallet \u2192")) : (h("div", { class: "modal-wallet-text" }, "After installing Xverse Wallet, reload this page and sign in."))) : ((browser === 'Chrome' || isMobile) && (h("button", { class: "button", onClick: () => { | ||
this.handleDownloadPath(isMobile !== null && isMobile !== void 0 ? isMobile : `Xverse-${browser}`); | ||
} }, "Download"))))))))))); | ||
const mobile = getPlatform(); | ||
const notInstalledProviders = this.defaultProviders.filter(p => this.installedProviders.findIndex(i => i.id === p.id) === -1 // keep providers NOT already in installed list | ||
); | ||
const hasInstalled = this.installedProviders.length > 0; | ||
const hasMore = notInstalledProviders.length > 0; | ||
return (h("div", { class: "modal-container animate-in fade-in fixed inset-0 z-[8999] box-border flex h-full w-full items-end overflow-y-scroll bg-[#00000040] md:items-center md:justify-center" }, h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 box-border flex max-h-[calc(100%-24px)] w-full max-w-full cursor-default flex-col overflow-y-scroll rounded-2xl rounded-b-none bg-white p-6 text-sm leading-snug shadow-[0_4px_5px_0_#00000005,0_16px_40px_0_#00000014] md:max-h-[calc(100%-48px)] md:w-[400px] md:rounded-b-2xl" }, h("div", { class: "flex flex-col space-y-[10px]" }, h("div", { class: "flex items-center" }, h("div", { class: "flex-1 text-xl font-medium text-[#242629]" }, "Connect a wallet"), h("button", { class: "rounded-full bg-transparent p-1 transition-colors hover:bg-gray-100 active:scale-95", onClick: () => this.handleCloseModal() }, h("span", { class: "sr-only" }, "Close popup"), h("img", { src: CloseIcon }))), hasInstalled ? (h("p", null, "Select the wallet you want to connect to.")) : (h("p", null, "You don't have any wallets in your browser that support this app. You need to install a wallet to proceed."))), !mobile && !browser && (h("div", { class: "mx-auto mt-4 rounded-xl bg-gray-200 px-3 py-1.5 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-300" }, "Unfortunately, your browser isn't supported")), hasInstalled && (h("div", { class: "mt-6" }, h("p", { class: "mb-4 text-sm font-medium" }, "Installed wallets"), h("ul", { class: "space-y-3" }, this.installedProviders.map((provider) => (h("li", { class: "flex items-center gap-3 rounded-[10px] border border-[#EFEFF2] p-[14px]" }, h("div", { class: "aspect-square basis-9 overflow-hidden" }, h("img", { src: provider.icon, class: "h-full w-full rounded-[10px] bg-gray-700" })), h("div", { class: "flex-1" }, h("div", { class: "text-sm font-medium text-[#242629]" }, provider.name), provider.webUrl && (h("a", { href: provider.webUrl, class: "text-sm", rel: "noopener noreferrer" }, new URL(provider.webUrl).hostname))), h("button", { class: "rounded-[10px] border border-[#333] bg-[#323232] px-4 py-2 text-sm font-medium text-[#EFEFEF] shadow-[0_1px_2px_0_#0000000A] outline-[#FFBD7A] transition-all hover:bg-[#0C0C0D] hover:text-white hover:shadow-[0_8px_16px_0_#00000020] focus:outline focus:outline-[3px] active:scale-95", onClick: () => this.handleSelectProvider(provider.id) }, "Connect"))))))), hasMore && (h("div", { class: "mt-6" }, hasInstalled ? (h("p", { class: "mb-4 text-sm font-medium" }, "Other wallets")) : (h("div", { class: "mb-5 flex justify-between" }, h("p", { class: "text-sm font-medium" }, "Recommended wallets"), h("a", { class: "flex cursor-pointer items-center space-x-[5px] text-xs transition-colors hover:text-[#242629] hover:underline focus:underline", href: "https://docs.hiro.so/what-is-a-wallet", rel: "noopener noreferrer", target: "_blank" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 16 16", fill: "none" }, h("path", { stroke: "#74777D", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.2", d: "M8.006 15a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" }), h("path", { stroke: "#74777D", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.2", d: "M5.97 5.9a2.1 2.1 0 0 1 4.08.7c0 1.4-2.1 2.1-2.1 2.1M8.006 11.5h.01" })), h("p", null, "What is a wallet?\u2009", h("span", { class: "align-text-bottom text-[9px]" }, "\u2197"))))), h("ul", { class: "space-y-3" }, notInstalledProviders.map((provider) => (h("li", { class: "flex items-center gap-3 rounded-[10px] border border-[#EFEFF2] p-[14px]" }, h("div", { class: "aspect-square basis-9 overflow-hidden" }, h("img", { src: provider.icon, class: "h-full w-full rounded-[10px] bg-gray-700" })), h("div", { class: "flex-1" }, h("div", { class: "text-sm font-medium text-[#242629]" }, provider.name), provider.webUrl && (h("a", { href: provider.webUrl, class: "text-sm", rel: "noopener noreferrer" }, new URL(provider.webUrl).hostname))), this.getInstallUrl(provider, browser) && (h("a", { class: "rounded-[10px] border border-[#EFEFF2] px-4 py-2 text-sm font-medium shadow-[0_1px_2px_0_#0000000A] outline-[#FFBD7A] transition-colors hover:text-[#242629] hover:shadow-[0_1px_2px_0_#00000010] focus:outline focus:outline-[3px] active:scale-95", href: this.getInstallUrl(provider, browser), rel: "noopener noreferrer", target: "_blank" }, "Install \u2192"))))))))))); | ||
} | ||
@@ -76,9 +80,14 @@ static get is() { return "connect-modal"; } | ||
return { | ||
"authOptions": { | ||
"type": "any", | ||
"defaultProviders": { | ||
"type": "unknown", | ||
"mutable": false, | ||
"complexType": { | ||
"original": "any", | ||
"resolved": "any", | ||
"references": {} | ||
"original": "WebBTCProvider[]", | ||
"resolved": "WebBTCProvider[]", | ||
"references": { | ||
"WebBTCProvider": { | ||
"location": "import", | ||
"path": "../../providers" | ||
} | ||
} | ||
}, | ||
@@ -90,15 +99,46 @@ "required": false, | ||
"text": "" | ||
} | ||
}, | ||
"installedProviders": { | ||
"type": "unknown", | ||
"mutable": false, | ||
"complexType": { | ||
"original": "WebBTCProvider[]", | ||
"resolved": "WebBTCProvider[]", | ||
"references": { | ||
"WebBTCProvider": { | ||
"location": "import", | ||
"path": "../../providers" | ||
} | ||
} | ||
}, | ||
"attribute": "auth-options", | ||
"reflect": false | ||
"required": false, | ||
"optional": false, | ||
"docs": { | ||
"tags": [], | ||
"text": "" | ||
} | ||
}, | ||
"callback": { | ||
"type": "unknown", | ||
"mutable": false, | ||
"complexType": { | ||
"original": "Function", | ||
"resolved": "Function", | ||
"references": { | ||
"Function": { | ||
"location": "global" | ||
} | ||
} | ||
}, | ||
"required": false, | ||
"optional": false, | ||
"docs": { | ||
"tags": [], | ||
"text": "" | ||
} | ||
} | ||
}; | ||
} | ||
static get states() { | ||
return { | ||
"hasOpenedInstall": {}, | ||
"hasOpenedInstallXverse": {} | ||
}; | ||
} | ||
static get elementRef() { return "modalEl"; } | ||
} |
@@ -1,1 +0,2 @@ | ||
export {}; | ||
export * from './providers'; | ||
export * from './session'; |
@@ -1,1 +0,1 @@ | ||
import{p as t,b as e}from"./p-738f1005.js";export{s as setNonce}from"./p-738f1005.js";(()=>{const s=import.meta.url,e={};return""!==s&&(e.resourcesUrl=new URL(".",s).href),t(e)})().then((s=>e([["p-8a9b3d23",[[1,"connect-modal",{authOptions:[8,"auth-options"],hasOpenedInstall:[32],hasOpenedInstallXverse:[32]}]]]],s))); | ||
import{p as e,b as c}from"./p-e0031cdc.js";export{s as setNonce}from"./p-e0031cdc.js";(()=>{const c=import.meta.url,o={};return""!==c&&(o.resourcesUrl=new URL(".",c).href),e(o)})().then((e=>c([["p-497bf3c4",[[1,"connect-modal",{defaultProviders:[16],installedProviders:[16],callback:[16]}]]]],e))); |
@@ -1,9 +0,6 @@ | ||
import { r as registerInstance, h, g as getElement } from './index-bf6982d4.js'; | ||
import { r as registerInstance, h, g as getElement } from './index-7b976844.js'; | ||
import { s as setSelectedProvider } from './session-facc386d.js'; | ||
const closeIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcgNyAxMCAxME0xNyA3IDcgMTciIHN0cm9rZT0iIzI0MjYyOSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=='; | ||
const leatherLogoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgcng9IjI2LjgzODciIGZpbGw9IiMxMjEwMEYiLz4KPHBhdGggZD0iTTc0LjkxNzEgNTIuNzExNEM4Mi40NzY2IDUxLjU0MDggOTMuNDA4NyA0My41ODA0IDkzLjQwODcgMzcuMzc2MUM5My40MDg3IDM1LjUwMzEgOTEuODk2OCAzNC4yMTU0IDg5LjY4NzEgMzQuMjE1NEM4NS41MDA0IDM0LjIxNTQgNzguNDA2MSA0MC41MzY4IDc0LjkxNzEgNTIuNzExNFpNMzkuOTExIDgzLjQ5OTFDMzAuMDI1NiA4My40OTkxIDI5LjIxMTUgOTMuMzMyNCAzOS4wOTY5IDkzLjMzMjRDNDMuNTE2MyA5My4zMzI0IDQ4Ljg2NjEgOTEuNTc2NCA1MS42NTczIDg4LjQxNTdDNDcuNTg2OCA4NC45MDM4IDQ0LjIxNDEgODMuNDk5MSAzOS45MTEgODMuNDk5MVpNMTAyLjgyOSA3OS4yODQ4QzEwMy40MSA5NS43OTA3IDk1LjAzNjkgMTA1LjAzOSA4MC44NDg0IDEwNS4wMzlDNzIuNDc0OCAxMDUuMDM5IDY4LjI4ODEgMTAxLjg3OCA1OS4zMzMgOTYuMDI0OUM1NC42ODEgMTAxLjE3NiA0NS44NDIzIDEwNS4wMzkgMzguNTE1NCAxMDUuMDM5QzEzLjI3ODUgMTA1LjAzOSAxNC4zMjUyIDcyLjg0NjMgNDAuMDI3MyA3Mi44NDYzQzQ1LjM3NzEgNzIuODQ2MyA0OS45MTI4IDc0LjI1MTEgNTUuNzI3NyA3Ny44OEw1OS41NjU2IDY0LjQxNzdDNDMuNzQ4OSA2MC4wODY0IDM1Ljg0MDUgNDcuOTExOCA0My42MzI2IDMwLjQ2OTNINTYuMTkyOUM0OS4yMTUgNDIuMDU4NiA1My45ODMyIDUxLjY1NzggNjIuODIyIDUyLjcxMTRDNjcuNTkwMyAzNS43MzcyIDc3LjgyNDYgMjIuNTA5IDkxLjQzMTYgMjIuNTA5Qzk5LjEwNzQgMjIuNTA5IDEwNS4xNTUgMjcuNTQyOCAxMDUuMTU1IDM2LjY3MzdDMTA1LjE1NSA1MS4zMDY2IDg2LjA4MTkgNjMuMjQ3MSA3MS42NjA3IDY0LjQxNzdMNjUuNzI5NSA4NS4zNzIxQzcyLjQ3NDggOTMuMjE1MyA5MS4xOTkgMTAwLjgyNCA5MS4xOTkgNzkuMjg0OEgxMDIuODI5WiIgZmlsbD0iI0Y1RjFFRCIvPgo8L3N2Zz4K'; | ||
const xverseWalletLogoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iMTAuMjkyNCIgZmlsbD0iIzEyMTUxRSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjk0OTQgMTEuMTAxQzE2LjUxMjIgNi45NjYzMiAyMy40ODgxIDYuOTY2MzUgMjguMDUwOSAxMS4xMDFMMjYuOTg3MiAxMi4xNjQ3QzIzLjAxMzQgOC42MTQ2NiAxNi45ODcgOC42MTQ2MyAxMy4wMTMxIDEyLjE2NDZMMTEuOTQ5NCAxMS4xMDFaTTI4Ljg5OTQgMTEuOTQ5NkwyNy44MzU4IDEzLjAxMzNDMzEuMzg1NSAxNi45ODcxIDMxLjM4NTUgMjMuMDEzMyAyNy44MzU2IDI2Ljk4NzFMMjguODk5MiAyOC4wNTA4QzMzLjAzMzggMjMuNDg4MSAzMy4wMzM4IDE2LjUxMjQgMjguODk5NCAxMS45NDk2Wk0xMy4wMTMzIDI3LjgzNTdDMTYuOTg3MSAzMS4zODU1IDIzLjAxMzIgMzEuMzg1NSAyNi45ODcgMjcuODM1NkwyOC4wNTA3IDI4Ljg5OTNDMjMuNDg3OSAzMy4wMzM4IDE2LjUxMjQgMzMuMDMzOCAxMS45NDk2IDI4Ljg5OTRMMTMuMDEzMyAyNy44MzU3Wk0xMi4xNjQ3IDI2Ljk4NzJMMTEuMTAxIDI4LjA1MDlDNi45NjYzOCAyMy40ODgxIDYuOTY2MzIgMTYuNTEyNCAxMS4xMDA4IDExLjk0OTVMMTIuMTY0NSAxMy4wMTMyQzguNjE0NjMgMTYuOTg3MSA4LjYxNDY5IDIzLjAxMzQgMTIuMTY0NyAyNi45ODcyWk0yNy40Nzg2IDE0Ljk4OTZDMjcuMTU3OSAxNC41MTIxIDI2Ljc4NjQgMTQuMDU4NSAyNi4zNjQzIDEzLjYzNjRDMjMuNTY4MiAxMC44NDAyIDE5LjM4OTkgMTAuMjY4NSAxNi4wMjg2IDExLjkyMTRMMTYuNzgxOSAxMy4yMjYxQzE5LjU2NjQgMTEuOTAzMiAyMi45OTc3IDEyLjM5NDEgMjUuMzAyMiAxNC42OTg1QzI1LjYyOTMgMTUuMDI1NiAyNS45MTk4IDE1LjM3NTQgMjYuMTczOCAxNS43NDI5TDI3LjQ3ODYgMTQuOTg5NlpNMjYuNzc0NSAxNi43ODE3TDI4LjA3OTMgMTYuMDI4NEMyOS43MzIyIDE5LjM4OTggMjkuMTYwNiAyMy41NjgyIDI2LjM2NDMgMjYuMzY0NEMyNS45NDIyIDI2Ljc4NjYgMjUuNDg4NSAyNy4xNTggMjUuMDEwOCAyNy40Nzg4TDI0LjI1NzYgMjYuMTc0MUMyNC42MjUxIDI1LjkyIDI0Ljk3NSAyNS42Mjk0IDI1LjMwMjIgMjUuMzAyMkMyNy42MDY3IDIyLjk5NzcgMjguMDk3NSAxOS41NjYyIDI2Ljc3NDUgMTYuNzgxN1pNMjMuMjE4NyAyNi43NzQ3QzIwLjQzNDIgMjguMDk3NSAxNy4wMDI5IDI3LjYwNjYgMTQuNjk4NSAyNS4zMDIyQzE0LjM3MTIgMjQuOTc0OSAxNC4wODA1IDI0LjYyNDkgMTMuODI2NCAyNC4yNTczTDEyLjUyMTcgMjUuMDEwNkMxMi44NDI1IDI1LjQ4ODMgMTMuMjE0IDI1Ljk0MjEgMTMuNjM2MyAyNi4zNjQ0QzE2LjQzMjUgMjkuMTYwNSAyMC42MTA3IDI5LjczMjIgMjMuOTcyIDI4LjA3OTRMMjMuMjE4NyAyNi43NzQ3Wk0xMS45MjExIDIzLjk3MTdMMTMuMjI1OCAyMy4yMTg0QzExLjkwMzMgMjAuNDM0IDEyLjM5NDIgMTcuMDAyOSAxNC42OTg1IDE0LjY5ODVDMTUuMDI1NyAxNC4zNzE0IDE1LjM3NTUgMTQuMDgwOCAxNS43NDMgMTMuODI2N0wxNC45ODk3IDEyLjUyMkMxNC41MTIxIDEyLjg0MjggMTQuMDU4NSAxMy4yMTQyIDEzLjYzNjMgMTMuNjM2NEMxMC44NDAzIDE2LjQzMjQgMTAuMjY4NSAyMC42MTA0IDExLjkyMTEgMjMuOTcxN1pNMjQuMjQyOCAxNS43NTc0QzI1LjEyODcgMTYuNjQzMyAyNS42Nzk3IDE3LjczNzMgMjUuODk1NyAxOC44ODIxTDI0LjM4OTIgMTkuMDEzOUMyNC4yMDkzIDE4LjIwOTcgMjMuODA2NCAxNy40NDU0IDIzLjE4MDYgMTYuODE5NUMyMi4zNTU2IDE1Ljk5NDUgMjEuMjg5NyAxNS41NTY5IDIwLjIwOTIgMTUuNTA3TDIwLjA3NzQgMTQuMDAwNUMyMS41ODcxIDE0LjAxOTggMjMuMDkwOSAxNC42MDU0IDI0LjI0MjggMTUuNzU3NFpNMTguODgyIDE0LjEwNDVDMTcuNzM3MyAxNC4zMjA2IDE2LjY0MzMgMTQuODcxNSAxNS43NTc1IDE1Ljc1NzRDMTQuNjA1NiAxNi45MDkyIDE0LjAyIDE4LjQxMjkgMTQuMDAwNiAxOS45MjI1TDE1LjUwNzEgMTkuNzkwN0MxNS41NTcxIDE4LjcxMDMgMTUuOTk0NiAxNy42NDQ2IDE2LjgxOTYgMTYuODE5NUMxNy40NDU0IDE2LjE5MzggMTguMjA5NyAxNS43OTA5IDE5LjAxMzggMTUuNjExTDE4Ljg4MiAxNC4xMDQ1Wk0xNC4xMDQ2IDIxLjExOEMxNC4zMjA2IDIyLjI2MjggMTQuODcxNSAyMy4zNTY4IDE1Ljc1NzUgMjQuMjQyN0MxNi45MDkzIDI1LjM5NDYgMTguNDEzIDI1Ljk4MDIgMTkuOTIyNiAyNS45OTk2TDE5Ljc5MDcgMjQuNDkzMUMxOC43MTA0IDI0LjQ0MyAxNy42NDQ2IDI0LjAwNTUgMTYuODE5NiAyMy4xODA1QzE2LjE5MzggMjIuNTU0NyAxNS43OTEgMjEuNzkwNCAxNS42MTExIDIwLjk4NjJMMTQuMTA0NiAyMS4xMThaTTI0LjI0MjggMjQuMjQyN0MyMy4zNTY5IDI1LjEyODYgMjIuMjYyOCAyNS42Nzk2IDIxLjExOCAyNS44OTU2TDIwLjk4NjIgMjQuMzg5MUMyMS43OTA0IDI0LjIwOTIgMjIuNTU0OCAyMy44MDY0IDIzLjE4MDYgMjMuMTgwNUMyNC4wMDU2IDIyLjM1NTUgMjQuNDQzMiAyMS4yODk3IDI0LjQ5MzIgMjAuMjA5NEwyNS45OTk3IDIwLjA3NzZDMjUuOTgwMyAyMS41ODcyIDI1LjM5NDcgMjMuMDkwOCAyNC4yNDI4IDI0LjI0MjdaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNTA1Nl8yNDIzNjgpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNTA1Nl8yNDIzNjgiIHgxPSIxMS41NjgxIiB5MT0iMjguNTY5MSIgeDI9IjMyLjc2NjkiIHkyPSI3LjM3MDMzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1NTY1RjciLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOUVBN0ZBIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=='; | ||
const isChrome = () => { | ||
@@ -51,59 +48,64 @@ const isChromium = !!window['chrome']; | ||
const modalCss = ":host{all:initial}.modal-container{display:flex;flex-direction:column;background-color:rgba(0, 0, 0, 0.48);width:100%;height:100%;position:fixed;top:0px;left:0px;justify-content:center;font-family:\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";z-index:8999;overflow-y:scroll}.modal-body{width:486px;max-width:100%;max-height:calc(100% - 48px);background:white;margin-left:auto;margin-right:auto;border-radius:12px;padding:20px 24px 20px;box-sizing:border-box;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.modal-body::-webkit-scrollbar{display:none}@media (max-width: 640px){.modal-body{max-height:100%}}.modal-header{display:flex;flex-direction:column}@media (max-width: 640px){.modal-header{flex-direction:row-reverse;align-items:flex-start}}.close-modal{display:flex;align-items:flex-end;justify-content:flex-end}.close-icon{cursor:pointer}.modal-content{display:flex;flex-direction:column}.modal-title{color:#242629;font-family:\"Open Sauce One\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:500;font-size:32px;line-height:32px;margin-bottom:18px;padding-right:48px;margin-top:18px}@media (max-width: 640px){.modal-title{font-size:24px;line-height:24px;margin-bottom:8px;margin-top:0px;padding-right:0px}}.modal-subtitle{font-size:16px;font-weight:400;line-height:24px;color:#74777d}@media (max-width: 640px){.modal-subtitle{font-size:13px}}.download-app-container{display:flex;flex-direction:column;margin-top:20px}.button{width:100%;max-width:139px;box-sizing:border-box;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;background-color:#5546ff;color:#ffffff;min-height:48px;min-width:126px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:all 250ms;transition:all 250ms;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;outline:none;border:none;cursor:pointer}.link{color:#5546ff;font-size:14px;line-height:20px;cursor:pointer;margin-top:4px}.modal-subheading{font-size:16px;font-weight:600;line-height:19px;color:#000000}.modal-wallet-card{display:flex;align-items:flex-start;background:white;border:2px solid #f4f4f6;border-radius:16px;margin-top:12px;padding:24px 10px 24px 20px}.wallet-container{display:flex;flex-direction:column}@media (max-width: 640px){.wallet-container{flex-direction:column-reverse}}.modal-wallet-text{font-size:14px;font-weight:400;line-height:20px;margin-top:4px;color:#74777d}.modal-wallet-text a{color:#5546ff;text-decoration:none}@media (max-width: 640px){.modal-wallet-text{font-size:13px}}.modal-wallet-card-content{display:flex;flex-direction:column;padding-left:14px}"; | ||
const modalCss = "/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}:host{all:initial}.modal-container{color:#74777d;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.modal-body{-ms-overflow-style:none;scrollbar-width:none}.modal-body::-webkit-scrollbar{display:none}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.z-\\[8999\\]{z-index:8999}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.box-border{box-sizing:border-box}.flex{display:flex}.aspect-square{aspect-ratio:1/1}.h-full{height:100%}.max-h-\\[calc\\(100\\%-24px\\)\\]{max-height:calc(100% - 24px)}.w-full{width:100%}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.basis-9{flex-basis:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.space-x-\\[5px\\]>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(5px*(1 - var(--tw-space-x-reverse)));margin-right:calc(5px*var(--tw-space-x-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-\\[10px\\]>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(10px*var(--tw-space-y-reverse));margin-top:calc(10px*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-scroll{overflow-y:scroll}.rounded-2xl{border-radius:1rem}.rounded-\\[10px\\]{border-radius:10px}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-\\[\\#333\\]{--tw-border-opacity:1;border-color:rgb(51 51 51/var(--tw-border-opacity))}.border-\\[\\#EFEFF2\\]{--tw-border-opacity:1;border-color:rgb(239 239 242/var(--tw-border-opacity))}.bg-\\[\\#00000040\\]{background-color:#00000040}.bg-\\[\\#323232\\]{--tw-bg-opacity:1;background-color:rgb(50 50 50/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-6{padding:1.5rem}.p-\\[14px\\]{padding:14px}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.align-text-bottom{vertical-align:text-bottom}.text-\\[9px\\]{font-size:9px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.leading-snug{line-height:1.375}.text-\\[\\#242629\\]{--tw-text-opacity:1;color:rgb(36 38 41/var(--tw-text-opacity))}.text-\\[\\#EFEFEF\\]{--tw-text-opacity:1;color:rgb(239 239 239/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_1px_2px_0_\\#0000000A\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_1px_2px_0_\\#0000000A\\]{--tw-shadow:0 1px 2px 0 #0000000a;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-\\[0_4px_5px_0_\\#00000005\\2c 0_16px_40px_0_\\#00000014\\]{--tw-shadow:0 4px 5px 0 #00000005,0 16px 40px 0 #00000014;--tw-shadow-colored:0 4px 5px 0 var(--tw-shadow-color),0 16px 40px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-\\[\\#FFBD7A\\]{outline-color:#ffbd7a}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.animate-in{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-duration:.15s;animation-name:enter}.fade-in{--tw-enter-opacity:0}.slide-in-from-bottom{--tw-enter-translate-y:100%}.hover\\:bg-\\[\\#0C0C0D\\]:hover{--tw-bg-opacity:1;background-color:rgb(12 12 13/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.hover\\:text-\\[\\#242629\\]:hover{--tw-text-opacity:1;color:rgb(36 38 41/var(--tw-text-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-\\[0_1px_2px_0_\\#00000010\\]:hover{--tw-shadow:0 1px 2px 0 #00000010;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.hover\\:shadow-\\[0_1px_2px_0_\\#00000010\\]:hover,.hover\\:shadow-\\[0_8px_16px_0_\\#00000020\\]:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:shadow-\\[0_8px_16px_0_\\#00000020\\]:hover{--tw-shadow:0 8px 16px 0 #00000020;--tw-shadow-colored:0 8px 16px 0 var(--tw-shadow-color)}.focus\\:underline:focus{text-decoration-line:underline}.focus\\:outline:focus{outline-style:solid}.focus\\:outline-\\[3px\\]:focus{outline-width:3px}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:768px){.md\\:max-h-\\[calc\\(100\\%-48px\\)\\]{max-height:calc(100% - 48px)}.md\\:w-\\[400px\\]{width:400px}.md\\:items-center{align-items:center}.md\\:justify-center{justify-content:center}.md\\:rounded-b-2xl{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.md\\:zoom-in-50{--tw-enter-scale:.5}.md\\:slide-in-from-bottom-0{--tw-enter-translate-y:0px}}"; | ||
const CHROME_BROWSER_URL = 'https://www.google.com/chrome/'; | ||
const BRAVE_BROWSER_URL = 'https://brave.com/'; | ||
const FIREFOX_BROWSER_URL = 'https://www.mozilla.org/en-US/'; | ||
const CHROME_STORE_URL = 'https://chrome.google.com/webstore/detail/hiro-wallet/ldinpeekobnhjjdofggfgjlcehhmanlj/'; | ||
const FIREFOX_STORE_URL = 'https://addons.mozilla.org/en-US/firefox/addon/hiro-wallet/'; | ||
const XVERSE_APP_STORE_URL = 'https://apps.apple.com/app/id1552272513'; | ||
const XVERSE_PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.secretkeylabs.xverse'; | ||
const XVERSE_CHROME_STORE_URL = 'https://chrome.google.com/webstore/detail/xverse-wallet/idnnbdplmphpflfnlkomgpfbpcgelopg'; | ||
const Modal = class { | ||
constructor(hostRef) { | ||
registerInstance(this, hostRef); | ||
this.authOptions = undefined; | ||
this.hasOpenedInstall = undefined; | ||
this.hasOpenedInstallXverse = undefined; | ||
this.defaultProviders = undefined; | ||
this.installedProviders = undefined; | ||
this.callback = undefined; | ||
} | ||
handleSelectProvider(providerId) { | ||
setSelectedProvider(providerId); | ||
this.modalEl.remove(); | ||
this.callback(); | ||
} | ||
handleCloseModal() { | ||
var _a, _b; | ||
this.modalEl.remove(); | ||
(_b = (_a = this.authOptions).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a); | ||
// todo: throw Error that website can catch and handle (e.g. ConnectCancelError) | ||
} | ||
handleDownloadPath(browser) { | ||
// todo: nice to have: | ||
// getComment(provider: WebBTCProvider, browser: string, isMobile?: string) { | ||
// if (!provider) return null; | ||
// const hasExtension = this.getBrowserUrl(provider); | ||
// const hasMobile = this.getMobileUrl(provider); | ||
// if (isMobile && hasExtension && !hasMobile) return 'Extension Only'; | ||
// if (!isMobile && !hasExtension && hasMobile) return 'Mobile Only'; | ||
// if (!isMobile && !browser) return 'Current browser not supported'; | ||
// return null; | ||
// } | ||
getBrowserUrl(provider) { | ||
var _a; | ||
return (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : provider.mozillaAddOnsUrl; | ||
} | ||
getMobileUrl(provider) { | ||
var _a; | ||
return (_a = provider.iOSAppStoreUrl) !== null && _a !== void 0 ? _a : provider.googlePlayStoreUrl; | ||
} | ||
getInstallUrl(provider, browser) { | ||
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k; | ||
if (browser === 'Chrome') { | ||
window.open(CHROME_STORE_URL, '_blank'); | ||
return (_b = (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : this.getMobileUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl; | ||
} | ||
else if (browser === 'Firefox') { | ||
window.open(FIREFOX_STORE_URL, '_blank'); | ||
return (_d = (_c = provider.mozillaAddOnsUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl; | ||
} | ||
else if (browser === 'IOS') { | ||
window.open(XVERSE_APP_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
return (_f = (_e = provider.iOSAppStoreUrl) !== null && _e !== void 0 ? _e : this.getBrowserUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl; | ||
} | ||
else if (browser === 'Android') { | ||
window.open(XVERSE_PLAY_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
return (_h = (_g = provider.googlePlayStoreUrl) !== null && _g !== void 0 ? _g : this.getBrowserUrl(provider)) !== null && _h !== void 0 ? _h : provider.webUrl; | ||
} | ||
else if (browser === 'Xverse-Chrome') { | ||
window.open(XVERSE_CHROME_STORE_URL, '_blank'); | ||
this.hasOpenedInstallXverse = true; | ||
return; | ||
} | ||
else { | ||
window.open('https://www.hiro.so/wallet/install-web', '_blank'); | ||
return (_k = (_j = this.getBrowserUrl(provider)) !== null && _j !== void 0 ? _j : provider.webUrl) !== null && _k !== void 0 ? _k : this.getMobileUrl(provider); | ||
} | ||
this.hasOpenedInstall = true; | ||
} | ||
render() { | ||
const browser = getBrowser(); | ||
const isMobile = getPlatform(); | ||
return (h("div", { class: "modal-container" }, h("div", { class: "modal-body" }, h("div", { class: "modal-header" }, h("div", { class: "close-modal" }, h("img", { class: "close-icon", src: closeIconSvg, onClick: () => this.handleCloseModal() })), isMobile || browser ? (h("span", { class: "modal-title" }, "Get wallet to use ", this.authOptions.appDetails.name)) : (h("span", { class: "modal-title" }, "Your browser isn't supported"))), h("div", { class: "modal-subtitle" }, "To sign in to ", this.authOptions.appDetails.name, ", you will need a Stacks-compatible wallet."), h("div", { class: "modal-content" }, h("div", { class: "wallet-container" }, h("div", { class: "modal-wallet-card" }, h("img", { src: leatherLogoSvg }), h("div", { class: "modal-wallet-card-content" }, h("span", { class: "modal-subheading" }, "Leather"), browser && !isMobile ? (h("div", { class: "modal-wallet-text" }, "Leather is the only Bitcoin wallet you need to tap into the emerging Bitcoin economy.")) : (h("div", { class: "modal-wallet-text" }, "Browser extension for ", ` `, h("a", { href: CHROME_BROWSER_URL, target: "_blank" }, "Chrome"), `, `, h("a", { href: BRAVE_BROWSER_URL, target: "_blank" }, "Brave"), `, or `, h("a", { href: FIREFOX_BROWSER_URL, target: "_blank" }, "Firefox"), ` on desktop.`)), h("span", { class: "link", onClick: () => window.open('https://leather.io/', '_blank') }, "About Leather \u2192"), browser && !isMobile && (h("div", { class: "download-app-container" }, this.hasOpenedInstall ? (h("div", { class: "modal-wallet-text" }, "After installing Leather, reload this page and sign in.")) : (h("button", { class: "button", onClick: () => { | ||
this.handleDownloadPath(browser); | ||
} }, "Download")))))), h("div", { class: "modal-wallet-card" }, h("img", { src: xverseWalletLogoSvg }), h("div", { class: "modal-wallet-card-content" }, h("span", { class: "modal-subheading" }, "Xverse Wallet"), browser === 'Chrome' ? (h("div", { class: "modal-wallet-text" }, "Xverse is an advanced web3 wallet for Bitcoin and Stacks. Available for Chrome, Android and iOS. Add it to Chrome to continue.")) : isMobile ? (h("div", { class: "modal-wallet-text" }, "Xverse is your gateway to Stacks apps like ", this.authOptions.appDetails.name, ". Install it on your device to continue.`")) : (h("div", { class: "modal-wallet-text" }, "Browser extension for ", ` `, h("a", { href: CHROME_BROWSER_URL, target: "_blank" }, "Chrome"), ` on desktop, application for iOS and Android on mobile.`)), h("span", { class: "link", onClick: () => window.open('https://www.xverse.app/', '_blank') }, "About Xverse Wallet \u2192"), h("div", { class: "download-app-container" }, this.hasOpenedInstallXverse ? (isMobile ? (h("span", { class: "link", onClick: () => window.open(`stacks://browser?url=${window.location.href}`, '_blank') }, "Open this page in Xverse Wallet \u2192")) : (h("div", { class: "modal-wallet-text" }, "After installing Xverse Wallet, reload this page and sign in."))) : ((browser === 'Chrome' || isMobile) && (h("button", { class: "button", onClick: () => { | ||
this.handleDownloadPath(isMobile !== null && isMobile !== void 0 ? isMobile : `Xverse-${browser}`); | ||
} }, "Download"))))))))))); | ||
const mobile = getPlatform(); | ||
const notInstalledProviders = this.defaultProviders.filter(p => this.installedProviders.findIndex(i => i.id === p.id) === -1 // keep providers NOT already in installed list | ||
); | ||
const hasInstalled = this.installedProviders.length > 0; | ||
const hasMore = notInstalledProviders.length > 0; | ||
return (h("div", { class: "modal-container animate-in fade-in fixed inset-0 z-[8999] box-border flex h-full w-full items-end overflow-y-scroll bg-[#00000040] md:items-center md:justify-center" }, h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 box-border flex max-h-[calc(100%-24px)] w-full max-w-full cursor-default flex-col overflow-y-scroll rounded-2xl rounded-b-none bg-white p-6 text-sm leading-snug shadow-[0_4px_5px_0_#00000005,0_16px_40px_0_#00000014] md:max-h-[calc(100%-48px)] md:w-[400px] md:rounded-b-2xl" }, h("div", { class: "flex flex-col space-y-[10px]" }, h("div", { class: "flex items-center" }, h("div", { class: "flex-1 text-xl font-medium text-[#242629]" }, "Connect a wallet"), h("button", { class: "rounded-full bg-transparent p-1 transition-colors hover:bg-gray-100 active:scale-95", onClick: () => this.handleCloseModal() }, h("span", { class: "sr-only" }, "Close popup"), h("img", { src: closeIconSvg }))), hasInstalled ? (h("p", null, "Select the wallet you want to connect to.")) : (h("p", null, "You don't have any wallets in your browser that support this app. You need to install a wallet to proceed."))), !mobile && !browser && (h("div", { class: "mx-auto mt-4 rounded-xl bg-gray-200 px-3 py-1.5 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-300" }, "Unfortunately, your browser isn't supported")), hasInstalled && (h("div", { class: "mt-6" }, h("p", { class: "mb-4 text-sm font-medium" }, "Installed wallets"), h("ul", { class: "space-y-3" }, this.installedProviders.map((provider) => (h("li", { class: "flex items-center gap-3 rounded-[10px] border border-[#EFEFF2] p-[14px]" }, h("div", { class: "aspect-square basis-9 overflow-hidden" }, h("img", { src: provider.icon, class: "h-full w-full rounded-[10px] bg-gray-700" })), h("div", { class: "flex-1" }, h("div", { class: "text-sm font-medium text-[#242629]" }, provider.name), provider.webUrl && (h("a", { href: provider.webUrl, class: "text-sm", rel: "noopener noreferrer" }, new URL(provider.webUrl).hostname))), h("button", { class: "rounded-[10px] border border-[#333] bg-[#323232] px-4 py-2 text-sm font-medium text-[#EFEFEF] shadow-[0_1px_2px_0_#0000000A] outline-[#FFBD7A] transition-all hover:bg-[#0C0C0D] hover:text-white hover:shadow-[0_8px_16px_0_#00000020] focus:outline focus:outline-[3px] active:scale-95", onClick: () => this.handleSelectProvider(provider.id) }, "Connect"))))))), hasMore && (h("div", { class: "mt-6" }, hasInstalled ? (h("p", { class: "mb-4 text-sm font-medium" }, "Other wallets")) : (h("div", { class: "mb-5 flex justify-between" }, h("p", { class: "text-sm font-medium" }, "Recommended wallets"), h("a", { class: "flex cursor-pointer items-center space-x-[5px] text-xs transition-colors hover:text-[#242629] hover:underline focus:underline", href: "https://docs.hiro.so/what-is-a-wallet", rel: "noopener noreferrer", target: "_blank" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 16 16", fill: "none" }, h("path", { stroke: "#74777D", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.2", d: "M8.006 15a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" }), h("path", { stroke: "#74777D", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.2", d: "M5.97 5.9a2.1 2.1 0 0 1 4.08.7c0 1.4-2.1 2.1-2.1 2.1M8.006 11.5h.01" })), h("p", null, "What is a wallet?\u2009", h("span", { class: "align-text-bottom text-[9px]" }, "\u2197"))))), h("ul", { class: "space-y-3" }, notInstalledProviders.map((provider) => (h("li", { class: "flex items-center gap-3 rounded-[10px] border border-[#EFEFF2] p-[14px]" }, h("div", { class: "aspect-square basis-9 overflow-hidden" }, h("img", { src: provider.icon, class: "h-full w-full rounded-[10px] bg-gray-700" })), h("div", { class: "flex-1" }, h("div", { class: "text-sm font-medium text-[#242629]" }, provider.name), provider.webUrl && (h("a", { href: provider.webUrl, class: "text-sm", rel: "noopener noreferrer" }, new URL(provider.webUrl).hostname))), this.getInstallUrl(provider, browser) && (h("a", { class: "rounded-[10px] border border-[#EFEFF2] px-4 py-2 text-sm font-medium shadow-[0_1px_2px_0_#0000000A] outline-[#FFBD7A] transition-colors hover:text-[#242629] hover:shadow-[0_1px_2px_0_#00000010] focus:outline focus:outline-[3px] active:scale-95", href: this.getInstallUrl(provider, browser), rel: "noopener noreferrer", target: "_blank" }, "Install \u2192"))))))))))); | ||
} | ||
@@ -110,0 +112,0 @@ static get assetsDirs() { return ["assets"]; } |
@@ -1,3 +0,3 @@ | ||
import { p as promiseResolve, b as bootstrapLazy } from './index-bf6982d4.js'; | ||
export { s as setNonce } from './index-bf6982d4.js'; | ||
import { p as promiseResolve, b as bootstrapLazy } from './index-7b976844.js'; | ||
export { s as setNonce } from './index-7b976844.js'; | ||
@@ -17,3 +17,3 @@ /* | ||
patchBrowser().then(options => { | ||
return bootstrapLazy([["connect-modal",[[1,"connect-modal",{"authOptions":[8,"auth-options"],"hasOpenedInstall":[32],"hasOpenedInstallXverse":[32]}]]]], options); | ||
return bootstrapLazy([["connect-modal",[[1,"connect-modal",{"defaultProviders":[16],"installedProviders":[16],"callback":[16]}]]]], options); | ||
}); |
@@ -0,1 +1,26 @@ | ||
export { c as clearSelectedProvider, g as getSelectedProvider, s as setSelectedProvider } from './session-facc386d.js'; | ||
// AUTO REGISTERED PROVIDERS | ||
const getRegisteredProviders = () => { | ||
if (typeof window === 'undefined') | ||
return []; | ||
if (!window.webbtc_stx_providers) | ||
return []; | ||
return window.webbtc_stx_providers; | ||
}; | ||
const getInstalledProviders = (defaultProviders = []) => { | ||
if (typeof window === 'undefined') | ||
return []; | ||
const registeredProviders = getRegisteredProviders(); | ||
const additionalInstalledProviders = defaultProviders.filter(dp => { | ||
// already registered, don't add again | ||
if (registeredProviders.find(rp => rp.id === dp.id)) | ||
return false; | ||
// check if default provider is installed (even if not registered) | ||
const provider = dp.id.split('.').reduce((acc, part) => acc === null || acc === void 0 ? void 0 : acc[part], window); | ||
return !!provider; | ||
}); | ||
return registeredProviders.concat(additionalInstalledProviders); | ||
}; | ||
export { getInstalledProviders, getRegisteredProviders }; |
@@ -1,3 +0,3 @@ | ||
import { p as promiseResolve, b as bootstrapLazy } from './index-bf6982d4.js'; | ||
export { s as setNonce } from './index-bf6982d4.js'; | ||
import { p as promiseResolve, b as bootstrapLazy } from './index-7b976844.js'; | ||
export { s as setNonce } from './index-7b976844.js'; | ||
@@ -14,3 +14,3 @@ /* | ||
return patchEsm().then(() => { | ||
return bootstrapLazy([["connect-modal",[[1,"connect-modal",{"authOptions":[8,"auth-options"],"hasOpenedInstall":[32],"hasOpenedInstallXverse":[32]}]]]], options); | ||
return bootstrapLazy([["connect-modal",[[1,"connect-modal",{"defaultProviders":[16],"installedProviders":[16],"callback":[16]}]]]], options); | ||
}); | ||
@@ -17,0 +17,0 @@ }; |
@@ -8,5 +8,8 @@ /* eslint-disable */ | ||
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; | ||
import { WebBTCProvider } from "./providers"; | ||
export namespace Components { | ||
interface ConnectModal { | ||
"authOptions": any; | ||
"callback": Function; | ||
"defaultProviders": WebBTCProvider[]; | ||
"installedProviders": WebBTCProvider[]; | ||
} | ||
@@ -27,3 +30,5 @@ } | ||
interface ConnectModal { | ||
"authOptions"?: any; | ||
"callback"?: Function; | ||
"defaultProviders"?: WebBTCProvider[]; | ||
"installedProviders"?: WebBTCProvider[]; | ||
} | ||
@@ -30,0 +35,0 @@ interface IntrinsicElements { |
@@ -0,9 +1,13 @@ | ||
import { WebBTCProvider } from '../../providers'; | ||
export declare class Modal { | ||
authOptions: any; | ||
hasOpenedInstall: boolean; | ||
hasOpenedInstallXverse: boolean; | ||
defaultProviders: WebBTCProvider[]; | ||
installedProviders: WebBTCProvider[]; | ||
callback: Function; | ||
modalEl: HTMLConnectModalElement; | ||
handleSelectProvider(providerId: string): void; | ||
handleCloseModal(): void; | ||
handleDownloadPath(browser: string): void; | ||
getBrowserUrl(provider: WebBTCProvider): string; | ||
getMobileUrl(provider: WebBTCProvider): string; | ||
getInstallUrl(provider: WebBTCProvider, browser: string): string; | ||
render(): any; | ||
} |
export { Components, JSX } from './components'; | ||
export * from './providers'; | ||
export * from './session'; |
{ | ||
"name": "@stacks/connect-ui", | ||
"version": "6.1.3", | ||
"version": "6.1.4-alpha.a82b2d4.0", | ||
"license": "MIT", | ||
"prettier": "@stacks/prettier-config", | ||
"scripts": { | ||
@@ -22,3 +21,6 @@ "build": "stencil build --docs", | ||
"@types/node": "^14.6.0", | ||
"puppeteer": "^9.0.0" | ||
"puppeteer": "^9.0.0", | ||
"stencil-tailwind-plugin": "^1.8.0", | ||
"tailwindcss": "^3.3.5", | ||
"tailwindcss-animate": "^1.0.7" | ||
}, | ||
@@ -53,3 +55,3 @@ "publishConfig": { | ||
}, | ||
"gitHead": "3b52a2d417e114e8c5c77782e676befaa35c6189" | ||
"gitHead": "32df9ccc3b04b5d44ca6b72597cbe4f766445dd8" | ||
} |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
504673
58
5735
5
6
2
5