Select provider

.github/workflows/npm-publish.yml

@@ -22,7 +22,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          registry-url: https://registry.npmjs.org/
+          registry-url: 'https://registry.npmjs.org'
       - name: Setup pnpm
         run: npm install -g pnpm
       - name: Install Chrome for Puppeteer
@@ -52,7 +52,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         if: ${{ steps.package.outputs.is-prerelease == 'false' }}
         run: |
-          RELEASE_TAG=v${{ steps.package.outputs.version }}
+          RELEASE_TAG=v$(node -p "require('./package.json').version")
           echo "Creating release for version: $RELEASE_TAG"
 
           changelog_content=$(awk "/^## \[\[?${RELEASE_TAG#v}[^\]]*\]/{flag=1; next} /^## \[/{flag=0} flag" CHANGELOG.md)
@@ -73,10 +73,10 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         if: ${{ steps.package.outputs.is-prerelease == 'true'}}
-        run: echo ${{ steps.package.outputs.is-prerelease}} && npm publish --tag next --no-git-checks
+        run: echo ${{ steps.package.outputs.is-prerelease}} && npm publish --tag next
 
       - name: Publish to npmjs
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         if: ${{ steps.package.outputs.is-prerelease == 'false' }}
-        run: npm publish --no-git-checks
+        run: npm publish

CHANGELOG.md

