Merge pull request #1375 from multiversx/mm-add-guardian-change-alert-on-login

Unconfirmed Guardian Change Toast

Author: MiroMargineanu

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Added a warning toast when an unconfirmed guardian change took place](https://github.com/multiversx/mx-sdk-dapp/pull/1375)
 - [Fixed metamask addon link to use new Chrome Web Store domain](https://github.com/multiversx/mx-sdk-dapp/pull/1374)
 
 ## [[v3.2.3](https://github.com/multiversx/mx-sdk-dapp/pull/1373)] - 2025-02-06

src/UI/GuardianWarningToast/GuardianWarningToast.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { WithStylesImportType } from 'hocs/useStyles';
+import { withStyles } from 'hocs/withStyles';
+
+export const GuardianWarningToastComponent = ({
+  styles
+}: WithStylesImportType) => (
+  <div className={styles?.guardianWarningToast}>
+    <div className={styles?.guardianWarningToastHeading}>
+      <FontAwesomeIcon
+        icon={faWarning}
+        className={styles?.guardianWarningToastHeadingIcon}
+      />
+
+      <div className={styles?.guardianWarningToastHeadingText}>
+        Account at risk!
+      </div>
+    </div>
+
+    <div className={styles?.guardianWarningToastDescription}>
+      Your account has an unconfirmed guardian change, which could be caused by
+      a possible breach! Be cautious before making any transaction.
+    </div>
+  </div>
+);
+
+export const GuardianWarningToast = withStyles(GuardianWarningToastComponent, {
+  ssrStyles: () =>
+    import('UI/GuardianWarningToast/guardianWarningToastStyles.scss'),
+  clientStyles: () =>
+    require('UI/GuardianWarningToast/guardianWarningToastStyles.scss').default
+});

src/UI/GuardianWarningToast/guardianWarningToastStyles.scss

@@ -0,0 +1,24 @@
+@use '../../assets/sass/variables/variables.scss';
+
+.guardian-warning-toast {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .guardian-warning-toast-heading {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .guardian-warning-toast-heading-icon {
+      color: variables.$danger;
+      font-size: 20px;
+    }
+
+    .guardian-warning-toast-heading-text {
+      color: variables.$danger;
+      font-size: 16px;
+    }
+  }
+}

src/UI/GuardianWarningToast/index.ts

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

src/UI/index.ts

@@ -21,6 +21,7 @@ export * from './TransactionsToastList/components';
 export * from './Trim';
 export * from './Loader';
 export * from './Pagination';
+export * from './GuardianWarningToast';
 export * from './UsdValue';
 export * from './walletConnect/WalletConnectLoginButton';
 export * from './walletConnect/WalletConnectLoginContainer';

src/components/ProviderInitializer/ProviderInitializer.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+
 import { getNetworkConfigFromApi, useGetAccountFromApi } from 'apiCalls';
 import {
   DEVNET_CHAIN_ID,
@@ -15,6 +16,7 @@ import {
 import { loginAction } from 'reduxStore/commonActions';
 import { useDispatch, useSelector } from 'reduxStore/DappProviderContext';
 import {
+  accountSelector,
   addressSelector,
   ledgerAccountSelector
 } from 'reduxStore/selectors/accountInfoSelectors';
@@ -52,34 +54,38 @@ import {
   refreshAccount
 } from 'utils/account';
 import { parseNavigationParams } from 'utils/parseNavigationParams';
-
 import { isContract } from 'utils/smartContracts';
+
 import {
   getOperaProvider,
   getCrossWindowProvider,
   getExtensionProvider,
   getPasskeyProvider,
   processModifiedAccount,
   getMetamaskProvider,
-  getIframeProvider
+  getIframeProvider,
+  handleGuardianWarning
 } from './helpers';
 import { useSetLedgerProvider } from './hooks';
 
 let initalizingLedger = false;
 
 export function ProviderInitializer() {
+  const { loginMethod, iframeLoginType } = useSelector(loginInfoSelector);
+
   const network = useSelector(networkSelector);
   const walletAddress = useSelector(walletAddressSelector);
   const walletConnectLogin = useSelector(walletConnectLoginSelector);
-  const { loginMethod, iframeLoginType } = useSelector(loginInfoSelector);
   const walletLogin = useSelector(walletLoginSelector);
   const address = useSelector(addressSelector);
   const ledgerAccount = useSelector(ledgerAccountSelector);
   const ledgerLogin = useSelector(ledgerLoginSelector);
   const isLoggedIn = useSelector(isLoggedInSelector);
   const chainID = useSelector(chainIDSelector);
   const tokenLogin = useSelector(tokenLoginSelector);
+  const userAccount = useSelector(accountSelector);
   const nativeAuthConfig = tokenLogin?.nativeAuthConfig;
+
   const loginService = useLoginService(
     nativeAuthConfig ? nativeAuthConfig : false
   );
@@ -124,6 +130,12 @@ export function ProviderInitializer() {
     setLedgerAccountInfo();
   }, [ledgerAccount, isLoggedIn, ledgerData]);
 
+  useEffect(() => {
+    if (isLoggedIn && userAccount.address) {
+      handleGuardianWarning(userAccount);
+    }
+  }, [isLoggedIn, userAccount]);
+
   // We need to get the roundDuration for networks that do not support websocket (e.g. sovereign)
   // The round duration is used for polling interval
   async function refreshNetworkConfig() {

src/components/ProviderInitializer/helpers/handleGuardianWarning.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
+
+import { AccountType } from 'types';
+import { GuardianWarningToast } from 'UI';
+import { addNewCustomToast, storage } from 'utils';
+import { localStorageKeys } from 'utils/storage/local';
+
+const DAYS_TO_SHOW_AGAIN_AFTER_DISMISSAL = 3;
+const SECONDS_IN_A_DAY = 24 * 60 * 60;
+
+export const handleGuardianWarning = (userAccount: AccountType) => {
+  const handleToastDismissal = () => {
+    const daysAsSeconds = SECONDS_IN_A_DAY * DAYS_TO_SHOW_AGAIN_AFTER_DISMISSAL;
+    const currentTimestamp = Math.floor(Date.now() / 1000);
+
+    storage.local.setItem({
+      key: localStorageKeys.guardianBreachToastDismissTimestamp,
+      data: currentTimestamp,
+      expires: currentTimestamp + daysAsSeconds
+    });
+  };
+
+  const guardianBreachToastDismissTimestamp = storage.local.getItem(
+    localStorageKeys.guardianBreachToastDismissTimestamp
+  );
+
+  const isGuardedAccountPendingChange =
+    userAccount.isGuarded &&
+    userAccount.activeGuardianAddress &&
+    userAccount.pendingGuardianAddress;
+
+  if (isGuardedAccountPendingChange && !guardianBreachToastDismissTimestamp) {
+    addNewCustomToast({
+      toastId: 'guardianUnconfirmedChangeWarning',
+      title: 'Account at risk!',
+      component: () => <GuardianWarningToast />,
+      icon: faWarning,
+      onClose: handleToastDismissal
+    });
+  }
+};

src/components/ProviderInitializer/helpers/index.ts

@@ -6,3 +6,4 @@ export * from './processModifiedAccount';
 export * from './getModifiedLoginToken';
 export * from './getMetamaskProvider';
 export * from './getPasskeyProvider';
+export * from './handleGuardianWarning';

src/utils/storage/local.ts

@@ -2,7 +2,9 @@ import { getUnixTimestamp } from 'utils/dateTime';
 
 export const localStorageKeys = {
   loginExpiresAt: 'sdk-dapp-login-expires-at',
-  logoutEvent: 'sdk-dapp-logout-event'
+  logoutEvent: 'sdk-dapp-logout-event',
+  guardianBreachToastDismissTimestamp:
+    'sdk-dapp-guardian-breach-toast-dismiss-timestamp'
 } as const;
 
 type LocalValueType = keyof typeof localStorageKeys;