@stacks/connect-ui - npm Package Compare versions

Comparing version 6.4.0 to 6.4.1-alpha.1728d99.0

dist/cjs/connect-modal.cjs.entry.js

@@ -89,14 +89,14 @@ 'use strict';
   }
-  getInstallUrl(provider, browser) {
+  getInstallUrl(provider, browser, platform) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    if (browser === 'Chrome') {
-      return (_b = (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : this.getMobileUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl;
+    if (platform === 'IOS') {
+      return (_b = (_a = provider.iOSAppStoreUrl) !== null && _a !== void 0 ? _a : this.getBrowserUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl;
     }
+    else if (browser === 'Chrome') {
+      return (_d = (_c = provider.chromeWebStoreUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl;
+    }
     else if (browser === 'Firefox') {
-      return (_d = (_c = provider.mozillaAddOnsUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl;
+      return (_f = (_e = provider.mozillaAddOnsUrl) !== null && _e !== void 0 ? _e : this.getMobileUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl;
     }
-    else if (browser === 'IOS') {
-      return (_f = (_e = provider.iOSAppStoreUrl) !== null && _e !== void 0 ? _e : this.getBrowserUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl;
-    }
-    else if (browser === 'Android') {
+    else if (platform === 'Android') {
       return (_h = (_g = provider.googlePlayStoreUrl) !== null && _g !== void 0 ? _g : this.getBrowserUrl(provider)) !== null && _h !== void 0 ? _h : provider.webUrl;
@@ -115,3 +115,3 @@ }
     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 bg-[#00000040] md:items-center md:justify-center" }, index.h("div", { class: "fixed inset-0 z-[8999]", onClick: () => this.handleCloseModal() }), index.h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 z-[9000] 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" }, "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")))))))))));
+    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 bg-[#00000040] md:items-center md:justify-center" }, index.h("div", { class: "fixed inset-0 z-[8999]", onClick: () => this.handleCloseModal() }), index.h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 z-[9000] 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" }, "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, mobile) && (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, mobile), rel: "noopener noreferrer", target: "_blank" }, "Install \u2192")))))))))));
   }
@@ -118,0 +118,0 @@ static get assetsDirs() { return ["assets"]; }

dist/collection/components/modal/modal.js

@@ -40,14 +40,14 @@ import { h } from '@stencil/core';
   }
-  getInstallUrl(provider, browser) {
+  getInstallUrl(provider, browser, platform) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    if (browser === 'Chrome') {
-      return (_b = (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : this.getMobileUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl;
+    if (platform === 'IOS') {
+      return (_b = (_a = provider.iOSAppStoreUrl) !== null && _a !== void 0 ? _a : this.getBrowserUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl;
     }
+    else if (browser === 'Chrome') {
+      return (_d = (_c = provider.chromeWebStoreUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl;
+    }
     else if (browser === 'Firefox') {
-      return (_d = (_c = provider.mozillaAddOnsUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl;
+      return (_f = (_e = provider.mozillaAddOnsUrl) !== null && _e !== void 0 ? _e : this.getMobileUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl;
     }
-    else if (browser === 'IOS') {
-      return (_f = (_e = provider.iOSAppStoreUrl) !== null && _e !== void 0 ? _e : this.getBrowserUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl;
-    }
-    else if (browser === 'Android') {
+    else if (platform === 'Android') {
       return (_h = (_g = provider.googlePlayStoreUrl) !== null && _g !== void 0 ? _g : this.getBrowserUrl(provider)) !== null && _h !== void 0 ? _h : provider.webUrl;
@@ -66,3 +66,3 @@ }
     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 bg-[#00000040] md:items-center md:justify-center" }, h("div", { class: "fixed inset-0 z-[8999]", onClick: () => this.handleCloseModal() }), h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 z-[9000] 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" }, "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")))))))))));
+    return (h("div", { class: "modal-container animate-in fade-in fixed inset-0 z-[8999] box-border flex h-full w-full items-end bg-[#00000040] md:items-center md:justify-center" }, h("div", { class: "fixed inset-0 z-[8999]", onClick: () => this.handleCloseModal() }), h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 z-[9000] 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" }, "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, mobile) && (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, mobile), rel: "noopener noreferrer", target: "_blank" }, "Install \u2192")))))))))));
   }
@@ -69,0 +69,0 @@ static get is() { return "connect-modal"; }

dist/connect-ui/connect-ui.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as o}from"./p-31bd3998.js";export{s as setNonce}from"./p-31bd3998.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),e(o)})().then((e=>o([["p-6d937570",[[1,"connect-modal",{defaultProviders:[16],installedProviders:[16],persistSelection:[4,"persist-selection"],callback:[16],cancelCallback:[16]}]]]],e)));
+import{p as e,b as o}from"./p-31bd3998.js";export{s as setNonce}from"./p-31bd3998.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),e(o)})().then((e=>o([["p-35d14d95",[[1,"connect-modal",{defaultProviders:[16],installedProviders:[16],persistSelection:[4,"persist-selection"],callback:[16],cancelCallback:[16]}]]]],e)));

dist/esm/connect-modal.entry.js

@@ -85,14 +85,14 @@ import { r as registerInstance, h, g as getElement } from './index-f9076013.js';
   }
-  getInstallUrl(provider, browser) {
+  getInstallUrl(provider, browser, platform) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    if (browser === 'Chrome') {
-      return (_b = (_a = provider.chromeWebStoreUrl) !== null && _a !== void 0 ? _a : this.getMobileUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl;
+    if (platform === 'IOS') {
+      return (_b = (_a = provider.iOSAppStoreUrl) !== null && _a !== void 0 ? _a : this.getBrowserUrl(provider)) !== null && _b !== void 0 ? _b : provider.webUrl;
     }
+    else if (browser === 'Chrome') {
+      return (_d = (_c = provider.chromeWebStoreUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl;
+    }
     else if (browser === 'Firefox') {
-      return (_d = (_c = provider.mozillaAddOnsUrl) !== null && _c !== void 0 ? _c : this.getMobileUrl(provider)) !== null && _d !== void 0 ? _d : provider.webUrl;
+      return (_f = (_e = provider.mozillaAddOnsUrl) !== null && _e !== void 0 ? _e : this.getMobileUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl;
     }
-    else if (browser === 'IOS') {
-      return (_f = (_e = provider.iOSAppStoreUrl) !== null && _e !== void 0 ? _e : this.getBrowserUrl(provider)) !== null && _f !== void 0 ? _f : provider.webUrl;
-    }
-    else if (browser === 'Android') {
+    else if (platform === 'Android') {
       return (_h = (_g = provider.googlePlayStoreUrl) !== null && _g !== void 0 ? _g : this.getBrowserUrl(provider)) !== null && _h !== void 0 ? _h : provider.webUrl;
@@ -111,3 +111,3 @@ }
     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 bg-[#00000040] md:items-center md:justify-center" }, h("div", { class: "fixed inset-0 z-[8999]", onClick: () => this.handleCloseModal() }), h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 z-[9000] 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" }, "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")))))))))));
+    return (h("div", { class: "modal-container animate-in fade-in fixed inset-0 z-[8999] box-border flex h-full w-full items-end bg-[#00000040] md:items-center md:justify-center" }, h("div", { class: "fixed inset-0 z-[8999]", onClick: () => this.handleCloseModal() }), h("div", { class: "modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 z-[9000] 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" }, "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, mobile) && (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, mobile), rel: "noopener noreferrer", target: "_blank" }, "Install \u2192")))))))))));
   }
@@ -114,0 +114,0 @@ static get assetsDirs() { return ["assets"]; }

dist/types/components/modal/modal.d.ts

@@ -13,4 +13,4 @@ import { WebBTCProvider } from '../../providers';
   getMobileUrl(provider: WebBTCProvider): string;
-  getInstallUrl(provider: WebBTCProvider, browser: string): string;
+  getInstallUrl(provider: WebBTCProvider, browser: string, platform: string): string;
   render(): any;
 }

package.json

 {
   "name": "@stacks/connect-ui",
-  "version": "6.4.0",
+  "version": "6.4.1-alpha.1728d99.0",
   "license": "MIT",
@@ -54,3 +54,3 @@ "scripts": {
   },
-  "gitHead": "fd1207f61023ce222b4291861bb26e0a716ec757"
+  "gitHead": "7040dc6bf302c7235321d12a721547c39db0f044"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

516965

increased by0.02%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes