feat: integrate new ui package, add placeholder for the OTPCodeModal … (#1336)

* feat: integrate new ui package, add placeholder for the OTPCodeModal and deprecate non uses ones

* fix: add clarification comments

* fix: logger typo

* fix: correct logger calls

Author: elribonazo

packages/sdk-multichain/package.json

@@ -51,7 +51,7 @@
     "@metamask/multichain-api-client": "^0.6.4",
     "@metamask/onboarding": "^1.0.1",
     "@metamask/sdk-analytics": "workspace:^",
-    "@metamask/sdk-install-modal-web": "workspace:^",
+    "@metamask/sdk-multichain-ui": "workspace:^",
     "@metamask/utils": "^11.4.0",
     "@paulmillr/qr": "^0.2.1",
     "bowser": "^2.11.0",

packages/sdk-multichain/src/domain/ui/factory.ts

@@ -3,7 +3,7 @@ import type { CaipAccountId } from '@metamask/utils';
 import type { MultichainOptions, Scope, SessionData } from '../multichain';
 import type { Modal } from './types';
 
-export type ModalTypes = 'installModal' | 'selectModal' | 'pendingModal';
+export type ModalTypes = 'installModal' | 'otpCodeModal';
 /**
  * Record type that maps modal names to their corresponding Modal instances.
  * Used to store different types of modals that can be created by the factory.
@@ -43,8 +43,7 @@ export type ModalFactoryOptions = Pick<MultichainOptions, 'mobile' | 'transport'
  */
 export abstract class ModalFactory<T extends FactoryModals = FactoryModals> {
 	abstract renderInstallModal(link: string, preferDesktop: boolean): Promise<void>;
-	abstract renderSelectModal(link: string, preferDesktop: boolean, connect: () => Promise<void>): Promise<void>;
-	abstract renderPendingModal(): Promise<void>;
+	abstract renderOTPCodeModal(): Promise<void>;
 	/**
 	 * Creates a new modal factory instance.
 	 * @param options - The modals configuration object
@@ -54,7 +53,7 @@ export abstract class ModalFactory<T extends FactoryModals = FactoryModals> {
 	}
 
 	private validateModals() {
-		const requiredModals = ['installModal', 'selectModal', 'pendingModal'];
+		const requiredModals = ['installModal', 'otpCodeModal'];
 		const missingModals = requiredModals.filter((modal) => !this.options[modal as ModalTypes]);
 		if (missingModals.length > 0) {
 			throw new Error(`Missing required modals: ${missingModals.join(', ')}`);

packages/sdk-multichain/src/domain/ui/types.ts

@@ -1,4 +1,4 @@
-import type { Components } from '@metamask/sdk-install-modal-web';
+import type { Components } from '@metamask/sdk-multichain-ui';
 
 export interface InstallWidgetProps extends Components.MmInstallModal {
 	parentElement?: Element;
@@ -8,19 +8,14 @@ export interface InstallWidgetProps extends Components.MmInstallModal {
 	};
 }
 
-export interface PendingWidgetProps extends Components.MmPendingModal {
+//TODO: Extend from the right component once modal is implemented
+export interface OTPCodeWidgetProps extends Components.MmInstallModal {
 	parentElement?: Element;
 	onClose: () => void;
 	onDisconnect?: () => void;
 	updateOTPValue: (otpValue: string) => void;
 }
 
-export interface SelectWidgetProps extends Components.MmSelectModal {
-	parentElement?: Element;
-	onClose: (shouldTerminate?: boolean) => void;
-	connect: () => void;
-}
-
 export type RenderedModal = {
 	mount(qrcodeLink?: string): void;
 	unmount(shouldTerminate?: boolean): void;
@@ -33,21 +28,16 @@ export type RenderedModal = {
 
 // biome-ignore lint/suspicious/noExplicitAny: Expected here
 export abstract class Modal<T extends Record<string, any>> {
-	abstract instance?: HTMLMmInstallModalElement | HTMLMmSelectModalElement | HTMLMmPendingModalElement;
+	abstract instance?: HTMLMmInstallModalElement | undefined;
 	abstract render(options: T): Promise<RenderedModal>;
 
 	updateQRCode(link: string) {
 		const installModal = this.instance?.querySelector('mm-install-modal') as HTMLMmInstallModalElement | null;
 		if (installModal) {
 			installModal.link = link;
-		} else {
-			const selectModal = this.instance?.querySelector('mm-select-modal') as HTMLMmSelectModalElement | null;
-			if (selectModal) {
-				selectModal.link = link;
-			}
 		}
 	}
 }
 
-export abstract class AbstractInstallModal extends Modal<InstallWidgetProps | SelectWidgetProps> {}
-export abstract class AbstractPendingModal extends Modal<PendingWidgetProps> {}
+export abstract class AbstractInstallModal extends Modal<InstallWidgetProps> {}
+export abstract class AbstractOTPCodeModal extends Modal<OTPCodeWidgetProps> {}