feat: updated other connectors

Author: smgv

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

@@ -6,7 +6,7 @@ import i18n from "../../localeImport";
 import CircularLoader from "../CircularLoader";
 import Image from "../Image";
 import PulseLoader from "../PulseLoader";
-import { ConnectedStatusType, ConnectingStatusType, ErroredStatusType, LoaderProps } from "./Loader.type";
+import { AuthorizingStatusType, ConnectedStatusType, ConnectingStatusType, ErroredStatusType, LoaderProps } from "./Loader.type";
 
 /**
  * ConnectingStatus component
@@ -89,29 +89,27 @@ function ErroredStatus(props: ErroredStatusType) {
   );
 }
 
-function AuthorizingStatus() {
+function AuthorizingStatus(props: AuthorizingStatusType) {
+  // const [t] = useTranslation(undefined, { i18n });
+  const { connector, externalWalletsConfig } = props;
+
+  // eslint-disable-next-line no-console
+  console.log("externalWalletsConfig", externalWalletsConfig);
+
   return (
-    <div className="w3a--flex w3a--size-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-6">
+    <div className="w3a--flex w3a--size-full w3a--flex-col w3a--items-center w3a--justify-between w3a--gap-y-6">
       <p className="w3a--p-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white">
-        Verify on MetaMask
+        Verify on {externalWalletsConfig[connector].label}
       </p>
       <div className="w3a--flex w3a--justify-center">
         <CircularLoader width={95} height={95} thickness={6} arcSizeDeg={100}>
-          <Image
-            imageId={`login-metamask`}
-            hoverImageId={`login-metamask`}
-            fallbackImageId="wallet"
-            height="45"
-            width="45"
-            isButton
-            extension="svg"
-          />
+          <Image imageId={`login-${connector}`} hoverImageId={`login-${connector}`} height="45" width="45" />
         </CircularLoader>
       </div>
       <p className="w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400">
         We’ve sent a request to your wallet. Verify on your wallet to confirm that you own this wallet.
       </p>
-      <button className="w3a--w-full w3a--rounded-xl w3a--bg-app-gray-100 w3a--p-2 w3a--py-3 w3a--text-sm w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white">
+      <button className="w3a--w-full w3a--rounded-xl w3a--bg-app-gray-100 w3a--p-2 w3a--py-3 w3a--text-sm w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white md:w3a--hidden">
         Click here to verify
       </button>
     </div>
@@ -124,7 +122,10 @@ function AuthorizingStatus() {
  * @returns Loader component
  */
 function Loader(props: LoaderProps) {
-  const { connector, connectorName, modalStatus, onClose, appLogo, message, isConnectAndSignAuthenticationMode } = props;
+  const { connector, connectorName, modalStatus, onClose, appLogo, message, isConnectAndSignAuthenticationMode, externalWalletsConfig } = props;
+
+  // eslint-disable-next-line no-console
+  console.log("connectorName", connectorName);
 
   useEffect(() => {
     if (modalStatus === MODAL_STATUS.CONNECTED) {
@@ -147,7 +148,7 @@ function Loader(props: LoaderProps) {
 
       {modalStatus === MODAL_STATUS.ERRORED && <ErroredStatus message={message} />}
 
-      {modalStatus === MODAL_STATUS.AUTHORIZING && <AuthorizingStatus />}
+      {modalStatus === MODAL_STATUS.AUTHORIZING && <AuthorizingStatus connector={connector} externalWalletsConfig={externalWalletsConfig} />}
     </div>
   );
 }

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

@@ -1,6 +1,9 @@
+import { BaseConnectorConfig } from "@web3auth/no-modal";
+
 import type { ModalStatusType } from "../../interfaces";
 
 export interface LoaderProps {
+  externalWalletsConfig: Record<string, BaseConnectorConfig>;
   message?: string;
   appLogo?: string;
   connector: string;
@@ -15,3 +18,5 @@ export type ConnectingStatusType = Pick<LoaderProps, "connectorName" | "appLogo"
 export type ConnectedStatusType = Pick<LoaderProps, "message">;
 
 export type ErroredStatusType = Pick<LoaderProps, "message">;
+
+export type AuthorizingStatusType = Pick<LoaderProps, "connector" | "externalWalletsConfig">;

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

@@ -442,6 +442,7 @@ function Root(props: RootProps) {
                 onClose={onCloseLoader}
                 appLogo={appLogo}
                 isConnectAndSignAuthenticationMode={isConnectAndSignAuthenticationMode}
+                externalWalletsConfig={modalState.externalWalletsConfig}
               />
             ) : (
               <>

packages/no-modal/src/connectors/base-solana-connector/baseSolanaConnector.ts

@@ -7,6 +7,7 @@ import {
   clearToken,
   CONNECTOR_EVENTS,
   CONNECTOR_STATUS,
+  CONNECTOR_STATUS_TYPE,
   ConnectorInitOptions,
   getSavedToken,
   IdentityTokenInfo,
@@ -19,7 +20,8 @@ export abstract class BaseSolanaConnector<T> extends BaseConnector<T> {
   async init(_?: ConnectorInitOptions): Promise<void> {}
 
   async getIdentityToken(): Promise<IdentityTokenInfo> {
-    if (!this.provider || this.status !== CONNECTOR_STATUS.CONNECTED) throw WalletLoginError.notConnectedError();
+    if (!this.provider || !([CONNECTOR_STATUS.CONNECTED, CONNECTOR_STATUS.AUTHORIZING] as CONNECTOR_STATUS_TYPE[]).includes(this.status))
+      throw WalletLoginError.notConnectedError();
     if (!this.coreOptions) throw WalletInitializationError.invalidParams("Please initialize Web3Auth with a valid options");
 
     const accounts = await this.provider.request<never, string[]>({ method: SOLANA_METHOD_TYPES.GET_ACCOUNTS });

packages/no-modal/src/connectors/coinbase-connector/coinbaseConnector.ts

@@ -114,16 +114,24 @@ class CoinbaseConnector extends BaseEvmConnector<void> {
         // ready to be connected again
         this.disconnect();
       });
+
       let identityTokenInfo: IdentityTokenInfo | undefined;
-      if (getIdentityToken) {
-        identityTokenInfo = await this.getIdentityToken();
-      }
+
       this.emit(CONNECTOR_EVENTS.CONNECTED, {
         connector: WALLET_CONNECTORS.COINBASE,
         reconnected: this.rehydrated,
         provider: this.provider,
         identityTokenInfo,
       } as CONNECTED_EVENT_DATA);
+
+      if (getIdentityToken) {
+        this.status = CONNECTOR_STATUS.AUTHORIZING;
+        this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: WALLET_CONNECTORS.COINBASE });
+        identityTokenInfo = await this.getIdentityToken();
+        this.status = CONNECTOR_STATUS.AUTHORIZED;
+        this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: WALLET_CONNECTORS.COINBASE });
+      }
+
       return this.provider;
     } catch (error) {
       // ready again to be connected

packages/no-modal/src/connectors/injected-solana-connector/walletStandardConnector.ts

@@ -112,15 +112,22 @@ export class WalletStandardConnector extends BaseSolanaConnector<void> {
 
       this.status = CONNECTOR_STATUS.CONNECTED;
       let identityTokenInfo: IdentityTokenInfo | undefined;
-      if (getIdentityToken) {
-        identityTokenInfo = await this.getIdentityToken();
-      }
+
       this.emit(CONNECTOR_EVENTS.CONNECTED, {
         connector: this.name,
         reconnected: this.rehydrated,
         provider: this.provider,
         identityTokenInfo,
       } as CONNECTED_EVENT_DATA);
+
+      if (getIdentityToken) {
+        this.status = CONNECTOR_STATUS.AUTHORIZING;
+        this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: this.name });
+        identityTokenInfo = await this.getIdentityToken();
+        this.status = CONNECTOR_STATUS.AUTHORIZED;
+        this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: this.name });
+      }
+
       return this.provider;
     } catch (error: unknown) {
       // ready again to be connected

packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts

@@ -179,16 +179,22 @@ class MetaMaskConnector extends BaseEvmConnector<void> {
       }
 
       let identityTokenInfo: IdentityTokenInfo | undefined;
-      if (getIdentityToken) {
-        identityTokenInfo = await this.getIdentityToken();
-      }
 
       this.emit(CONNECTOR_EVENTS.CONNECTED, {
         connector: WALLET_CONNECTORS.METAMASK,
         reconnected: this.rehydrated,
         provider: this.metamaskProvider,
         identityTokenInfo,
       } as CONNECTED_EVENT_DATA);
+
+      if (getIdentityToken) {
+        this.status = CONNECTOR_STATUS.AUTHORIZING;
+        this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: WALLET_CONNECTORS.METAMASK });
+        identityTokenInfo = await this.getIdentityToken();
+        this.status = CONNECTOR_STATUS.AUTHORIZED;
+        this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: WALLET_CONNECTORS.METAMASK });
+      }
+
       return this.metamaskProvider;
     } catch (error) {
       // ready again to be connected