@@ -7,15 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+
+## [[0.1.9](https://github.com/multiversx/mx-sdk-dapp-ui/pull/286)] - 2026-01-13
+
+- [Added provider selection handling to unlock panel](https://github.com/multiversx/mx-sdk-dapp-ui/pull/285)
 - [Remove pagination webcomponent](https://github.com/multiversx/mx-sdk-dapp-ui/pull/282)
 
+## [[0.1.8](https://github.com/multiversx/mx-sdk-dapp-ui/pull/283)] - 2025-12-30
+
+- [Fix publish script, fix WalletConnect issues](https://github.com/multiversx/mx-sdk-dapp-ui/pull/283)
 
 ## [[0.1.7](https://github.com/multiversx/mx-sdk-dapp-ui/pull/281)] - 2025-12-11
 
 - [Fixed compatibility issue on stencil/core](https://github.com/multiversx/mx-sdk-dapp-ui/pull/279)
 
 ## [[0.1.6](https://github.com/multiversx/mx-sdk-dapp-ui/pull/277)] - 2025-12-09
 
+- [Fixed compatibility issue on stencil/core](https://github.com/multiversx/mx-sdk-dapp-ui/pull/279)
+
+## [[0.1.6](https://github.com/multiversx/mx-sdk-dapp-ui/pull/277)] - 2025-12-09
+
 - [Sync development with main](https://github.com/multiversx/mx-sdk-dapp-ui/pull/278)
 - [Fixed copy button](https://github.com/multiversx/mx-sdk-dapp-ui/pull/276)
 

README.md

@@ -1,4 +1,4 @@
-# MultiversX UI library for Front-End DApps
+# MultiversX UI library for Front-End dApps
 
 MultiversX Front-End Library for JavaScript and TypeScript (written in TypeScript).
 
@@ -50,13 +50,7 @@ It outputs both web components (working out of the box) and React components (yo
 ### React Components import
 
 ```tsx
-export {
-  MvxCopyButton,
-  MvxExplorerLink,
-  MvxFormatAmount,
-  MvxTransactionsTable,
-  MvxUnlockButton,
-} from '@multiversx/sdk-dapp-ui/react';
+export { MvxCopyButton, MvxExplorerLink, MvxFormatAmount, MvxTransactionsTable } from '@multiversx/sdk-dapp-ui/react';
 ```
 
 The library is divided into three main categories of components:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",

src/common/SidePanel/SidePanel.tsx

@@ -17,17 +17,12 @@ interface SidePanelPropsType {
   onBack?: () => void;
 }
 
-export function SidePanel({
-  isOpen = false,
-  panelClassName,
-  panelTitle,
-  hasBackButton,
-  showHeader = true,
-  onClose,
-  onBack
-}: SidePanelPropsType, children: JSX.Element) {
+export function SidePanel(
+  { isOpen = false, panelClassName, panelTitle, hasBackButton, showHeader = true, onClose, onBack }: SidePanelPropsType,
+  children: JSX.Element,
+) {
   if (isOpen !== undefined) {
-    handleSidePanelOpenChange(isOpen, (shouldAnimate) => {
+    handleSidePanelOpenChange(isOpen, shouldAnimate => {
       state.shouldAnimate = shouldAnimate;
     });
   }
@@ -56,32 +51,25 @@ export function SidePanel({
       onClick={handleOverlayClick}
       class={classNames([styles.sidePanelWrapper], { [styles.sidePanelWrapperVisible]: shouldAnimate })}
     >
-      <SidePanelSwiper
-        open={shouldAnimate}
-        onSheetDismiss={onClose}
-      >
+      <SidePanelSwiper open={shouldAnimate} onSheetDismiss={onClose}>
         <div
           id={sidePanelIdentifier}
           class={classNames([styles.sidePanel], { [styles.sidePanelVisible]: shouldAnimate }, panelClassName)}
         >
-          {showHeader && (
-            <SidePanelHeader
-              panelTitle={panelTitle}
-              panelClassName={panelClassName}
-              hasLeftButton={hasBackButton}
-              onRightButtonClick={handleCloseClick}
-              onLeftButtonClick={handleBackClick}
-            />
-          )}
-
-          <div
-            class={styles.sidePanelContent}
-          >
-            {children}
+          <div>
+            {showHeader && (
+              <SidePanelHeader
+                panelTitle={panelTitle}
+                panelClassName={panelClassName}
+                hasLeftButton={hasBackButton}
+                onRightButtonClick={handleCloseClick}
+                onLeftButtonClick={handleBackClick}
+              />
+            )}
           </div>
+          <div class={styles.sidePanelContent}>{children}</div>
         </div>
       </SidePanelSwiper>
     </div>
   );
 }
-

src/components/functional/unlock-panel/unlock-panel.tsx

@@ -52,8 +52,12 @@ export class UnlockPanel {
       UnlockPanelEventsEnum.CANCEL_IN_PROVIDER,
       this.handleResetLoginState,
     );
+    const unsubSelectProvider = this.eventBus.subscribe(
+      UnlockPanelEventsEnum.SELECT_PROVIDER,
+      this.handleProviderSelection,
+    );
 
-    this.unsubscribeFunctions.push(unsubDataUpdate, unsubCancelInProvider);
+    this.unsubscribeFunctions.push(unsubDataUpdate, unsubCancelInProvider, unsubSelectProvider);
     this.connectionMonitor.connect();
   }
 
@@ -67,6 +71,13 @@ export class UnlockPanel {
     this.allowedProviders = [];
   }
 
+  private readonly handleProviderSelection = ({ providerType }: { providerType: IProviderBase['type'] }) => {
+    const provider = this.allowedProviders.find(p => p.type === providerType);
+    if (provider) {
+      this.handleLogin(provider);
+    }
+  };
+
   private isExtensionInstalled(currentProvider: IProviderBase['type']) {
     return currentProvider === ProviderTypeEnum.extension && getIsExtensionAvailable();
   }

src/components/functional/unlock-panel/unlock-panel.types.ts

@@ -1,4 +1,4 @@
-import { IProviderBase } from "types/provider.types";
+import type { IProviderBase } from 'types/provider.types';
 
 // Extend the Window interface globally to include custom properties
 export interface ExtendedWindow extends Window {
@@ -24,6 +24,7 @@ export enum UnlockPanelEventsEnum {
   LOGIN = 'LOGIN',
   CANCEL_LOGIN = 'CANCEL_LOGIN',
   CANCEL_IN_PROVIDER = 'CANCEL_IN_PROVIDER',
+  SELECT_PROVIDER = 'SELECT_PROVIDER',
   /**
    * User clicks Close button inside mounted provider
    */

src/components/visual/transaction-list-item/transaction-list-item.types.ts

@@ -0,0 +1,3 @@
+export * from '../TransactionListItem/transactionListItem.types';
+
+// This file is a temporary workaround to maintain backward compatibility with sdk-dapp v5.5.1.