fix: pass selected provider when not persisting selection

.changeset/ninety-zebras-relax.md

@@ -0,0 +1,6 @@
+---
+'@stacks/connect-ui': patch
+'@stacks/connect': patch
+---
+
+Fix bug that would revert to undefined wallet popup behavior.

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

@@ -1,5 +1,5 @@
 import { Component, Element, Prop, h } from '@stencil/core';
-import { WebBTCProvider } from '../../providers';
+import { WebBTCProvider, getProviderFromId } from '../../providers';
 import { setSelectedProviderId } from '../../session';
 import CloseIcon from './assets/close-icon.svg';
 import { getBrowser, getPlatform } from './utils';
@@ -23,7 +23,7 @@ export class Modal {
   handleSelectProvider(providerId: string) {
     if (this.persistSelection) setSelectedProviderId(providerId);
     this.modalEl.remove();
-    this.callback();
+    this.callback(getProviderFromId(providerId));
   }
 
   handleCloseModal() {

packages/connect-ui/src/providers.ts

@@ -43,14 +43,18 @@ export const getInstalledProviders = (defaultProviders: WebBTCProvider[] = []) =
 
   const registeredProviders = getRegisteredProviders();
 
-  const additionalInstalledProviders = defaultProviders.filter(dp => {
+  const additionalInstalledProviders = defaultProviders.filter(defaultProvider => {
     // already registered, don't add again
-    if (registeredProviders.find(rp => rp.id === dp.id)) return false;
+    if (registeredProviders.find(rp => rp.id === defaultProvider.id)) return false;
 
     // check if default provider is installed (even if not registered)
-    const provider = dp.id.split('.').reduce((acc, part) => acc?.[part], window);
+    const provider = getProviderFromId(defaultProvider.id);
     return !!provider;
   });
 
   return registeredProviders.concat(additionalInstalledProviders);
 };
+
+export const getProviderFromId = (id: string | undefined) => {
+  return id?.split('.').reduce((acc, part) => acc?.[part], window);
+};

packages/connect/src/ui.ts

@@ -47,27 +47,28 @@ export type ActionOptions = (
 
 /** Helper higher-order function for creating connect methods that allow for wallet selection */
 function wrapConnectCall<O extends ActionOptions>(
-  action: (o: O, p?: StacksProvider) => any,
+  action: (options: O, provider?: StacksProvider) => any,
   persistSelection = true
 ) {
-  return function wrapped(o: O, p?: StacksProvider) {
-    if (p) return action(o, p); // if a provider is passed, use it
+  return function wrapped(options: O, provider?: StacksProvider) {
+    if (provider) return action(options, provider); // if a provider is passed, use it
 
-    const providerId = getSelectedProviderId();
-    const provider = getStacksProvider();
-    if (providerId && provider) return action(o, provider); // if a provider is selected, use it
+    const selectedId = getSelectedProviderId();
+    const selectedProvider = getStacksProvider();
+    if (selectedId && selectedProvider) return action(options, selectedProvider); // if a provider is selected, use it
 
     if (typeof window === 'undefined') return;
     void defineCustomElements(window);
 
-    const defaultProviders = o?.defaultProviders ?? DEFAULT_PROVIDERS;
+    const defaultProviders = options?.defaultProviders ?? DEFAULT_PROVIDERS;
     const installedProviders = getInstalledProviders(defaultProviders);
 
     const element = document.createElement('connect-modal');
     element.defaultProviders = defaultProviders;
     element.installedProviders = installedProviders;
     element.persistSelection = persistSelection;
-    element.callback = () => action(o);
+    element.callback = (selectedProvider: StacksProvider | undefined) =>
+      action(options, selectedProvider);
 
     document.body.appendChild(element);
 

packages/connect/src/utils.ts

@@ -1,9 +1,7 @@
-import { getSelectedProviderId } from '@stacks/connect-ui';
+import { getSelectedProviderId, getProviderFromId } from '@stacks/connect-ui';
 
 export function getStacksProvider() {
-  const providerId = getSelectedProviderId();
-  const provider = providerId?.split('.').reduce((acc, part) => acc?.[part], window);
-
+  const provider = getProviderFromId(getSelectedProviderId());
   return provider || window.StacksProvider || window.BlockstackProvider;
 }