Add support for the new cross window functionality in web wallet

.eslintrc

@@ -85,6 +85,7 @@
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "single"],
     "semi": ["error", "always"],
+    "prefer-object-spread": 2,
     "object-curly-newline": "off",
     "arrow-body-style": "off",
     "react/jsx-props-no-spreading": "off",

CHANGELOG.md

@@ -6,35 +6,51 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- [Fixed types and file names](https://github.com/multiversx/mx-sdk-dapp/pull/1068)
+- [Add support for the new cross window functionality in web wallet](https://github.com/multiversx/mx-sdk-dapp/pull/1067)
+- [Update WalletConnect package and functionality](https://github.com/multiversx/mx-sdk-dapp/pull/1064)
+- [Fixed sign step signing and labels](https://github.com/multiversx/mx-sdk-dapp/pull/1060)
+- [Fixed signing multiple transactions with guarded ledger](https://github.com/multiversx/mx-sdk-dapp/pull/1059)
+- [Added getHasNativeAuth in order to see if nativeAuth has been configured on development mode](https://github.com/multiversx/mx-sdk-dapp/pull/1051)
+- [Added support for nativeAuth impersonat](https://github.com/multiversx/mx-sdk-dapp/pull/1049)
+- [Updated WalletConnectV2 account provider to be updated on new or existing session](https://github.com/multiversx/mx-sdk-dapp/pull/1050)
 
 ## [[v2.28.8]](https://github.com/multiversx/mx-sdk-dapp/pull/1062)] - 2024-03-07
+
 - [Fixed base64 utils conversion](https://github.com/multiversx/mx-sdk-dapp/pull/1061)
 
 ## [[v2.28.7]](https://github.com/multiversx/mx-sdk-dapp/pull/1048)] - 2024-02-13
+
 - [Updated AddressRow data-testids](https://github.com/multiversx/mx-sdk-dapp/pull/1047)
 
 ## [[v2.28.6]](https://github.com/multiversx/mx-sdk-dapp/pull/1044)] - 2024-02-08
+
 - [Added option to access URL search param from application load time in `useParseSignedTransactions`](https://github.com/multiversx/mx-sdk-dapp/pull/1042)
 - [Fixed wallet connect breaks login with other providers](https://github.com/multiversx/mx-sdk-dapp/pull/1043)
 - [Fixed possibly undefined payload on custom toasts](https://github.com/multiversx/mx-sdk-dapp/pull/1036)
 
 ## [[v2.28.5]](https://github.com/multiversx/mx-sdk-dapp/pull/1036)] - 2024-02-01
+
 - [Fixed logout with web wallet infinite loop](https://github.com/multiversx/mx-sdk-dapp/pull/1036)
 
 ## [[v2.28.4]](https://github.com/multiversx/mx-sdk-dapp/pull/1035)] - 2024-02-01
+
 - [Reverted setting walletconnectV2 `accountProvider` on init](https://github.com/multiversx/mx-sdk-dapp/pull/1036)
 - [Fixed setting `loginToken` in `nativeAuthService` losing previous state](https://github.com/multiversx/mx-sdk-dapp/pull/1034)
 - [Fixed setting walletconnectV2 `accountProvider` on init](https://github.com/multiversx/mx-sdk-dapp/pull/1033)
 
 ## [[v2.28.3]](https://github.com/multiversx/mx-sdk-dapp/pull/1032)] - 2024-01-30
+
 - [Added transaction toast wrapper id](https://github.com/multiversx/mx-sdk-dapp/pull/1031)
 
 ## [[v2.28.2]](https://github.com/multiversx/mx-sdk-dapp/pull/1030)] - 2024-01-26
+
 - [Added support for `checkIsValidSender` with array option](https://github.com/multiversx/mx-sdk-dapp/pull/1029)
 
 ## [[v2.28.1]](https://github.com/multiversx/mx-sdk-dapp/pull/1028)] - 2024-01-25
-- [Added support for Web Wallet multisig token login](https://github.com/multiversx/mx-sdk-dapp/pull/1027)
 
+- [Added support for Web Wallet multisig token login](https://github.com/multiversx/mx-sdk-dapp/pull/1027)
+- [Changed postMessage payload from string to plain object](https://github.com/multiversx/mx-sdk-dapp/pull/1025)
 
 ## [[v2.28.0]](https://github.com/multiversx/mx-sdk-dapp/pull/1022)] - 2024-01-11
 

README.md

@@ -956,7 +956,12 @@ The sdk-dapp library exposes bundles for both CommonJS and ESModules, however, i
 moduleNameMapper: {
     '@multiversx/sdk-dapp/(.*)':
       '<rootDir>/node_modules/@multiversx/sdk-dapp/__commonjs/$1.js'
-}
+},
+```
+
+You may need in your setupJest.js file do:
+```javascript
+import 'isomorphic-fetch';
 ```
 
 # sdk-dapp exports

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.28.8",
+  "version": "2.28.8-alpha.7",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",
@@ -83,6 +83,7 @@
     "history": "5.3.0",
     "husky": "8.0.1",
     "identity-obj-proxy": "3.0.0",
+    "isomorphic-fetch": "3.0.0",
     "jest": "28.1.1",
     "jest-environment-jsdom": "28.1.3",
     "jest-mock": "29.3.1",
@@ -142,14 +143,15 @@
     "**/*.d.ts"
   ],
   "dependencies": {
-    "@multiversx/sdk-core": "12.18.0",
+    "@lifeomic/axios-fetch": "3.0.1",
+    "@multiversx/sdk-core": "13.0.0-alpha.2",
     "@multiversx/sdk-extension-provider": "3.0.0",
     "@multiversx/sdk-hw-provider": "6.4.0",
     "@multiversx/sdk-native-auth-client": "1.0.7",
     "@multiversx/sdk-opera-provider": "1.0.0-alpha.1",
     "@multiversx/sdk-wallet": "4.2.0",
-    "@multiversx/sdk-wallet-connect-provider": "4.1.0",
-    "@multiversx/sdk-web-wallet-cross-window-provider": "0.0.14",
+    "@multiversx/sdk-wallet-connect-provider": "4.1.1",
+    "@multiversx/sdk-web-wallet-cross-window-provider": "0.0.24",
     "@multiversx/sdk-web-wallet-provider": "3.2.1",
     "@reduxjs/toolkit": "1.8.2",
     "axios": "1.6.5",

src/UI/Balance/Balance.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import MultiversXSymbol from 'assets/icons/mvx-icon-simple.svg';
+import { withStyles } from 'hocs/withStyles';
+import { WithClassnameType } from 'UI/types';
+
+import { WithStylesImportType } from '../../hocs/useStyles';
+
+interface BalancePropsType extends WithClassnameType, WithStylesImportType {
+  amount: string;
+  addEqualSign?: boolean;
+  displayAsUsd?: boolean;
+  egldIcon?: boolean;
+  showTokenLabel?: boolean;
+  tokenLabel?: string;
+  showTokenLabelSup?: boolean;
+}
+
+export const BalanceComponent = ({
+  amount,
+  displayAsUsd,
+  addEqualSign,
+  egldIcon,
+  className,
+  showTokenLabel = true,
+  styles,
+  tokenLabel,
+  showTokenLabelSup,
+  'data-testid': dataTestId
+}: BalancePropsType) => {
+  const [mainBalance, decimalBalance] = amount.split('.');
+  const processedMainBalance =
+    displayAsUsd && mainBalance.indexOf('$') < 0
+      ? `$${mainBalance}`
+      : mainBalance;
+
+  const getBalancePayload = () => {
+    const balancePayload: Record<string, string> = { processedMainBalance };
+
+    if (addEqualSign && displayAsUsd) {
+      balancePayload.approximation = '≈';
+    }
+
+    if (decimalBalance) {
+      balancePayload.decimalBalance = `.${decimalBalance}`;
+    }
+
+    if (!displayAsUsd && showTokenLabel) {
+      balancePayload.tokenLabel = ` ${tokenLabel}`;
+    }
+
+    return balancePayload;
+  };
+
+  const balancePayload = getBalancePayload();
+  const dataValues = [
+    balancePayload.approximation,
+    balancePayload.processedMainBalance,
+    balancePayload.decimalBalance,
+    balancePayload.tokenLabel
+  ];
+
+  const dataBalanceValue = dataValues.reduce(
+    (totalDataValue, dataValueItem) =>
+      dataValueItem ? totalDataValue.concat(dataValueItem) : totalDataValue,
+    ''
+  );
+
+  return (
+    <div
+      className={classNames(styles?.balance, className)}
+      data-testid={dataTestId}
+      data-value={dataBalanceValue}
+    >
+      {egldIcon && !displayAsUsd && (
+        <MultiversXSymbol className={styles?.balanceSymbol} />
+      )}
+
+      {balancePayload.approximation && (
+        <span className={styles?.balanceApproximation}>
+          {balancePayload.approximation}
+        </span>
+      )}
+
+      {balancePayload.processedMainBalance && (
+        <span className={styles?.balanceMain}>{processedMainBalance}</span>
+      )}
+
+      {balancePayload.decimalBalance && (
+        <span className={styles?.balanceDecimals}>
+          {balancePayload.decimalBalance}
+        </span>
+      )}
+
+      {balancePayload.tokenLabel && (
+        <sup
+          className={classNames(styles?.balanceSuffix, {
+            [styles?.balanceSuffixSup]: showTokenLabelSup
+          })}
+        >
+          {balancePayload.tokenLabel}
+        </sup>
+      )}
+    </div>
+  );
+};
+
+export const Balance = withStyles(BalanceComponent, {
+  ssrStyles: () => import('UI/Balance/balanceStyles.scss'),
+  clientStyles: () => require('UI/Balance/balanceStyles.scss').default
+});

src/UI/Balance/balanceStyles.scss

@@ -0,0 +1,38 @@
+.balance {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  gap: 4px;
+
+  .balanceApproximation {
+    opacity: 0.75;
+  }
+
+  .balanceSymbol {
+    width: auto;
+    height: 0.666em;
+    position: relative;
+    top: 0.05em;
+
+    path {
+      fill: currentColor;
+    }
+  }
+
+  .balanceDecimals {
+    opacity: 0.75;
+    margin-left: -4px;
+  }
+
+  .balanceSuffix {
+    opacity: 0.75;
+
+    &.balanceSuffixSup {
+      font-size: 66%;
+      position: relative;
+      top: -0.125em;
+      vertical-align: unset;
+      white-space: nowrap;
+    }
+  }
+}

src/UI/Balance/index.ts

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

src/UI/SignTransactionsModals/SignTransactionsModals.tsx

@@ -4,6 +4,7 @@ import { useGetLoginInfo } from 'hooks';
 import { LoginMethodsEnum } from 'types';
 
 import { ConfirmationScreen, DeviceConfirmationScreen } from './components';
+import { SignWithCrossWindowWalletModal } from './SignWithCrossWindowWalletModal';
 import { SignWithExtensionModal } from './SignWithExtensionModal';
 import { SignWithExtraModal } from './SignWithExtraModal';
 import { SignWithLedgerModal } from './SignWithLedgerModal';
@@ -36,6 +37,8 @@ export const SignTransactionsModals = ({
       CustomConfirmScreens?.WalletConnect ?? SignWithWalletConnectModal,
     Extension: CustomConfirmScreens?.Extension ?? SignWithExtensionModal,
     Opera: CustomConfirmScreens?.Opera ?? SignWithOperaModal,
+    CrossWindow:
+      CustomConfirmScreens?.CrossWindow ?? SignWithCrossWindowWalletModal,
     // The purpose of having this is to have a consistent flow of transaction signing.
     // The logic for redirecting to the web wallet is placed in the ConfirmationScreen component,
     // so we have to render that component when we are logged in with the web wallet provider
@@ -60,7 +63,6 @@ export const SignTransactionsModals = ({
     },
     [verifyReceiverScam, className]
   );
-
   switch (loginMethod) {
     case LoginMethodsEnum.ledger:
       return renderScreen({ Screen: ConfirmScreens.Ledger, isDevice: true });
@@ -70,6 +72,8 @@ export const SignTransactionsModals = ({
       return renderScreen({ Screen: ConfirmScreens.Extension });
     case LoginMethodsEnum.opera:
       return renderScreen({ Screen: ConfirmScreens.Opera });
+    case LoginMethodsEnum.crossWindow:
+      return renderScreen({ Screen: ConfirmScreens.CrossWindow });
     case LoginMethodsEnum.wallet:
       return renderScreen({ Screen: ConfirmScreens.Wallet });
     case LoginMethodsEnum.extra:

src/UI/SignTransactionsModals/SignWithCrossWindowWalletModal/SignWithCrossWindowWalletModal.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { useSelector } from 'reduxStore/DappProviderContext';
+import { networkSelector } from 'reduxStore/selectors';
+import { SignModalPropsType } from 'types';
+import {
+  SignWaitingScreenModal,
+  SignWaitingScreenModalPropsType
+} from '../components';
+
+export const SignWithCrossWindowWalletModal = (props: SignModalPropsType) => {
+  const { walletAddress } = useSelector(networkSelector);
+
+  const description = props.error
+    ? props.error
+    : props.transactions?.length > 1
+    ? 'Check your MultiversX Wallet to sign the transactions'
+    : 'Check your MultiversX Wallet to sign the transaction';
+
+  const waitingScreenProps: SignWaitingScreenModalPropsType = {
+    ...props,
+    description,
+    title: `Confirm on ${walletAddress}`
+  };
+
+  return <SignWaitingScreenModal {...waitingScreenProps} />;
+};

src/UI/SignTransactionsModals/SignWithCrossWindowWalletModal/index.tsx

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

src/UI/SignTransactionsModals/SignWithCrossWindowWalletModal/signWithCrossWindowWalletModal.styles.scss

@@ -0,0 +1,11 @@
+.extension-modal {
+  color: inherit;
+}
+
+.modal-container {
+  color: inherit;
+}
+
+.extension {
+  color: inherit;
+}

src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx

@@ -87,8 +87,8 @@ const SignStepComponent = (props: SignStepType & WithStylesImportType) => {
 
   const signLastTransaction = isLastTransaction && !waitingForDevice;
 
-  const onSubmit = () => {
-    onSignTransaction();
+  const onSubmit = async () => {
+    await onSignTransaction();
     if (signLastTransaction && GuardianScreen) {
       return setShowGuardianScreen(true);
     }