Fix passkey provider (#1295)

* fix passkey provider issues

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[v3.0.7](https://github.com/multiversx/mx-sdk-dapp/pull/1296)] - 2024-11-01
+- [Fixed Iframe provider reload](https://github.com/multiversx/mx-sdk-dapp/pull/1295)
 
 ## [[v3.0.6](https://github.com/multiversx/mx-sdk-dapp/pull/1294)] - 2024-11-01
 - [Fixed `location.assign` in extension context](https://github.com/multiversx/mx-sdk-dapp/pull/1293)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

src/components/ProviderInitializer/ProviderInitializer.tsx

@@ -14,12 +14,12 @@ import {
   ledgerAccountSelector
 } from 'reduxStore/selectors/accountInfoSelectors';
 import {
-  loginMethodSelector,
   walletConnectLoginSelector,
   walletLoginSelector,
   ledgerLoginSelector,
   isLoggedInSelector,
-  tokenLoginSelector
+  tokenLoginSelector,
+  loginInfoSelector
 } from 'reduxStore/selectors/loginInfoSelectors';
 import {
   chainIDSelector,
@@ -67,7 +67,7 @@ export function ProviderInitializer() {
   const network = useSelector(networkSelector);
   const walletAddress = useSelector(walletAddressSelector);
   const walletConnectLogin = useSelector(walletConnectLoginSelector);
-  const loginMethod = useSelector(loginMethodSelector);
+  const { loginMethod, iframeLoginType } = useSelector(loginInfoSelector);
   const walletLogin = useSelector(walletLoginSelector);
   const address = useSelector(addressSelector);
   const ledgerAccount = useSelector(ledgerAccountSelector);
@@ -326,7 +326,8 @@ export function ProviderInitializer() {
     }
     const provider = await getIframeProvider({
       address,
-      walletUrl: network.metamaskSnapWalletAddress
+      walletUrl: network.metamaskSnapWalletAddress,
+      loginType: iframeLoginType
     });
     if (provider) {
       setAccountProvider(provider);

src/components/ProviderInitializer/helpers/getIframeProvider.ts

@@ -1,11 +1,14 @@
 import { IframeProvider } from '@multiversx/sdk-web-wallet-iframe-provider/out';
+import { IframeLoginTypes } from '@multiversx/sdk-web-wallet-iframe-provider/out/constants';
 
 export async function getIframeProvider({
   address,
-  walletUrl
+  walletUrl,
+  loginType
 }: {
   address: string;
   walletUrl: string;
+  loginType?: IframeLoginTypes;
 }) {
   try {
     const provider = IframeProvider.getInstance();
@@ -14,6 +17,17 @@ export async function getIframeProvider({
       return provider;
     }
 
+    switch (loginType) {
+      case IframeLoginTypes.passkey:
+        provider.setLoginType(IframeLoginTypes.passkey);
+        break;
+      case IframeLoginTypes.metamask:
+        provider.setLoginType(IframeLoginTypes.metamask);
+        break;
+      default:
+        break;
+    }
+
     provider.setAddress(address).setWalletUrl(walletUrl);
     const success = await provider.init();
 

src/hooks/login/useIframeLogin.ts

@@ -124,7 +124,8 @@ export const useIframeLogin = ({
       dispatch(
         loginAction({
           address: account.address,
-          loginMethod: LoginMethodsEnum.iframe
+          loginMethod: LoginMethodsEnum.iframe,
+          iframeLoginType: loginType
         })
       );
 

src/reduxStore/commonActions.ts

@@ -1,10 +1,12 @@
+import { IframeLoginTypes } from '@multiversx/sdk-web-wallet-iframe-provider/out/constants';
 import { createAction } from '@reduxjs/toolkit';
 import { LOGIN_ACTION_NAME, LOGOUT_ACTION_NAME } from 'constants/index';
 import { LoginMethodsEnum } from 'types/enums.types';
 
 export interface LoginActionPayloadType {
   address: string;
   loginMethod: LoginMethodsEnum;
+  iframeLoginType?: IframeLoginTypes;
 }
 
 export const logoutAction = createAction(LOGOUT_ACTION_NAME);

src/reduxStore/slices/loginInfoSlice.ts

@@ -1,3 +1,4 @@
+import { IframeLoginTypes } from '@multiversx/sdk-web-wallet-iframe-provider/out/constants';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { setLoginExpiresAt, getNewLoginExpiresTimestamp } from 'storage/local';
 import { LoginMethodsEnum } from 'types/enums.types';
@@ -26,6 +27,7 @@ export interface LoginInfoType {
 
 export interface LoginInfoStateType {
   loginMethod: LoginMethodsEnum;
+  iframeLoginType?: IframeLoginTypes;
   walletConnectLogin: WalletConnectLoginType | null;
   ledgerLogin: LedgerLoginType | null;
   tokenLogin: TokenLoginType | null;
@@ -132,6 +134,7 @@ export const loginInfoSlice = createSlice({
       ) => {
         state.isLoginSessionInvalid = false;
         state.loginMethod = action.payload.loginMethod;
+        state.iframeLoginType = action.payload.iframeLoginType;
         setLoginExpiresAt(getNewLoginExpiresTimestamp());
       }
     );