Add passkey integration (#242)

mgavrila · web-flow · commit 18048bcddb05 · 2025-10-10T10:22:28.000+03:00
* Add passkey integration

* Added passkey provider
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Added passkey provider](https://github.com/multiversx/mx-sdk-dapp-ui/pull/242)
+
 ## [[0.0.34](https://github.com/multiversx/mx-sdk-dapp-ui/pull/238)] - 2025-10-09
 
 - [Added intro screens waiting for provider message](https://github.com/multiversx/mx-sdk-dapp-ui/pull/239)
diff --git a/src/assets/icons/passkey-provider-icon/passkey-provider-icon.scss b/src/assets/icons/passkey-provider-icon/passkey-provider-icon.scss
@@ -0,0 +1,8 @@
+:host {
+  @apply mvx:flex;
+
+  .passkey-provider-icon {
+    @apply mvx:w-full mvx:h-full  mvx:max-w-37.5 mvx:max-h-37.5;
+    fill: none;
+  }
+}
diff --git a/src/assets/icons/passkey-provider-icon/passkey-provider-icon.tsx b/src/assets/icons/passkey-provider-icon/passkey-provider-icon.tsx
@@ -0,0 +1,33 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'mvx-passkey-provider-icon',
+  styleUrl: 'passkey-provider-icon.scss',
+  shadow: true,
+})
+export class PasskeyProviderIcon {
+  @Prop() class?: string;
+
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 40 40"
+        class={{ 'passkey-provider-icon': true, [this.class]: Boolean(this.class) }}
+      >
+        <path
+          d="M0.5 20.3198C0.5 15.5916 0.501062 12.0958 0.861658 9.41373C1.22032 6.74604 1.9264 4.95839 3.28249 3.60231C4.63857 2.24623 6.42621 1.54014 9.09391 1.18148C11.776 0.820886 15.2718 0.819824 20 0.819824C24.7282 0.819824 28.224 0.820886 30.9061 1.18148C33.5738 1.54014 35.3614 2.24623 36.7175 3.60231C38.0736 4.95839 38.7797 6.74604 39.1383 9.41373C39.4989 12.0958 39.5 15.5916 39.5 20.3198C39.5 25.048 39.4989 28.5438 39.1383 31.2259C38.7797 33.8936 38.0736 35.6813 36.7175 37.0373C35.3614 38.3934 33.5738 39.0995 30.9061 39.4582C28.224 39.8188 24.7282 39.8198 20 39.8198C15.2718 39.8198 11.776 39.8188 9.09391 39.4582C6.42621 39.0995 4.63857 38.3934 3.28249 37.0373C1.9264 35.6813 1.22032 33.8936 0.861658 31.2259C0.501062 28.5438 0.5 25.048 0.5 20.3198Z"
+          fill="white"
+        />
+        <path
+          d="M0.5 20.3198C0.5 15.5916 0.501062 12.0958 0.861658 9.41373C1.22032 6.74604 1.9264 4.95839 3.28249 3.60231C4.63857 2.24623 6.42621 1.54014 9.09391 1.18148C11.776 0.820886 15.2718 0.819824 20 0.819824C24.7282 0.819824 28.224 0.820886 30.9061 1.18148C33.5738 1.54014 35.3614 2.24623 36.7175 3.60231C38.0736 4.95839 38.7797 6.74604 39.1383 9.41373C39.4989 12.0958 39.5 15.5916 39.5 20.3198C39.5 25.048 39.4989 28.5438 39.1383 31.2259C38.7797 33.8936 38.0736 35.6813 36.7175 37.0373C35.3614 38.3934 33.5738 39.0995 30.9061 39.4582C28.224 39.8188 24.7282 39.8198 20 39.8198C15.2718 39.8198 11.776 39.8188 9.09391 39.4582C6.42621 39.0995 4.63857 38.3934 3.28249 37.0373C1.9264 35.6813 1.22032 33.8936 0.861658 31.2259C0.501062 28.5438 0.5 25.048 0.5 20.3198Z"
+          stroke="#E5E5E5"
+        />
+        <path
+          d="M11.875 20.3198V21.8823C11.875 22.4292 11.4453 22.8198 10.9375 22.8198C10.3906 22.8198 10 22.4292 10 21.8823V20.3198C10 14.812 14.4531 10.3198 20 10.3198C23.0078 10.3198 25.7422 11.687 27.5781 13.8354C27.8906 14.2261 27.8516 14.812 27.4609 15.1636C27.0703 15.4761 26.4844 15.437 26.1328 15.0464C24.6484 13.3276 22.4609 12.1948 20 12.1948C15.5078 12.1948 11.875 15.8667 11.875 20.3198ZM29.7656 18.2886C29.9219 18.9526 30 19.6167 30 20.3198V21.9214C30 22.4292 29.5703 22.8589 29.0625 22.8589C28.5156 22.8589 28.125 22.4292 28.125 21.9214V20.3589C28.125 19.7729 28.0469 19.187 27.9297 18.6401C27.8125 18.1714 28.1641 17.6636 28.6719 17.5464C29.1797 17.4292 29.6484 17.7808 29.7656 18.2886ZM20 13.4448C23.7891 13.4448 26.875 16.5308 26.875 20.3198V21.2964C26.875 22.3901 26.7969 23.4839 26.6797 24.5386C26.6016 25.0073 26.2109 25.3198 25.7422 25.3198C25.1953 25.3198 24.7266 24.812 24.8047 24.2651C24.9219 23.2886 25 22.312 25 21.2964V20.3198C25 17.5854 22.7344 15.3198 20 15.3198C19.5312 15.3198 19.1016 15.3979 18.6719 15.5151C18.2812 15.6323 17.8125 15.5151 17.5391 15.2026C17.1094 14.7339 17.2656 13.9917 17.8516 13.7964C18.5156 13.562 19.2578 13.4448 20 13.4448ZM15.8594 16.1401C16.1719 16.5308 16.1719 17.0776 15.8594 17.4683C15.3125 18.2886 15 19.2651 15 20.3198V21.2964C15 22.4292 14.8438 23.562 14.6094 24.6558C14.5312 25.0464 14.1406 25.3198 13.75 25.3198C13.125 25.3198 12.6562 24.7339 12.8125 24.1089C13.0078 23.2104 13.125 22.2729 13.125 21.2964V20.3198C13.125 18.7573 13.6328 17.2729 14.5312 16.1401C14.8828 15.7104 15.5078 15.7495 15.8594 16.1401ZM23.75 20.3198V21.2964C23.75 22.8589 23.5938 24.4214 23.2812 25.9058C23.2031 26.2964 22.8516 26.5698 22.4609 26.5698C21.9141 26.5698 21.4844 26.062 21.6016 25.5151C21.875 24.1479 22.0312 22.7417 22.0312 21.2964V20.3198C22.0312 19.2261 21.0938 18.2886 20 18.2886C18.8672 18.2886 17.9688 19.2261 17.9688 20.3198V21.2964C17.9688 22.8979 17.7344 24.4604 17.3438 25.9839C17.2266 26.3354 16.9141 26.5698 16.5234 26.5698C15.9375 26.5698 15.5469 26.0229 15.7031 25.437C16.0547 24.1089 16.25 22.7026 16.25 21.2964V20.3198C16.25 18.2495 17.9297 16.5698 20 16.5698C22.0703 16.5698 23.75 18.2495 23.75 20.3198ZM20 19.3823C20.5078 19.3823 20.9375 19.812 20.9375 20.3198V21.2964C20.9375 23.8745 20.4297 26.4136 19.5312 28.8354L19.2969 29.4214C19.1016 29.8901 18.5547 30.1636 18.0859 29.9683C17.6172 29.7729 17.3438 29.2261 17.5391 28.7573L17.7734 28.1714C18.6328 25.9839 19.0625 23.6401 19.0625 21.2964V20.3198C19.0625 19.812 19.4531 19.3823 20 19.3823Z"
+          fill="#171717"
+        />
+      </svg>
+    );
+  }
+}
diff --git a/src/common/ProviderIdleScreen/helpers/getProviderIntroText.ts b/src/common/ProviderIdleScreen/helpers/getProviderIntroText.ts
@@ -15,6 +15,8 @@ export const getProviderIntroText = ({
       return `Open the MultiversX Browser Extension to ${loginText}`;
     case ProviderTypeEnum.metamask:
       return `Open the Metamask Browser Extension to ${loginText}`;
+    case ProviderTypeEnum.passkey:
+      return 'Use your predefined passkey to sign the transaction.';
     case ProviderTypeEnum.walletConnect:
       return `Open Xportal to ${loginText}`;
     case ProviderTypeEnum.crossWindow:
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -210,6 +210,9 @@ export namespace Components {
         "isVisible": boolean;
         "maxPageToSearchFor": number;
     }
+    interface MvxPasskeyProviderIcon {
+        "class"?: string;
+    }
     interface MvxPendingTransactionsPanel {
         "closeWithAnimation": () => Promise<unknown>;
         "getEventBus": () => Promise<IEventBus>;
@@ -825,6 +828,12 @@ declare global {
         prototype: HTMLMvxPaginationEllipsisFormElement;
         new (): HTMLMvxPaginationEllipsisFormElement;
     };
+    interface HTMLMvxPasskeyProviderIconElement extends Components.MvxPasskeyProviderIcon, HTMLStencilElement {
+    }
+    var HTMLMvxPasskeyProviderIconElement: {
+        prototype: HTMLMvxPasskeyProviderIconElement;
+        new (): HTMLMvxPasskeyProviderIconElement;
+    };
     interface HTMLMvxPendingTransactionsPanelElement extends Components.MvxPendingTransactionsPanel, HTMLStencilElement {
     }
     var HTMLMvxPendingTransactionsPanelElement: {
@@ -1240,6 +1249,7 @@ declare global {
         "mvx-pagination": HTMLMvxPaginationElement;
         "mvx-pagination-ellipsis": HTMLMvxPaginationEllipsisElement;
         "mvx-pagination-ellipsis-form": HTMLMvxPaginationEllipsisFormElement;
+        "mvx-passkey-provider-icon": HTMLMvxPasskeyProviderIconElement;
         "mvx-pending-transactions-panel": HTMLMvxPendingTransactionsPanelElement;
         "mvx-preloader": HTMLMvxPreloaderElement;
         "mvx-side-panel": HTMLMvxSidePanelElement;
@@ -1472,6 +1482,9 @@ declare namespace LocalJSX {
         "maxPageToSearchFor"?: number;
         "onSearch"?: (event: MvxPaginationEllipsisFormCustomEvent<number>) => void;
     }
+    interface MvxPasskeyProviderIcon {
+        "class"?: string;
+    }
     interface MvxPendingTransactionsPanel {
     }
     interface MvxPreloader {
@@ -1795,6 +1808,7 @@ declare namespace LocalJSX {
         "mvx-pagination": MvxPagination;
         "mvx-pagination-ellipsis": MvxPaginationEllipsis;
         "mvx-pagination-ellipsis-form": MvxPaginationEllipsisForm;
+        "mvx-passkey-provider-icon": MvxPasskeyProviderIcon;
         "mvx-pending-transactions-panel": MvxPendingTransactionsPanel;
         "mvx-preloader": MvxPreloader;
         "mvx-side-panel": MvxSidePanel;
@@ -1878,6 +1892,7 @@ declare module "@stencil/core" {
             "mvx-pagination": LocalJSX.MvxPagination & JSXBase.HTMLAttributes<HTMLMvxPaginationElement>;
             "mvx-pagination-ellipsis": LocalJSX.MvxPaginationEllipsis & JSXBase.HTMLAttributes<HTMLMvxPaginationEllipsisElement>;
             "mvx-pagination-ellipsis-form": LocalJSX.MvxPaginationEllipsisForm & JSXBase.HTMLAttributes<HTMLMvxPaginationEllipsisFormElement>;
+            "mvx-passkey-provider-icon": LocalJSX.MvxPasskeyProviderIcon & JSXBase.HTMLAttributes<HTMLMvxPasskeyProviderIconElement>;
             "mvx-pending-transactions-panel": LocalJSX.MvxPendingTransactionsPanel & JSXBase.HTMLAttributes<HTMLMvxPendingTransactionsPanelElement>;
             "mvx-preloader": LocalJSX.MvxPreloader & JSXBase.HTMLAttributes<HTMLMvxPreloaderElement>;
             "mvx-side-panel": LocalJSX.MvxSidePanel & JSXBase.HTMLAttributes<HTMLMvxSidePanelElement>;
diff --git a/src/components/functional/pending-transactions-panel/pending-transactions-panel.tsx b/src/components/functional/pending-transactions-panel/pending-transactions-panel.tsx
@@ -15,6 +15,8 @@ const getProviderIntroText = (providerType?: IProviderBase['type']) => {
       return 'Check  the MultiversX Browser Extension to connect to your wallet.';
     case ProviderTypeEnum.metamask:
       return 'Open the MetaMask Browser Extension to connect to your wallet.';
+    case ProviderTypeEnum.passkey:
+      return 'Use your predefined passkey to connect to your wallet.';
     case ProviderTypeEnum.crossWindow:
       return 'Follow the steps on MultiversX Web Wallet to connect to your wallet.';
     default:
diff --git a/src/components/functional/unlock-panel/helpers/getProviderButtonIcon.tsx b/src/components/functional/unlock-panel/helpers/getProviderButtonIcon.tsx
@@ -51,6 +51,8 @@ export const getProviderButtonIcon = ({
       }
     case ProviderTypeEnum.metamask:
       return <mvx-metamask-provider-icon />;
+    case ProviderTypeEnum.passkey:
+      return <mvx-passkey-provider-icon />;
     case ProviderTypeEnum.walletConnect:
       return <mvx-multiversx-logo-icon />;
     case ProviderTypeEnum.ledger:
diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/src/components/functional/unlock-panel/unlock-panel.tsx
@@ -108,6 +108,7 @@ export class UnlockPanel {
       case ProviderTypeEnum.crossWindow:
       case ProviderTypeEnum.extension:
       case ProviderTypeEnum.metamask:
+      case ProviderTypeEnum.passkey:
         this.isIntroScreenVisible = true;
         this.isLoggingIn = true;
         this.eventBus.publish(UnlockPanelEventsEnum.LOGIN, { type: provider.type, anchor: this.anchor });
diff --git a/src/constants/providerFactory.constants.ts b/src/constants/providerFactory.constants.ts
@@ -7,4 +7,5 @@ export const providerLabels: Record<string, string> = {
   [ProviderTypeEnum.walletConnect]: 'xPortal App',
   [ProviderTypeEnum.ledger]: 'Ledger',
   [ProviderTypeEnum.metamask]: 'MetaMask Snap',
+  [ProviderTypeEnum.passkey]: 'Passkey',
 };
diff --git a/src/types/provider.types.ts b/src/types/provider.types.ts
@@ -5,6 +5,7 @@ export enum ProviderTypeEnum {
   crossWindow = 'crossWindow',
   walletConnect = 'walletConnect',
   ledger = 'ledger',
+  passkey = 'passkey',
 }
 
 export interface IProviderBase<T extends ProviderTypeEnum = ProviderTypeEnum> {

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,8 @@ export const getProviderButtonIcon = ({`
`51`	`51`	`}`
`52`	`52`	`case ProviderTypeEnum.metamask:`
`53`	`53`	`return <mvx-metamask-provider-icon />;`
	`54`	`+ case ProviderTypeEnum.passkey:`
	`55`	`+ return <mvx-passkey-provider-icon />;`
`54`	`56`	`case ProviderTypeEnum.walletConnect:`
`55`	`57`	`return <mvx-multiversx-logo-icon />;`
`56`	`58`	`case ProviderTypeEnum.ledger:`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ export enum ProviderTypeEnum {`
`5`	`5`	`crossWindow = 'crossWindow',`
`6`	`6`	`walletConnect = 'walletConnect',`
`7`	`7`	`ledger = 'ledger',`
	`8`	`+ passkey = 'passkey',`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`export interface IProviderBase<T extends ProviderTypeEnum = ProviderTypeEnum> {`