Add support for the new cross window functionality in web wallet (#1067)

* add walletV2 provider WIP * get wallet address from state * Message communication working * login with wallet v2 * login with wallet v2 * Navigation working * fix event listener removal * prepare sign * Fix yarn lock * Minor refactor * FIx error * close child window on unload * remove console log * remove console log * sign when child window is closed * sign when child window is closed * cancel tx * Add logout * Update yarn lock * Work on login event * Work on walletProvider * Remove isChildTab key * Rename walletV2 to crossWindow * Updated parentDapp to window.document.referrer * Remove reference to referrer * Update version to alpha * provider wip * sign transactions * Add comments * Update alpha version * fix wallet refresh (handshake lost) * cancel action from dApp * Update version * use provider from package * fix import * alpha version * alpha version increment * increment cross window provider version * increment alpha version * regenerate yarn lock * Add comment * bump version * regenerate yarn lock * bump provider version * bump alpha version * New webview provider (#996) * wip wallet hub integration * implement new webview provider * implement new webview provider functionality * fix signMessage implementaion on the NewWebviewProvider + some cleanup * fix sign message flow * cleanup * cleanup and revert unnecessary changes * revert minify changes * 2.24.2-alpha.7 * use new cross window provider response types * changes on cross window provider types reexports * update cross provider version * cross window provider reexports * set minify * reset local publish config * strongly types on the new webview provider * revert minification settings * remove comment * revert minification settings * refactoring according to code review * update logout function * upgrade cross window provider version * cleanup * yarn.lock * increment version * regenerate yarn lock * apply minification * Update version * rename NewWebViewProvider into ExperimentalWebviewProvider * 2.26.0-alpha.3 * 2.26.0-alpha-4 * Fixed build error * Upgrade @multiversx/sdk-web-wallet-cross-window-provider@0.0.10 * Upgrade version * Upgrade provider * cleanup * 2.26.0-alpha-8 * fix sign message * 2.26.0-alpha-9 * try to fix the issue of accessing origin from Window outside of the iframe * 2.26.0-alpha.10 * fix build * 2.27.0-alpha.0 * cleanup after merge * 2.27.0-alpha.1 * Fix axios instance * Update version * Add axios patch * Set interceptors * Fix interceptors * Fix tests * Update README * Upgrade corss-window-provider * 2.28.0-alpha.3 * Changed postMessage payload from string to plain object (#1025) * Changed postMessage payload from string to plain object * Updated helpers and CHANGELOG.md * 2.28.0-alpha.4 * Updated CHANGELOG.md * Removed exports * Updated package.json * 2.28.0-alpha.5 * Improve tsc support (#1026) * Update sdk-web-wallet-cross-window-provider@0.0.19 * 2.28.0-alpha.7 * Updated sdk-core * 2.28.1-alpha.0 * Update yarn lock * 2.28.4-alpha.1 * Fix extension cancel mesage * 2.28.4-alpha.2 * Updated sdk-core * 2.28.5-alpha.0 * Updated sdk-core * 2.28.5-alpha.1 * Update yarn lock * 2.28.5-alpha.2 * Upgrade @multiversx/sdk-web-wallet-cross-window-provider@0.0.20 * 2.28.5-alpha.3 * Extract multisig login logic * Fix login * 2.28.5-alpha.4 * Fixed wallet connect breaks login with other providers (#1041) * Fix wallet connect login * Fix possibly undefined payload (#1040) * Fixe possibly undefined payload * Update CHANGELOG * Wallet connect provider state clear * Fix wallet connect init and extension login cancel * Updated CHANGELOG.md --------- Co-authored-by: Tudor Morar <tudor.morar@multiversx.com> * 2.28.6-alpha.0 (#1045) * 2.28.6-alpha.1 * Fix types * 2.28.6-alpha.2 * 2.28.6-alpha.5 * 2.28.7-alpha.0 * 2.28.7-alpha.1 * Fix tests and build * Add support for nativeAuth impersonate (#1049) * Add support for nativeAuth impersonate * Fixed issues with wallet connect (#1050) * Fix issues with wallet connect * Remove ref * Revert changes * Update hook * Move slice to login instead of account * Update changelog and version * Update version * 2.28.7-alpha.4 * Add getHasNativeAuth (#1051) * Add checkNativeAuth * Update changelog and increment version * Rename function * Avoid sending nativeAuth if it is not configured * Update QR initialization to not do extra steps if it is not mounted * Update walletConnect initialization (#1052) * Update walletConnect initialization * Fix wallet connect chainID (#1053) * Add waitForChainID for useWalletConnectV2Login * Added new fee and receiver fields. * Updated data field styles. * Updated wording. * increment alpha * increment alpha * Added markup. * Fixed wrongfully placed data test identifier. * 2.28.7-alpha.19 * Added missing data test identifier. * 2.28.7-alpha.20 * Updated layout. * Updated file structure. * 2.28.7-alpha.21 * Updated code quality. * Removed redundant condition. * Updated imports to be relative. * Fix ledger guardian signing (#1059) * Fix ledger guardian signing * Update CHANGELOG * 2.28.7-alpha.22 * Added missing "data-testid". * 2.28.7-alpha.23 * Fix Sign step progress (#1060) * Fix Sign step progress * Upgrade @multiversx/sdk-web-wallet-cross-window-provider * Added the identifier instead of the ticker. * Update CHANGELOG * 2.28.7-alpha.24 --------- Co-authored-by: Miro Mărgineanu <miro.margineanu@elrond.com> * 2.28.8-alpha.0 * Update WalletConnect (#1064) * update @multiversx/sdk-wallet-connect-provider to 4.1.1 ( @WalletConnect 2.11.2 ) * - Removed canLoginRef requirement - Do not login if component is not mounted - Avoid double QR generation * updated type for loginButtonText * 2.28.8-alpha.2 * Updated CHANGELOG * Fixed tests. * Added "data-value". * 2.28.8-alpha.3 * Added variable. * Fixed code. * 2.28.8-alpha.4 * extend ExperimentalWebviewProvider with reset state option * 2.28.8-alpha.5 * update changelog * update changelog * Tm/cwh-fixes (#1068) * Add linting rule * Update CHANGELOG * Revert version * Rename multisig to modifiedAccount * Temp remove cross window wallet button * Add data-testid from enum * 2.28.8-alpha.6 * fix reset state action * 2.28.8-alpha.7 --------- Co-authored-by: Andrei <giura.andrei70@gmail.com> Co-authored-by: Tudor Morar <tudor.morar@multiversx.com> Co-authored-by: Razvan Tomegea <razvan.tomegea@gmail.com> Co-authored-by: Razvan Tomegea <razvantomegea@users.noreply.github.com> Co-authored-by: DanutIlie <42973343+DanutIlie@users.noreply.github.com> Co-authored-by: Gavrila Andrei <andrei.gavrila@multiversx.com> Co-authored-by: Miro Mărgineanu <miro.margineanu@elrond.com> Co-authored-by: Radu Mojic <radu.mojic@multiversx.com>
multiversx · Mar 11, 2024 · 5997bd2 · 5997bd2
1 parent 8ad898d
commit 5997bd2
Show file tree

Hide file tree

Showing 99 changed files with 2,789 additions and 1,736 deletions.
diff --git a/.eslintrc b/.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",

diff --git a/CHANGELOG.md b/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
 

diff --git a/README.md b/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

diff --git a/package.json b/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",

diff --git a/src/UI/Balance/Balance.tsx b/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
+});
diff --git a/src/UI/Balance/balanceStyles.scss b/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;
+    }
+  }
+}
diff --git a/src/UI/Balance/index.ts b/src/UI/Balance/index.ts
@@ -0,0 +1 @@
+export * from './Balance';
diff --git a/src/UI/SignTransactionsModals/SignTransactionsModals.tsx b/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:

diff --git a/.../SignTransactionsModals/SignWithCrossWindowWalletModal/SignWithCrossWindowWalletModal.tsx b/.../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} />;
+};
diff --git a/src/UI/SignTransactionsModals/SignWithCrossWindowWalletModal/index.tsx b/src/UI/SignTransactionsModals/SignWithCrossWindowWalletModal/index.tsx
@@ -0,0 +1 @@
+export * from './SignWithCrossWindowWalletModal';
diff --git a/...nsactionsModals/SignWithCrossWindowWalletModal/signWithCrossWindowWalletModal.styles.scss b/...nsactionsModals/SignWithCrossWindowWalletModal/signWithCrossWindowWalletModal.styles.scss
@@ -0,0 +1,11 @@
+.extension-modal {
+  color: inherit;
+}
+
+.modal-container {
+  color: inherit;
+}
+
+.extension {
+  color: inherit;
+}
diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx b/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);
     }