Merge pull request #1251 from multiversx/development

v2.39.0

CHANGELOG.md

@@ -7,7 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[v2.39.0]](https://github.com/multiversx/mx-sdk-dapp/pull/1251)] - 2024-09-03
+- [Fixed websocket connection is not closed on logout](https://github.com/multiversx/mx-sdk-dapp/pull/1250)
 - [Upgrade sdk-dapp-utils, webview-provider, metamask-proxy-provider and cross-window-provider packages](https://github.com/multiversx/mx-sdk-dapp/pull/1247)
+- [Add passkey provider and replace MetamaskProxyProvider with IframeProvider](https://github.com/multiversx/mx-sdk-dapp/pull/1249)
 
 ## [[v2.38.8]](https://github.com/multiversx/mx-sdk-dapp/pull/1246)] - 2024-08-29
 - [Added sign screens cached tokens functionality](https://github.com/multiversx/mx-sdk-dapp/pull/1245)

package.json

@@ -161,12 +161,13 @@
     "@multiversx/sdk-extension-provider": "3.0.0",
     "@multiversx/sdk-hw-provider": "6.4.0",
     "@multiversx/sdk-metamask-provider": "0.0.5",
-    "@multiversx/sdk-metamask-proxy-provider": "1.0.0",
     "@multiversx/sdk-native-auth-client": "1.0.7",
     "@multiversx/sdk-opera-provider": "1.0.0-alpha.1",
+    "@multiversx/sdk-passkey-provider": "1.0.0",
     "@multiversx/sdk-wallet": "4.2.0",
     "@multiversx/sdk-wallet-connect-provider": "4.1.3",
     "@multiversx/sdk-web-wallet-cross-window-provider": "1.0.0",
+    "@multiversx/sdk-web-wallet-iframe-provider": "1.0.2",
     "@multiversx/sdk-web-wallet-provider": "3.2.1",
     "@multiversx/sdk-webview-provider": "1.0.0",
     "@reduxjs/toolkit": "1.8.2",

src/UI/SignTransactionsModals/SignTransactionsModals.tsx

@@ -7,10 +7,11 @@ import { ConfirmationScreen, DeviceConfirmationScreen } from './components';
 import { SignWithCrossWindowWalletModal } from './SignWithCrossWindowWalletModal';
 import { SignWithExtensionModal } from './SignWithExtensionModal';
 import { SignWithExtraModal } from './SignWithExtraModal';
+import { SignWithIframeModal } from './SignWithIframeModal';
 import { SignWithLedgerModal } from './SignWithLedgerModal';
 import { SignWithMetamaskModal } from './SignWithMetamaskModal';
-import { SignWithMetamaskProxyModal } from './SignWithMetamaskProxyModal';
 import { SignWithOperaModal } from './SignWithOperaModal';
+import { SignWithPasskeyModal } from './SignWithPasskeyModal';
 import { SignWithWalletConnectModal } from './SignWithWalletConnectModal';
 import {
   CustomConfirmScreensType,
@@ -38,9 +39,9 @@ export const SignTransactionsModals = ({
     WalletConnect:
       CustomConfirmScreens?.WalletConnect ?? SignWithWalletConnectModal,
     Extension: CustomConfirmScreens?.Extension ?? SignWithExtensionModal,
+    Passkey: CustomConfirmScreens?.Passkey ?? SignWithPasskeyModal,
     Metamask: CustomConfirmScreens?.Metamask ?? SignWithMetamaskModal,
-    MetamaskProxy:
-      CustomConfirmScreens?.MetamaskProxy ?? SignWithMetamaskProxyModal,
+    Iframe: CustomConfirmScreens?.Iframe ?? SignWithIframeModal,
     Opera: CustomConfirmScreens?.Opera ?? SignWithOperaModal,
     CrossWindow:
       CustomConfirmScreens?.CrossWindow ?? SignWithCrossWindowWalletModal,
@@ -75,14 +76,16 @@ export const SignTransactionsModals = ({
       return renderScreen({ Screen: ConfirmScreens.WalletConnect });
     case LoginMethodsEnum.extension:
       return renderScreen({ Screen: ConfirmScreens.Extension });
+    case LoginMethodsEnum.passkey:
+      return renderScreen({ Screen: ConfirmScreens.Passkey });
     case LoginMethodsEnum.metamask:
       return renderScreen({ Screen: ConfirmScreens.Metamask, isDevice: true });
     case LoginMethodsEnum.opera:
       return renderScreen({ Screen: ConfirmScreens.Opera });
     case LoginMethodsEnum.crossWindow:
       return renderScreen({ Screen: ConfirmScreens.CrossWindow });
-    case LoginMethodsEnum.metamaskProxy:
-      return renderScreen({ Screen: ConfirmScreens.MetamaskProxy });
+    case LoginMethodsEnum.iframe:
+      return renderScreen({ Screen: ConfirmScreens.Iframe });
     case LoginMethodsEnum.wallet:
       return renderScreen({ Screen: ConfirmScreens.Wallet });
     case LoginMethodsEnum.extra:

src/UI/SignTransactionsModals/SignWithMetamaskProxyModal/SignWithMetamaskProxyModal.tsx → src/UI/SignTransactionsModals/SignWithIframeModal/SignWithIframeModal.tsx

@@ -6,7 +6,7 @@ import {
   SignWaitingScreenModalPropsType
 } from '../components';
 
-export const SignWithMetamaskProxyModal = (props: SignModalPropsType) => {
+export const SignWithIframeModal = (props: SignModalPropsType) => {
   const description = props.error
     ? props.error
     : props.transactions?.length > 1
@@ -16,7 +16,7 @@ export const SignWithMetamaskProxyModal = (props: SignModalPropsType) => {
   const waitingScreenProps: SignWaitingScreenModalPropsType = {
     ...props,
     description,
-    title: 'Confirm on Metamask Extension'
+    title: 'Confirm on your authenticated provider'
   };
 
   return <SignWaitingScreenModal {...waitingScreenProps} />;

src/UI/SignTransactionsModals/SignWithIframeModal/index.tsx

@@ -0,0 +1 @@
+export * from './SignWithIframeModal';

src/UI/SignTransactionsModals/SignWithPasskeyModal/SignWithPasskeyModal.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SignModalPropsType } from 'types';
+
+import {
+  SignWaitingScreenModal,
+  SignWaitingScreenModalPropsType
+} from '../components';
+
+export const SignWithPasskeyModal = (props: SignModalPropsType) => {
+  const description = props.error
+    ? props.error
+    : props.transactions?.length > 1
+    ? 'Please signin with your passkey in order to sign the transactions'
+    : 'Please signin with your passkey in order to sign the transaction';
+
+  const waitingScreenProps: SignWaitingScreenModalPropsType = {
+    ...props,
+    description,
+    title: 'Confirm by signing in with passkey'
+  };
+
+  return <SignWaitingScreenModal {...waitingScreenProps} />;
+};

src/UI/SignTransactionsModals/SignWithPasskeyModal/index.tsx

@@ -0,0 +1 @@
+export * from './SignWithPasskeyModal';

src/UI/SignTransactionsModals/types/signTransactionsModals.types.ts

@@ -20,11 +20,12 @@ export type ScreenType = (signProps: SignPropsType) => JSX.Element;
 export interface CustomConfirmScreensType {
   Ledger?: ScreenType;
   Extension?: ScreenType;
+  Passkey?: ScreenType;
   Metamask?: ScreenType;
   Opera?: ScreenType;
   CrossWindow?: ScreenType;
   WalletConnect?: ScreenType;
   Wallet?: ScreenType;
   Extra?: ScreenType;
-  MetamaskProxy?: ScreenType;
+  Iframe?: ScreenType;
 }

src/UI/metamaskProxy/MetamaskProxyLoginButton/MetamaskProxyButton.tsx → src/UI/iframe/IframeLoginButton/IframeButton.tsx

@@ -1,22 +1,24 @@
 import React, { ReactNode } from 'react';
+import { IframeLoginTypes } from '@multiversx/sdk-web-wallet-iframe-provider/out/constants';
 import { withStyles, WithStylesImportType } from 'hocs/withStyles';
-import { useMetamaskProxyLogin } from 'hooks/login/useMetamaskProxyLogin';
+import { useIframeLogin } from 'hooks/login/useIframeLogin';
 import { getIsNativeAuthSingingForbidden } from 'services/nativeAuth/helpers';
 import { LoginButton } from 'UI/LoginButton/LoginButton';
 import { OnProviderLoginType } from '../../../types';
 import { WithClassnameType } from '../../types';
 
-export interface MetamaskProxyLoginButtonPropsType
+export interface IframeLoginButtonPropsType
   extends WithClassnameType,
     OnProviderLoginType {
   children?: ReactNode;
   buttonClassName?: string;
   loginButtonText?: string;
   disabled?: boolean;
+  loginType?: IframeLoginTypes;
 }
 
-const MetamaskProxyLoginButtonComponent: (
-  props: MetamaskProxyLoginButtonPropsType & WithStylesImportType
+const IframeLoginButtonComponent: (
+  props: IframeLoginButtonPropsType & WithStylesImportType
 ) => JSX.Element = ({
   token,
   className = 'dapp-metamask-proxy-login',
@@ -26,9 +28,10 @@ const MetamaskProxyLoginButtonComponent: (
   nativeAuth,
   loginButtonText = 'Metamask Proxy',
   onLoginRedirect,
-  disabled
+  disabled,
+  loginType = IframeLoginTypes.metamask
 }) => {
-  const [onInitiateLogin] = useMetamaskProxyLogin({
+  const [onInitiateLogin] = useIframeLogin({
     callbackRoute,
     token,
     onLoginRedirect,
@@ -37,7 +40,7 @@ const MetamaskProxyLoginButtonComponent: (
   const disabledConnectButton = getIsNativeAuthSingingForbidden(token);
 
   const handleLogin = () => {
-    onInitiateLogin();
+    onInitiateLogin(loginType);
   };
 
   return (
@@ -53,15 +56,9 @@ const MetamaskProxyLoginButtonComponent: (
   );
 };
 
-export const MetamaskProxyButton = withStyles(
-  MetamaskProxyLoginButtonComponent,
-  {
-    ssrStyles: () =>
-      import(
-        'UI/metamaskProxy/MetamaskProxyLoginButton/metamaskProxyLoginButton.styles.scss'
-      ),
-    clientStyles: () =>
-      require('UI/metamaskProxy/MetamaskProxyLoginButton/metamaskProxyLoginButton.styles.scss')
-        .default
-  }
-);
+export const IframeButton = withStyles(IframeLoginButtonComponent, {
+  ssrStyles: () =>
+    import('UI/iframe/IframeLoginButton/iframeLoginButton.styles.scss'),
+  clientStyles: () =>
+    require('UI/iframe/IframeLoginButton/iframeLoginButton.styles.scss').default
+});

src/UI/metamaskProxy/MetamaskProxyLoginButton/metamaskProxyLoginButton.styles.scss → src/UI/iframe/IframeLoginButton/iframeLoginButton.styles.scss

@@ -10,7 +10,7 @@
   box-sizing: border-box;
 }
 
-.noMetamaskProxyButtonContent {
+.noIframeButtonContent {
   box-sizing: border-box;
 }
 

src/UI/iframe/IframeLoginButton/index.ts

@@ -0,0 +1 @@
+export * from './IframeButton';

src/UI/index.ts

@@ -4,6 +4,7 @@ export * from './Denominate';
 export * from './FormatAmount';
 export * from './ExplorerLink';
 export * from './extension/ExtensionLoginButton';
+export * from './passkey/PasskeyLoginButton';
 export * from './operaWallet/OperaWalletLoginButton';
 export * from './ledger/LedgerLoginButton';
 export * from './ledger/LedgerLoginContainer';
@@ -30,4 +31,4 @@ export * from './TransactionsTable';
 export * from './ScamPhishingAlert';
 export * from './TimeAgo';
 export * from './metamask/MetamaskLoginButton';
-export * from './metamaskProxy/MetamaskProxyLoginButton';
+export * from './iframe/IframeLoginButton';

src/UI/pages/UnlockPage/index.tsx

@@ -3,9 +3,10 @@ import classNames from 'classnames';
 import { withStyles, WithStylesImportType } from 'hocs/withStyles';
 import { useGetLoginInfo } from 'hooks';
 import { ExtensionLoginButton } from 'UI/extension/ExtensionLoginButton';
+import { IframeButton } from 'UI/iframe/IframeLoginButton';
 import { LedgerLoginButton } from 'UI/ledger/LedgerLoginButton';
-import { MetamaskProxyButton } from 'UI/metamaskProxy/MetamaskProxyLoginButton';
 import { OperaWalletLoginButton } from 'UI/operaWallet/OperaWalletLoginButton';
+import { PasskeyLoginButton } from 'UI/passkey/PasskeyLoginButton';
 import { WalletConnectLoginButton } from 'UI/walletConnect/WalletConnectLoginButton';
 import { WebWalletLoginButton } from 'UI/webWallet/WebWalletLoginButton';
 
@@ -16,9 +17,10 @@ export interface Props {
   loginRoute: string;
   LedgerLoginButtonText?: string;
   ExtensionLoginButtonText?: string;
+  PasskeyLoginButtonText?: string;
   OperaWalletLoginButtonText?: string;
   CrossWindowLoginButtonText?: string;
-  MetamaskProxyLoginButtonText?: string;
+  IframeLoginButtonText?: string;
   WebWalletLoginButtonText?: string;
   WalletConnectLoginButtonText?: string;
   WalletConnectV2LoginButtonText?: string;
@@ -33,8 +35,9 @@ const UnlockPageComponent = ({
   description = 'Pick a login method',
   WalletConnectLoginButtonText = 'xPortal App',
   ExtensionLoginButtonText = 'Extension',
+  PasskeyLoginButtonText = 'Passkey',
   OperaWalletLoginButtonText = 'Opera Crypto Wallet',
-  MetamaskProxyLoginButtonText = 'Metamask Proxy',
+  IframeLoginButtonText = 'Embeded web wallet',
   WebWalletLoginButtonText = 'Web wallet',
   globalStyles,
   styles
@@ -87,9 +90,14 @@ const UnlockPageComponent = ({
               loginButtonText={ExtensionLoginButtonText}
             />
 
-            <MetamaskProxyButton
+            <PasskeyLoginButton
               callbackRoute={loginRoute}
-              loginButtonText={MetamaskProxyLoginButtonText}
+              loginButtonText={PasskeyLoginButtonText}
+            />
+
+            <IframeButton
+              callbackRoute={loginRoute}
+              loginButtonText={IframeLoginButtonText}
             />
 
             <OperaWalletLoginButton

src/UI/passkey/PasskeyLoginButton/PasskeyLoginButton.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import { withStyles, WithStylesImportType } from 'hocs/withStyles';
+
+import { usePasskeyLogin } from 'hooks/login/usePasskeyLogin';
+import { getIsNativeAuthSingingForbidden } from 'services/nativeAuth/helpers';
+import { LoginButton } from 'UI/LoginButton/LoginButton';
+import { OnProviderLoginType } from '../../../types';
+import { WithClassnameType } from '../../types';
+
+export interface PasskeyLoginButtonPropsType
+  extends WithClassnameType,
+    OnProviderLoginType {
+  children?: ReactNode;
+  buttonClassName?: string;
+  loginButtonText?: string;
+  disabled?: boolean;
+}
+
+const PasskeyLoginButtonComponent: (
+  props: PasskeyLoginButtonPropsType & WithStylesImportType
+) => JSX.Element = ({
+  token,
+  className = 'dapp-passkey-login',
+  children,
+  callbackRoute,
+  buttonClassName = 'dapp-default-login-button',
+  nativeAuth,
+  loginButtonText = 'Passkey',
+  onLoginRedirect,
+  disabled
+}) => {
+  const [onInitiateLogin] = usePasskeyLogin({
+    callbackRoute,
+    token,
+    onLoginRedirect,
+    nativeAuth
+  });
+  const disabledConnectButton = getIsNativeAuthSingingForbidden(token);
+
+  const handleLogin = () => {
+    onInitiateLogin();
+  };
+
+  return (
+    <LoginButton
+      onLogin={handleLogin}
+      className={className}
+      btnClassName={buttonClassName}
+      text={loginButtonText}
+      disabled={disabled || disabledConnectButton}
+    >
+      {children}
+    </LoginButton>
+  );
+};
+
+export const PasskeyLoginButton = withStyles(PasskeyLoginButtonComponent, {
+  ssrStyles: () =>
+    import(
+      'UI/extension/ExtensionLoginButton/extensionLoginButton.styles.scss'
+    ),
+  clientStyles: () =>
+    require('UI/extension/ExtensionLoginButton/extensionLoginButton.styles.scss')
+      .default
+});

src/UI/passkey/PasskeyLoginButton/index.ts

@@ -0,0 +1 @@
+export * from './PasskeyLoginButton';

src/UI/passkey/PasskeyLoginButton/passkeyLoginButton.styles.scss

@@ -0,0 +1,19 @@
+.passkey-login {
+  box-sizing: border-box;
+}
+
+.login-text {
+  box-sizing: border-box;
+}
+
+.no-passkey-button-wrapper {
+  box-sizing: border-box;
+}
+
+.nopasskeyButtonContent {
+  box-sizing: border-box;
+}
+
+.no-passkey-button-title {
+  box-sizing: border-box;
+}