FIx Safari cross-window signing (#196)

* Fix Safari cross-window signing

package.json

@@ -9,8 +9,8 @@
     "@fortawesome/fontawesome-svg-core": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@multiversx/sdk-core": "13.0.0-beta.4",
-    "@multiversx/sdk-dapp": "2.29.0-beta.6",
+    "@multiversx/sdk-core": "13.0.0-beta.9",
+    "@multiversx/sdk-dapp": "2.29.0-beta.20",
     "@multiversx/sdk-network-providers": "2.2.1",
     "axios": "1.6.5",
     "classnames": "2.3.2",

src/components/Layout/Header/Header.tsx

@@ -7,6 +7,24 @@ import { RouteNamesEnum } from 'localConstants';
 import MultiversXLogo from '../../../assets/img/multiversx-logo.svg?react';
 import { useMatch } from 'react-router-dom';
 
+const callbackUrl = `${window.location.origin}/unlock`;
+const onRedirect = undefined; // use this to redirect with useNavigate to a specific page after logout
+const shouldAttemptReLogin = false; // use for special cases where you want to re-login after logout
+const options = {
+  /*
+   * @param {boolean} [shouldBroadcastLogoutAcrossTabs=true]
+   * @description If your dApp supports multiple accounts on multiple tabs,
+   * this param will broadcast the logout event across all tabs.
+   */
+  shouldBroadcastLogoutAcrossTabs: true,
+  /*
+   * @param {boolean} [hasConsentPopup=false]
+   * @description Set it to true if you want to perform async calls before logging out on Safari.
+   * It will open a consent popup for the user to confirm the action before leaving the page.
+   */
+  hasConsentPopup: false
+};
+
 export const Header = () => {
   const isLoggedIn = useGetIsLoggedIn();
   const isUnlockRoute = Boolean(useMatch(RouteNamesEnum.unlock));
@@ -17,7 +35,15 @@ export const Header = () => {
 
   const handleLogout = () => {
     sessionStorage.clear();
-    logout(`${window.location.origin}/unlock`, undefined, false);
+    logout(
+      callbackUrl,
+      /*
+       * following are optional params. Feel free to remove them in your implementation
+       */
+      onRedirect,
+      shouldAttemptReLogin,
+      options
+    );
   };
 
   return (

src/helpers/signAndSendTransactions.ts

@@ -8,6 +8,8 @@ type SignAndSendTransactionsProps = {
   transactionsDisplayInfo: TransactionsDisplayInfoType;
 };
 
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 export const signAndSendTransactions = async ({
   transactions,
   callbackRoute,
@@ -19,7 +21,11 @@ export const signAndSendTransactions = async ({
     transactions,
     transactionsDisplayInfo,
     redirectAfterSign: false,
-    callbackRoute
+    callbackRoute,
+    // NOTE: performing async calls (eg: `await refreshAccount()`) before opening a new tab
+    // can cause the new tab to be blocked by Safari's popup blocker.
+    // To support this feature, we can set `hasConsentPopup` to `true`
+    hasConsentPopup: isSafari
   });
 
   return sessionId;