refactor: onboarding after install

.changeset/warm-beds-pump.md

@@ -0,0 +1,6 @@
+---
+'@stacks/connect': minor
+'@stacks/connect-ui': minor
+---
+
+This adds sending the app url thru query params to reload the app after the extension is installed.

packages/connect-ui/src/components.d.ts

@@ -9,6 +9,7 @@ import { AuthOptions } from "@stacks/connect/types/auth";
 export namespace Components {
     interface ConnectModal {
         "authOptions": AuthOptions;
+        "redirectUrl": string;
     }
 }
 declare global {
@@ -25,6 +26,7 @@ declare global {
 declare namespace LocalJSX {
     interface ConnectModal {
         "authOptions"?: AuthOptions;
+        "redirectUrl"?: string;
     }
     interface IntrinsicElements {
         "connect-modal": ConnectModal;

packages/connect-ui/src/components/modal/modal.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Element } from '@stencil/core';
+import { Component, h, Prop, Element } from '@stencil/core';
 import CloseIcon from './assets/close-icon.svg';
 import KeyAndKeyhole from './assets/key-and-keyhole.svg';
 import StacksIcon from './assets/stacks-icon.svg';
@@ -20,9 +20,7 @@ const FIREFOX_STORE_URL = 'https://addons.mozilla.org/en-US/firefox/addon/stacks
 })
 export class Modal {
   @Prop() authOptions: AuthOptions;
-
-  @State()
-  hasOpenedInstall: boolean;
+  @Prop() redirectUrl: string;
 
   @Element() modalEl: HTMLElement;
 
@@ -31,14 +29,17 @@ export class Modal {
   }
 
   handleDownloadPath(browser: string) {
+    // Save app url in the query params to be used in the ext
+    // background script after install to reload the app
+    const urlParams = new URLSearchParams();
+    urlParams.set('redirectUrl', this.redirectUrl);
     if (browser === 'Chrome') {
-      window.open(CHROME_STORE_URL, '_blank');
+      window.open(CHROME_STORE_URL + `?${urlParams.toString()}`, '_blank');
     } else if (browser === 'Firefox') {
-      window.open(FIREFOX_STORE_URL, '_blank');
+      window.open(FIREFOX_STORE_URL + `?${urlParams.toString()}`, '_blank');
     } else {
       window.open('https://www.hiro.so/wallet/install-web', '_blank');
     }
-    this.hasOpenedInstall = true;
   }
 
   render() {
@@ -90,16 +91,13 @@ export class Modal {
                 </div>
               )}
             </div>
-            {this.hasOpenedInstall ? (
-              <div class="modal-subtitle">
-                After installing Stacks Wallet, reload this page and sign in.
-              </div>
-            ) : browser ? (
+            {browser ? (
               <div class="button-container">
                 <button
                   class="button"
                   onClick={() => {
                     this.handleDownloadPath(browser);
+                    this.modalEl.remove();
                   }}
                 >
                   Download Stacks Wallet

packages/connect-ui/src/components/modal/readme.md

@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property      | Attribute | Description | Type          | Default     |
-| ------------- | --------- | ----------- | ------------- | ----------- |
-| `authOptions` | --        |             | `AuthOptions` | `undefined` |
+| Property      | Attribute      | Description | Type          | Default     |
+| ------------- | -------------- | ----------- | ------------- | ----------- |
+| `authOptions` | --             |             | `AuthOptions` | `undefined` |
+| `redirectUrl` | `redirect-url` |             | `string`      | `undefined` |
 
 
 ----------------------------------------------

packages/connect-ui/src/components/modal/utils.ts

@@ -1,4 +1,4 @@
-export const isChrome = () => {
+const isChrome = () => {
   const isChromium = !!window['chrome'];
   const winNav = window.navigator;
   const vendorName = winNav.vendor;

packages/connect/package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "@rollup/plugin-replace": "^2.4.1",
     "@stacks/auth": "^1.2.3",
-    "@stacks/connect-ui": "^5.1.3",
+    "@stacks/connect-ui": "^5.1.5",
     "@stacks/network": "^1.2.2",
     "@stacks/transactions": "^1.3.0",
     "bn.js": "^5.2.0",

packages/connect/src/ui.ts

@@ -12,6 +12,7 @@ export const showConnect = (authOptions: AuthOptions) => {
     void defineCustomElements(window);
     const element = document.createElement('connect-modal');
     element.authOptions = authOptions;
+    element.redirectUrl = window.location.href;
     document.body.appendChild(element);
     const handleEsc = (ev: KeyboardEvent) => {
       if (ev.key === 'Escape') {

packages/connect/src/utils.ts

@@ -1,7 +1,3 @@
 export function getStacksProvider() {
-  return window.StacksProvider || window.BlockstackProvider;
-}
-
-export function isStacksWalletInstalled() {
-  return !!getStacksProvider();
+  return window.StacksProvider;
 }