Feat: blocked user

packages/modal/src/ui/components/Loader/Loader.tsx

@@ -1,12 +1,12 @@
-import { WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
+import { log, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { MODAL_STATUS } from "../../interfaces";
 import i18n from "../../localeImport";
 import Image from "../Image";
 import SpinnerLoader from "../SpinnerLoader";
-import { AuthorizingStatusType, ConnectedStatusType, ConnectingStatusType, ErroredStatusType, LoaderProps } from "./Loader.type";
+import { AuthorizingStatusType, BlockedStatusType, ConnectedStatusType, ConnectingStatusType, ErroredStatusType, LoaderProps } from "./Loader.type";
 
 /**
  * ConnectingStatus component
@@ -83,6 +83,37 @@ function ErroredStatus(props: ErroredStatusType) {
   );
 }
 
+function BlockedStatus(props: BlockedStatusType) {
+  const { primaryMessage, secondaryMessage, buttonMessage } = props;
+
+  const handleChangeWallet = () => {
+    // TODO: wire up real action in a follow-up commit
+    log.info("change wallet");
+  };
+
+  return (
+    <div className="w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" className="w3a--error-logo">
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M18 10a8 8 0 1 1-16.001 0A8 8 0 0 1 18 10m-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1"
+          clipRule="evenodd"
+        />
+      </svg>
+      <p className="w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white">{primaryMessage}</p>
+      <p className="w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400">{secondaryMessage}</p>
+      <button
+        type="button"
+        onClick={handleChangeWallet}
+        className="w3a--rounded-xl w3a--bg-app-primary-600 w3a--px-6 w3a--py-3 w3a--text-center w3a--text-sm w3a--font-medium w3a--text-app-white hover:w3a--bg-app-primary-700"
+      >
+        {buttonMessage}
+      </button>
+    </div>
+  );
+}
+
 function AuthorizingStatus(props: AuthorizingStatusType) {
   const [t] = useTranslation(undefined, { i18n });
   const { connector, externalWalletsConfig, handleMobileVerifyConnect } = props;
@@ -213,6 +244,7 @@ function Loader(props: LoaderProps) {
     externalWalletsConfig,
     handleMobileVerifyConnect,
     hideSuccessScreen = false,
+    blockedUserConfig,
     onAcceptConsent,
     onDeclineConsent,
     privacyPolicy,
@@ -255,6 +287,14 @@ function Loader(props: LoaderProps) {
 
       {modalStatus === MODAL_STATUS.ERRORED && <ErroredStatus message={message} />}
 
+      {modalStatus === MODAL_STATUS.BLOCKED && blockedUserConfig && (
+        <BlockedStatus
+          primaryMessage={blockedUserConfig.primaryMessage}
+          secondaryMessage={blockedUserConfig.secondaryMessage}
+          buttonMessage={blockedUserConfig.buttonMessage}
+        />
+      )}
+
       {modalStatus === MODAL_STATUS.AUTHORIZING && (
         <AuthorizingStatus
           connector={connector}

packages/modal/src/ui/components/Loader/Loader.type.ts

@@ -1,6 +1,6 @@
 import { BaseConnectorConfig, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
 
-import type { ModalStatusType } from "../../interfaces";
+import type { BlockedUserConfig, ModalStatusType } from "../../interfaces";
 
 export interface LoaderProps {
   externalWalletsConfig: Record<string, BaseConnectorConfig>;
@@ -12,6 +12,7 @@ export interface LoaderProps {
   isConnectAndSignAuthenticationMode: boolean;
   handleMobileVerifyConnect: (params: { connector: WALLET_CONNECTOR_TYPE }) => void;
   hideSuccessScreen?: boolean;
+  blockedUserConfig?: BlockedUserConfig;
   onAcceptConsent?: () => void | Promise<void>;
   onDeclineConsent?: () => void | Promise<void>;
   privacyPolicy?: string;
@@ -25,3 +26,5 @@ export type ConnectedStatusType = Pick<LoaderProps, "message">;
 export type ErroredStatusType = Pick<LoaderProps, "message">;
 
 export type AuthorizingStatusType = Pick<LoaderProps, "connector" | "externalWalletsConfig" | "handleMobileVerifyConnect">;
+
+export type BlockedStatusType = BlockedUserConfig;

packages/modal/src/ui/containers/Root/Root.tsx

@@ -224,6 +224,7 @@ function RootContent(props: RootProps) {
               externalWalletsConfig={modalState.externalWalletsConfig}
               handleMobileVerifyConnect={handleMobileVerifyConnect}
               hideSuccessScreen={hideSuccessScreen}
+              blockedUserConfig={modalState.blockedUserConfig}
               onAcceptConsent={handleAcceptConsent}
               onDeclineConsent={handleDeclineConsent}
               privacyPolicy={privacyPolicy}

packages/modal/src/ui/containers/Widget/Widget.tsx

@@ -50,13 +50,21 @@ function WidgetContent() {
         postLoadingMessage: "",
       });
     }
+    if (modalState.status === MODAL_STATUS.BLOCKED) {
+      setModalState({
+        ...modalState,
+        modalVisibility: false,
+        externalWalletsVisibility: false,
+      });
+    }
   };
 
   const showCloseIcon = useMemo(() => {
     return (
       modalState.status === MODAL_STATUS.INITIALIZED ||
       modalState.status === MODAL_STATUS.CONNECTED ||
       modalState.status === MODAL_STATUS.ERRORED ||
+      modalState.status === MODAL_STATUS.BLOCKED ||
       modalState.status === MODAL_STATUS.AUTHORIZED
     );
   }, [modalState.status]);

packages/modal/src/ui/interfaces.ts

@@ -75,6 +75,16 @@ export interface UIConfig extends CoreUIConfig, LoginModalConfig {
    */
   hideSuccessScreen?: boolean;
 
+  /**
+   * Configuration for the blocked user screen shown when a user is blocked by the dapp.
+   * All fields are optional and have defaults.
+   */
+  blockedUserConfig?: {
+    primaryMessage?: string;
+    secondaryMessage?: string;
+    buttonMessage?: string;
+  };
+
   connectorListener: SafeEventEmitter<Web3AuthNoModalEvents>;
 }
 
@@ -122,6 +132,7 @@ export const MODAL_STATUS = {
   CONNECTED: "connected",
   CONNECTING: "connecting",
   ERRORED: "errored",
+  BLOCKED: "blocked",
   AUTHORIZING: "authorizing",
   AUTHORIZED: "authorized",
   CONSENT_REQUIRING: "consent_requiring",
@@ -206,6 +217,15 @@ export interface ModalState {
   // Config State - set during initialization, rarely changes
   socialLoginsConfig: SocialLoginsConfig;
   externalWalletsConfig: Record<string, BaseConnectorConfig>;
+
+  // Blocked user state
+  blockedUserConfig?: BlockedUserConfig;
+}
+
+export interface BlockedUserConfig {
+  primaryMessage: string;
+  secondaryMessage: string;
+  buttonMessage: string;
 }
 
 export type SocialLoginEventType = { loginParams: ModalLoginParams };

packages/modal/src/ui/loginModal.tsx

@@ -563,6 +563,18 @@ export class LoginModal {
     listener.on(CONNECTOR_EVENTS.ERRORED, (error: Web3AuthError, loginMode: LoginModeType) => {
       log.error("error", error, error.message);
       if (loginMode === LOGIN_MODE.NO_MODAL) return;
+      if (error.code === 5120) {
+        this.setState({
+          modalVisibility: true,
+          status: MODAL_STATUS.BLOCKED,
+          blockedUserConfig: {
+            primaryMessage: this.uiConfig.blockedUserConfig?.primaryMessage || "You cannot access the site.",
+            secondaryMessage: this.uiConfig.blockedUserConfig?.secondaryMessage || "Access to the site is restricted",
+            buttonMessage: this.uiConfig.blockedUserConfig?.buttonMessage || "Change wallet",
+          },
+        });
+        return;
+      }
       if (error.code === 5000) {
         if (this.uiConfig.displayErrorsOnModal)
           this.setState({

packages/no-modal/src/base/errors/index.ts

@@ -144,6 +144,7 @@ export class WalletLoginError extends Web3AuthError {
     5117: "Unsupported operation",
     5118: "useSFAKey flag is enabled but SFA key is not available",
     5119: "User not logged in.",
+    5120: "User is blocked by the application",
   };
 
   public constructor(code: number, message?: string, cause?: unknown) {
@@ -193,6 +194,10 @@ export class WalletLoginError extends Web3AuthError {
   public static userNotLoggedIn(extraMessage = "", cause?: unknown): IWeb3AuthError {
     return WalletLoginError.fromCode(5119, extraMessage, cause);
   }
+
+  public static userBlocked(extraMessage = "", cause?: unknown): IWeb3AuthError {
+    return WalletLoginError.fromCode(5120, extraMessage, cause);
+  }
 }
 
 export class WalletOperationsError extends Web3AuthError {