Select provider (#285)

arhtudormorar · iuliacimpeanu · mgavrila · web-flow · commit 05ffe8d16226 · 2026-01-13T11:54:31.000+02:00
* 0.1.7 (#281) * Refactored sign transactions panel internal components (#267) * Update styles * Refactored sign transactions footer * Refactored copy button * Refactored button component * Refactored tooltip component * Refactored spinner icon component * Refactored arrow right component * Updated copy button * Updated styles * Refactored sign transactions overview * Refactored sign-transactions-advanced and sign-transactions-header * Updated styles * Fixed test * Updated changelog * Updated files * Fixes after review * Eslint and prettierrc fixes (#270) * Eslint fixes * Prettierrc fixes * Updated changelog * Added minimize/maximize toasts (#272) * Added min/max toasts * Update changelog * Replace icon * Fixed trimmed address not showing in address-table (#273) * Fixed addresses not showing * Fix issue with trimWrapperVisible * Fixed unlockPanelFooter styles * Updated Trim * Updated Trim * Updated changelog --------- Co-authored-by: Gavrila Andrei <andrei.gavrila@multiversx.com> * Refactored side panel components (#271) * Update styles * Refactored sign transactions footer * Refactored copy button * Refactored button component * Refactored tooltip component * Refactored spinner icon component * Refactored arrow right component * Updated copy button * Updated styles * Refactored sign transactions overview * Refactored sign-transactions-advanced and sign-transactions-header * Updated styles * Updated styles * Fixed test * Updated changelog * Updated changelog * Updated files * Fixes after review * Fixes after review * Updates files location * Refactored side-panel-header comp * Refactored side-panel comp * Refactored side-panel-swipper styles * Refactored side panel swiper component. * Updated components * Updated styles * Updated changelog * Fixed test * Fixes after review * Refactored transaction list item (#274) * Refactored styles * Refactored transaction-list-item component * Updated changelog * Fixed tests * Fixes after review * Upgraded version * Fixed copy button (#276) * Fixed copy button * Upgraded version * Sync development with main (#278) * 0.1.5 (#275) * Refactored sign transactions panel internal components (#267) * Update styles * Refactored sign transactions footer * Refactored copy button * Refactored button component * Refactored tooltip component * Refactored spinner icon component * Refactored arrow right component * Updated copy button * Updated styles * Refactored sign transactions overview * Refactored sign-transactions-advanced and sign-transactions-header * Updated styles * Fixed test * Updated changelog * Updated files * Fixes after review * Eslint and prettierrc fixes (#270) * Eslint fixes * Prettierrc fixes * Updated changelog * Added minimize/maximize toasts (#272) * Added min/max toasts * Update changelog * Replace icon * Fixed trimmed address not showing in address-table (#273) * Fixed addresses not showing * Fix issue with trimWrapperVisible * Fixed unlockPanelFooter styles * Updated Trim * Updated Trim * Updated changelog --------- Co-authored-by: Gavrila Andrei <andrei.gavrila@multiversx.com> * Refactored side panel components (#271) * Update styles * Refactored sign transactions footer * Refactored copy button * Refactored button component * Refactored tooltip component * Refactored spinner icon component * Refactored arrow right component * Updated copy button * Updated styles * Refactored sign transactions overview * Refactored sign-transactions-advanced and sign-transactions-header * Updated styles * Updated styles * Fixed test * Updated changelog * Updated changelog * Updated files * Fixes after review * Fixes after review * Updates files location * Refactored side-panel-header comp * Refactored side-panel comp * Refactored side-panel-swipper styles * Refactored side panel swiper component. * Updated components * Updated styles * Updated changelog * Fixed test * Fixes after review * Refactored transaction list item (#274) * Refactored styles * Refactored transaction-list-item component * Updated changelog * Fixed tests * Fixes after review * Upgraded version --------- Co-authored-by: Gavrila Andrei <andrei.gavrila@multiversx.com> * Updated changelog --------- Co-authored-by: Gavrila Andrei <andrei.gavrila@multiversx.com> * Fixed compatibility issue on stencil/core (#279) * Updated package version * Updated changelog * Updated lockfile * Upgraded version --------- Co-authored-by: Gavrila Andrei <andrei.gavrila@multiversx.com> Co-authored-by: Tudor Morar <tudor.morar@multiversx.com> * v0.1.8 (#283) - fix SidePanel WalletConnect issues - (temp) fix sdk-dapp 5.5.1 breaking changes - update publish script - pnpm test fix * Add provider selection handling to unlock panel - Subscribed to SELECT_PROVIDER event to handle provider selection. - Implemented handleProviderSelection method to initiate login with the selected provider. - Updated unsubscribe functions to include the new subscription. * Update CHANGELOG * Update CHANGELOG * Update version --------- Co-authored-by: Iulia Cimpeanu <72752718+iuliacimpeanu@users.noreply.github.com> Co-authored-by: Gavrila Andrei <andrei.gavrila@multiversx.com> Co-authored-by: Radu Mojic <radu.mojic@multiversx.com>
diff --git a/.github/workflows/npm-publish.yml b/.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
diff --git a/CHANGELOG.md b/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)
 
diff --git a/README.md b/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:
diff --git a/package.json b/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",
diff --git a/src/common/SidePanel/SidePanel.tsx b/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>
   );
 }
-
diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/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();
   }
diff --git a/src/components/functional/unlock-panel/unlock-panel.types.ts b/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
    */
diff --git a/src/components/visual/transaction-list-item/transaction-list-item.types.ts b/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.

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@multiversx/sdk-dapp-ui",`
`3`		`- "version": "0.1.7",`
	`3`	`+ "version": "0.1.9",`
`4`	`4`	`"description": "A library to hold UI components for a dApp on the MultiversX blockchain",`
`5`	`5`	`"author": "MultiversX",`
`6`	`6`	`"license": "MIT",`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from '../TransactionListItem/transactionListItem.types';`
	`2`	`+`
	`3`	`+// This file is a temporary workaround to maintain backward compatibility with sdk-dapp v5.5.1.`