diff --git a/packages/devnext/next.config.js b/packages/devnext/next.config.js index db2ad1ffe..84b2f4bbe 100644 --- a/packages/devnext/next.config.js +++ b/packages/devnext/next.config.js @@ -24,6 +24,7 @@ const nextConfig = withExpo({ '@expo/vector-icons', '@metamask/sdk-communication-layer', '@metamask/sdk', + '@metamask/sdk-install-modal-web', '@metamask/sdk-react', '@metamask/sdk-react-ui', '@metamask/sdk-ui', diff --git a/packages/devnext/package.json b/packages/devnext/package.json index d9cf940ed..c59769b5f 100644 --- a/packages/devnext/package.json +++ b/packages/devnext/package.json @@ -24,6 +24,7 @@ "@metamask/providers": "16.1.0", "@metamask/sdk": "workspace:^", "@metamask/sdk-communication-layer": "workspace:^", + "@metamask/sdk-install-modal-web": "workspace:^", "@metamask/sdk-lab": "workspace:^", "@metamask/sdk-react": "workspace:^", "@metamask/sdk-react-ui": "workspace:^", diff --git a/packages/devnext/tsconfig.json b/packages/devnext/tsconfig.json index fb57b2d9b..0bdeaf21b 100644 --- a/packages/devnext/tsconfig.json +++ b/packages/devnext/tsconfig.json @@ -23,6 +23,9 @@ "@metamask/sdk-communication-layer": [ "../sdk-communication-layer/src" ], + "@metamask/sdk-install-modal-web": [ + "../sdk-install-modal-web/src" + ], "@metamask/sdk-react": [ "../sdk-react/src" ], diff --git a/packages/devreact/tsconfig.json b/packages/devreact/tsconfig.json index 586f90306..ec2d5577e 100644 --- a/packages/devreact/tsconfig.json +++ b/packages/devreact/tsconfig.json @@ -23,6 +23,7 @@ "typeRoots": ["./types", "./node_modules/@types"], "paths": { "@metamask/sdk-communication-layer": ["../sdk-communication-layer/src"], + "@metamask/sdk-install-modal-web": ["../sdk-install-modal-web/src"], "@metamask/sdk-react": ["../sdk-react/src"], "@metamask/sdk-react-ui": ["../sdk-react-ui/src"], "@metamask/sdk": ["../sdk/src"], diff --git a/packages/sdk-install-modal-web/.eslintrc.js b/packages/sdk-install-modal-web/.eslintrc.js index 2c588227f..8c7f0495e 100644 --- a/packages/sdk-install-modal-web/.eslintrc.js +++ b/packages/sdk-install-modal-web/.eslintrc.js @@ -15,9 +15,6 @@ module.exports = { '**/coverage/**', 'postcss.config.js', 'jest-preload.js', - 'loader', - '.stencil', - 'stencil.config.ts', ], parserOptions: { diff --git a/packages/sdk-install-modal-web/.gitignore b/packages/sdk-install-modal-web/.gitignore index c79078fdb..618729973 100644 --- a/packages/sdk-install-modal-web/.gitignore +++ b/packages/sdk-install-modal-web/.gitignore @@ -54,32 +54,3 @@ node_modules/ # lock files yarn.lock package-lock.json - -# == Stencil == -dist/ -www/ -loader/ - -*~ -*.sw[mnpcod] -*.log -*.lock -*.tmp -*.tmp.* -log.txt -*.sublime-project -*.sublime-workspace - -.stencil/ -.idea/ -.vscode/ -.sass-cache/ -.versions/ -node_modules/ -$RECYCLE.BIN/ - -.DS_Store -Thumbs.db -UserInterfaceState.xcuserstate -.env -# ==== \ No newline at end of file diff --git a/packages/sdk-install-modal-web/package.json b/packages/sdk-install-modal-web/package.json index 1633967ff..d136b757c 100644 --- a/packages/sdk-install-modal-web/package.json +++ b/packages/sdk-install-modal-web/package.json @@ -13,52 +13,26 @@ }, "author": "MetaMask", "packageManager": "yarn@3.5.0", - "main": "dist/index.cjs.js", - "module": "dist/index.js", - "unpkg": "dist/sdk-install-modal-web/index.esm.js", - "types": "dist/types/index.d.ts", - "collection": "dist/collection/collection-manifest.json", - "collection:main": "dist/collection/index.js", + "main": "dist/cjs/index.js", + "module": "dist/es/index.js", + "unpkg": "dist/umd/index.js", + "browser": "dist/es/index.js", + "types": "dist/types/src/index.d.ts", "files": [ - "./dist", - "./loader" + "/dist" ], - "exports": { - ".": { - "import": "./dist/sdk-install-modal-web/index.esm.js", - "require": "./dist/cjs/sdk-install-modal-web.cjs.js" - }, - "./mm-install-modal": { - "import": "./dist/components/mm-install-modal.js", - "types": "./dist/components/mm-install-modal.d.ts" - }, - "./mm-pending-modal": { - "import": "./dist/components/mm-pending-modal.js", - "types": "./dist/components/mm-pending-modal.d.ts" - }, - "./mm-select-modal": { - "import": "./dist/components/mm-select-modal.js", - "types": "./dist/components/mm-select-modal.d.ts" - }, - "./loader": { - "import": "./loader/index.js", - "require": "./loader/index.cjs", - "types": "./loader/index.d.ts" - } - }, "scripts": { - "allow-scripts": "", - "generate": "stencil generate", "build:types": "tsc --project tsconfig.json --emitDeclarationOnly --outDir dist/types", "build:clean": "yarn clean && yarn build", - "build": "stencil build --prod", - "build:dev": "stencil build --debug --dev", + "build": "yarn build:types && rollup -c --bundleConfigAsCjs", + "build:dev": "yarn build:types && NODE_ENV=dev rollup -c --bundleConfigAsCjs", "build:tsc": "tsc --build tsconfig.json --verbose", - "build:watch": "stencil build --watchAll", + "build:watch": "webpack-cli --watch", "build:post-tsc": "echo 'N/A'", "build:pre-tsc": "echo 'N/A'", - "build:release": "yarn version && stencil build", - "clean": "rimraf ./dist && rimraf ./loader", + "size": "size-limit", + "build:release": "yarn version && webpack-cli --mode production", + "clean": "rimraf ./dist", "lint": "yarn lint:eslint && yarn lint:misc --check", "lint:changelog": "../../scripts/validate-changelog.sh @metamask/sdk-install-modal-web", "lint:eslint": "eslint . --cache --ext js,ts", @@ -67,9 +41,8 @@ "prepack": "../../scripts/prepack.sh", "publish:preview": "yarn npm publish --tag preview", "reset": "yarn clean && rimraf ./node_modules/", - "start": "stencil build --dev --watch --serve", - "test": "stencil test --spec --e2e", - "test:watch": "stencil test --spec --e2e --watchAll", + "start": "webpack-dev-server", + "test": "echo \"Running tests for version $npm_package_version...\"", "test:ci": "jest --coverage --passWithNoTests --setupFilesAfterEnv ./jest-preload.js", "preversion": "yarn test", "postversion": "git push --tags && yarn publish . --tag $npm_package_version && git push && echo \"Successfully released version $npm_package_version!\"" @@ -77,12 +50,14 @@ "devDependencies": { "@lavamoat/allow-scripts": "^2.3.1", "@metamask/auto-changelog": "3.1.0", + "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-node-resolve": "^15.0.2", + "@rollup/plugin-terser": "^0.4.1", + "@rollup/plugin-typescript": "^11.1.1", "@size-limit/preset-big-lib": "^11.0.2", - "@stencil/core": "^4.22.2", - "@types/i18n": "^0.13.12", - "@types/jest": "^29.5.14", - "@types/node": "^22.9.0", "@types/prettier": "^2", + "@types/react": "^18.2.37", + "@types/react-dom": "^18.2.15", "@typescript-eslint/eslint-plugin": "^5.56.0", "@typescript-eslint/parser": "^5.56.0", "eslint": "^8.36.0", @@ -95,14 +70,36 @@ "eslint-plugin-react": "^7.32.2", "i18next": "23.11.5", "jest": "^29.6.4", + "postcss": "^8.4.35", "prettier": "^2.8.8", - "puppeteer": "^23.8.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "rimraf": "^5.0.0", + "rollup": "^4.26.0", + "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-sizes": "^1.0.6", + "rollup-plugin-typescript2": "^0.36.0", + "rollup-plugin-visualizer": "^5.12.0", "size-limit": "^11.0.2", "typescript": "^5.6.3" }, "peerDependencies": { - "i18next": "23.11.5" + "i18next": "23.11.5", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-native": "*" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } }, "publishConfig": { "access": "public", diff --git a/packages/sdk-install-modal-web/postcss.config.js b/packages/sdk-install-modal-web/postcss.config.js new file mode 100644 index 000000000..9361eff3d --- /dev/null +++ b/packages/sdk-install-modal-web/postcss.config.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: {}, +}; diff --git a/packages/sdk-install-modal-web/src/InstallModal.tsx b/packages/sdk-install-modal-web/src/InstallModal.tsx new file mode 100644 index 000000000..1636d15ed --- /dev/null +++ b/packages/sdk-install-modal-web/src/InstallModal.tsx @@ -0,0 +1,140 @@ +import { i18n } from 'i18next'; +import React, { CSSProperties, useEffect, useRef, useState } from 'react'; +import { WidgetWrapper } from './WidgetWrapper'; +import AdvantagesListItem from './components/AdvantagesListItem'; +import CloseButton from './components/CloseButton'; +import HeartIcon from './components/HeartIcon'; +import InstallIcon from './components/InstallIcon'; +import WalletIcon from './components/LockIcon'; +import Logo from './components/Logo'; +import LockIcon from './components/WalletIcon'; +import styles from './styles'; +import SDKVersion from './components/SDKVersion'; +import encodeQR from '@paulmillr/qr'; + +export interface InstallModalProps { + onClose: () => void; + link: string; + sdkVersion?: string; + preferDesktop: boolean; + metaMaskInstaller: { + startDesktopOnboarding: () => void; + }; + i18nInstance: i18n; +} + +export const InstallModal = (props: InstallModalProps) => { + const [tab, setTab] = useState(props.preferDesktop ? 1 : 2); + const qrCodeContainer = useRef(null); + const { sdkVersion } = props; + + const t = props.i18nInstance.t; + + useEffect(() => { + if (qrCodeContainer.current) { + const svgElement = encodeQR(props.link, "svg", { + ecc: "medium", + scale: 2 + }) + qrCodeContainer.current.innerHTML = svgElement + } + }, [qrCodeContainer]); + + return ( + +
+
+
+
+ + + +
+
+
+ +
+
+
+
+
setTab(1)} + style={ + { + ...styles.tab, + ...(tab === 1 ? styles.tabactive : {}), + ...styles.flexItem, + } as CSSProperties + } + > + {t('DESKTOP')} +
+
setTab(2)} + style={ + { + ...styles.tab, + ...(tab === 2 ? styles.tabactive : {}), + ...styles.flexItem, + } as CSSProperties + } + > + {t('MOBILE')} +
+
+
+
+
+
+
+
+ {t('SCAN_TO_CONNECT')}
+ + {t('META_MASK_MOBILE_APP')} + +
+
+
+
+
+
+ +
+
+ +
+
+ +
+ + +
+
+ +
+ + ); +}; diff --git a/packages/sdk-install-modal-web/src/ModalLoader.tsx b/packages/sdk-install-modal-web/src/ModalLoader.tsx new file mode 100644 index 000000000..b46b5ce04 --- /dev/null +++ b/packages/sdk-install-modal-web/src/ModalLoader.tsx @@ -0,0 +1,151 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; + +import { InstallModal, InstallModalProps } from './InstallModal'; +import { PendingModal, PendingModalProps } from './PendingModal'; +import { SelectModal, SelectModalProps } from './SelectModal'; +import encodeQR from '@paulmillr/qr'; + +export interface InstallWidgetProps extends InstallModalProps { + parentElement: Element; +} + +export interface PendingWidgetProps extends PendingModalProps { + parentElement: Element; +} + +export interface SelectWidgetProps extends SelectModalProps { + parentElement: Element; +} + +export class ModalLoader { + private installContainer?: Element; + private pendingContainer?: Element; + private selectContainer?: Element; + private debug = false; + private sdkVersion?: string; + + constructor({debug, sdkVersion}: {debug?: boolean, sdkVersion?: string}) { + this.debug = debug ?? false; + this.sdkVersion = sdkVersion; + } + + renderInstallModal(props: InstallWidgetProps) { + if (this.debug) { + console.debug(`ModalLoader: renderInstallModal`, props); + } + + this.installContainer = props.parentElement; + + const reactRoot = createRoot(props.parentElement); + reactRoot.render( + , + ); + } + + renderSelectModal(props: SelectWidgetProps) { + if (this.debug) { + console.debug(`ModalLoader: renderSelectModal`, props); + } + this.selectContainer = props.parentElement; + + const reactRoot = createRoot(props.parentElement); + reactRoot.render( + , + ); + + setTimeout(() => { + this.updateQRCode(props.link); + }, 100); + } + + renderPendingModal(props: PendingWidgetProps) { + if (this.debug) { + console.debug(`ModalLoader: renderPendingModal`, props); + } + + this.pendingContainer = props.parentElement; + + const reactRoot = createRoot(props.parentElement); + reactRoot.render( + , + ); + } + + updateOTPValue = (otpValue: string) => { + if (this.debug) { + console.debug(`ModalLoader: updateOTPValue`, otpValue); + } + + const tryUpdate = () => { + const otpNode = + document.getElementById('sdk-mm-otp-value'); + + if(this.debug) { + console.debug(`ModalLoader: updateOTPValue: otpNode`, otpNode); + } + + if (otpNode) { + otpNode.textContent = otpValue; + otpNode.style.display = 'block'; + return true; + } else { + return false; + } + } + // Sometime the modal is not properly initialized and the node is not found, we try again after 1s to solve the issue. + setTimeout(() => { + if(this.debug) { + console.debug(`ModalLoader: updateOTPValue: delayed otp update`) + } + tryUpdate(); + }, 800); + }; + + updateQRCode = (link: string) => { + if (this.debug) { + console.debug(`ModalLoader: updateQRCode`, link); + } + // TODO use scoped elem + const qrCodeNode = + document.getElementById('sdk-qrcode-container'); + if (qrCodeNode) { + qrCodeNode.innerHTML = ''; + + const svgElement = encodeQR(link, "svg", { + ecc: "medium", + scale: 2, + }) + qrCodeNode.innerHTML = svgElement + } + }; + + unmount() { + this.pendingContainer?.parentNode?.removeChild(this.pendingContainer); + this.pendingContainer = undefined; + this.installContainer?.parentNode?.removeChild(this.installContainer); + this.installContainer = undefined; + this.selectContainer?.parentNode?.removeChild(this.selectContainer); + this.selectContainer = undefined; + } +} diff --git a/packages/sdk-install-modal-web/src/PendingModal.tsx b/packages/sdk-install-modal-web/src/PendingModal.tsx new file mode 100644 index 000000000..79e75b09f --- /dev/null +++ b/packages/sdk-install-modal-web/src/PendingModal.tsx @@ -0,0 +1,90 @@ +import { i18n } from 'i18next'; +import React from 'react'; +import { WidgetWrapper } from './WidgetWrapper'; +import CloseButton from './components/CloseButton'; +import Logo from './components/Logo'; +import styles from './styles'; +import SDKVersion from './components/SDKVersion'; + +export interface PendingModalProps { + onClose: () => void; + onDisconnect?: () => void; + sdkVersion?: string; + updateOTPValue: (otpValue: string) => void; + displayOTP?: boolean; + i18nInstance: i18n; +} + +export const PendingModal = (props: PendingModalProps) => { + const displayOTP = props.displayOTP ?? true; + const { sdkVersion } = props; + + const t = props.i18nInstance.t; + return ( + +
+
+
+
+ + + +
+
+
+ +
+
+
+
+ {displayOTP + ? t('PENDING_MODAL.OPEN_META_MASK_SELECT_CODE') + : t('PENDING_MODAL.OPEN_META_MASK_CONTINUE')} +
+
+ {displayOTP && ( +
+ * {t('PENDING_MODAL.NUMBER_AFTER_OPEN_NOTICE')} +
+ )} +
+
+ +
+
+ +
+ + ); +}; diff --git a/packages/sdk-install-modal-web/src/SelectModal.tsx b/packages/sdk-install-modal-web/src/SelectModal.tsx new file mode 100644 index 000000000..aa9531ebe --- /dev/null +++ b/packages/sdk-install-modal-web/src/SelectModal.tsx @@ -0,0 +1,116 @@ +import { i18n } from 'i18next'; +import React, { CSSProperties, useState } from 'react'; +import { WidgetWrapper } from './WidgetWrapper'; +import CloseButton from './components/CloseButton'; +import ConnectIcon from './components/ConnectIcon'; +import Logo from './components/Logo'; +import { MetamaskExtensionImage } from './components/MetamaskExtensionImage'; +import styles from './styles'; +import SDKVersion from './components/SDKVersion'; + +export interface SelectModalProps { + onClose: (shouldTerminate?: boolean) => void; + link: string; + sdkVersion?: string; + connectWithExtension: () => void; + i18nInstance: i18n; +} + +export const SelectModal = (props: SelectModalProps) => { + const [tab, setTab] = useState(2); + + const { sdkVersion } = props; + + const t = props.i18nInstance.t; + + return ( + +
props.onClose(true)}>
+
+
+
+ props.onClose(true)}> + + +
+
+
+ +
+
+
+
+
setTab(1)} + style={ + { + ...styles.tab, + ...(tab === 1 ? styles.tabactive : {}), + ...styles.flexItem, + } as CSSProperties + } + > + {t('DESKTOP')} +
+
setTab(2)} + style={ + { + ...styles.tab, + ...(tab === 2 ? styles.tabactive : {}), + ...styles.flexItem, + } as CSSProperties + } + > + {t('MOBILE')} +
+
+
+
+
+
+
+
+ {t('SCAN_TO_CONNECT')} +
+ + {t('META_MASK_MOBILE_APP')} + +
+
+
+
+
+
+ +
+
+ {t('SELECT_MODAL.CRYPTO_TAKE_CONTROL_TEXT')} +
+ + +
+
+ +
+ + ); +}; diff --git a/packages/sdk-install-modal-web/src/components/widget-wrapper/widget-wrapper.tsx b/packages/sdk-install-modal-web/src/WidgetWrapper.tsx similarity index 60% rename from packages/sdk-install-modal-web/src/components/widget-wrapper/widget-wrapper.tsx rename to packages/sdk-install-modal-web/src/WidgetWrapper.tsx index 409a25005..1527ba33f 100644 --- a/packages/sdk-install-modal-web/src/components/widget-wrapper/widget-wrapper.tsx +++ b/packages/sdk-install-modal-web/src/WidgetWrapper.tsx @@ -1,4 +1,4 @@ -import { h, ChildNode } from '@stencil/core'; +import React from 'react'; import './resetStyles.css'; const widgetWrapperStyle = { @@ -6,13 +6,15 @@ const widgetWrapperStyle = { }; export const WidgetWrapper = ({ + children, className, }: { + children: React.ReactNode; className: string; -}, children: ChildNode) => { +}) => { return ( -
+
{children}
); -}; \ No newline at end of file +}; diff --git a/packages/sdk-install-modal-web/src/components.d.ts b/packages/sdk-install-modal-web/src/components.d.ts deleted file mode 100644 index 29d80bd84..000000000 --- a/packages/sdk-install-modal-web/src/components.d.ts +++ /dev/null @@ -1,161 +0,0 @@ -/* eslint-disable */ -/* tslint:disable */ -/** - * This is an autogenerated file created by the Stencil compiler. - * It contains typing information for all components that exist in this project. - */ -import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { i18n } from "i18next"; -export { i18n } from "i18next"; -export namespace Components { - interface MmInstallModal { - "i18nInstance": i18n; - /** - * The QR code link - */ - "link": string; - "preferDesktop": boolean; - "sdkVersion"?: string; - } - interface MmPendingModal { - /** - * The QR code link - */ - "displayOTP"?: boolean; - "i18nInstance": i18n; - "otpCode"?: string; - "sdkVersion"?: string; - } - interface MmSelectModal { - "i18nInstance": i18n; - /** - * The QR code link - */ - "link": string; - "sdkVersion"?: string; - } -} -export interface MmInstallModalCustomEvent extends CustomEvent { - detail: T; - target: HTMLMmInstallModalElement; -} -export interface MmPendingModalCustomEvent extends CustomEvent { - detail: T; - target: HTMLMmPendingModalElement; -} -export interface MmSelectModalCustomEvent extends CustomEvent { - detail: T; - target: HTMLMmSelectModalElement; -} -declare global { - interface HTMLMmInstallModalElementEventMap { - "close": any; - "startDesktopOnboarding": any; - } - interface HTMLMmInstallModalElement extends Components.MmInstallModal, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMmInstallModalElement, ev: MmInstallModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLMmInstallModalElement, ev: MmInstallModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLMmInstallModalElement: { - prototype: HTMLMmInstallModalElement; - new (): HTMLMmInstallModalElement; - }; - interface HTMLMmPendingModalElementEventMap { - "close": any; - "disconnect": any; - "updateOTPValue": { otpValue: string }; - } - interface HTMLMmPendingModalElement extends Components.MmPendingModal, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMmPendingModalElement, ev: MmPendingModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLMmPendingModalElement, ev: MmPendingModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLMmPendingModalElement: { - prototype: HTMLMmPendingModalElement; - new (): HTMLMmPendingModalElement; - }; - interface HTMLMmSelectModalElementEventMap { - "close": { shouldTerminate?: boolean }; - "connectWithExtension": any; - } - interface HTMLMmSelectModalElement extends Components.MmSelectModal, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMmSelectModalElement, ev: MmSelectModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLMmSelectModalElement, ev: MmSelectModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLMmSelectModalElement: { - prototype: HTMLMmSelectModalElement; - new (): HTMLMmSelectModalElement; - }; - interface HTMLElementTagNameMap { - "mm-install-modal": HTMLMmInstallModalElement; - "mm-pending-modal": HTMLMmPendingModalElement; - "mm-select-modal": HTMLMmSelectModalElement; - } -} -declare namespace LocalJSX { - interface MmInstallModal { - "i18nInstance"?: i18n; - /** - * The QR code link - */ - "link"?: string; - "onClose"?: (event: MmInstallModalCustomEvent) => void; - "onStartDesktopOnboarding"?: (event: MmInstallModalCustomEvent) => void; - "preferDesktop"?: boolean; - "sdkVersion"?: string; - } - interface MmPendingModal { - /** - * The QR code link - */ - "displayOTP"?: boolean; - "i18nInstance"?: i18n; - "onClose"?: (event: MmPendingModalCustomEvent) => void; - "onDisconnect"?: (event: MmPendingModalCustomEvent) => void; - "onUpdateOTPValue"?: (event: MmPendingModalCustomEvent<{ otpValue: string }>) => void; - "otpCode"?: string; - "sdkVersion"?: string; - } - interface MmSelectModal { - "i18nInstance"?: i18n; - /** - * The QR code link - */ - "link"?: string; - "onClose"?: (event: MmSelectModalCustomEvent<{ shouldTerminate?: boolean }>) => void; - "onConnectWithExtension"?: (event: MmSelectModalCustomEvent) => void; - "sdkVersion"?: string; - } - interface IntrinsicElements { - "mm-install-modal": MmInstallModal; - "mm-pending-modal": MmPendingModal; - "mm-select-modal": MmSelectModal; - } -} -export { LocalJSX as JSX }; -declare module "@stencil/core" { - export namespace JSX { - interface IntrinsicElements { - "mm-install-modal": LocalJSX.MmInstallModal & JSXBase.HTMLAttributes; - "mm-pending-modal": LocalJSX.MmPendingModal & JSXBase.HTMLAttributes; - "mm-select-modal": LocalJSX.MmSelectModal & JSXBase.HTMLAttributes; - } - } -} diff --git a/packages/sdk-install-modal-web/src/components/misc/AdvantagesListItem.tsx b/packages/sdk-install-modal-web/src/components/AdvantagesListItem.tsx similarity index 53% rename from packages/sdk-install-modal-web/src/components/misc/AdvantagesListItem.tsx rename to packages/sdk-install-modal-web/src/components/AdvantagesListItem.tsx index cc6dc983d..e482d8666 100644 --- a/packages/sdk-install-modal-web/src/components/misc/AdvantagesListItem.tsx +++ b/packages/sdk-install-modal-web/src/components/AdvantagesListItem.tsx @@ -1,11 +1,12 @@ -import { h } from '@stencil/core'; +import React from 'react'; +import styles from '../styles'; const AdvantagesListItem = ({ Icon, text }: { Icon: any; text: string }) => ( -
-
+
+
-
+
{text}
diff --git a/packages/sdk-install-modal-web/src/components/misc/CloseButton.tsx b/packages/sdk-install-modal-web/src/components/CloseButton.tsx similarity index 89% rename from packages/sdk-install-modal-web/src/components/misc/CloseButton.tsx rename to packages/sdk-install-modal-web/src/components/CloseButton.tsx index b2c5dbe4f..ecd395eef 100644 --- a/packages/sdk-install-modal-web/src/components/misc/CloseButton.tsx +++ b/packages/sdk-install-modal-web/src/components/CloseButton.tsx @@ -1,5 +1,4 @@ -import { h } from "@stencil/core"; - +import React from 'react'; const CloseButton = () => ( ( > diff --git a/packages/sdk-install-modal-web/src/components/misc/ConnectIcon.tsx b/packages/sdk-install-modal-web/src/components/ConnectIcon.tsx similarity index 97% rename from packages/sdk-install-modal-web/src/components/misc/ConnectIcon.tsx rename to packages/sdk-install-modal-web/src/components/ConnectIcon.tsx index 414c3e412..0c98ac64a 100644 --- a/packages/sdk-install-modal-web/src/components/misc/ConnectIcon.tsx +++ b/packages/sdk-install-modal-web/src/components/ConnectIcon.tsx @@ -1,5 +1,4 @@ -import { h } from "@stencil/core"; - +import React from 'react'; const ConnectIcon = () => ( ( ( ( ); diff --git a/packages/sdk-install-modal-web/src/components/misc/LockIcon.tsx b/packages/sdk-install-modal-web/src/components/LockIcon.tsx similarity index 95% rename from packages/sdk-install-modal-web/src/components/misc/LockIcon.tsx rename to packages/sdk-install-modal-web/src/components/LockIcon.tsx index 9b55be499..7ce947e1c 100644 --- a/packages/sdk-install-modal-web/src/components/misc/LockIcon.tsx +++ b/packages/sdk-install-modal-web/src/components/LockIcon.tsx @@ -1,5 +1,4 @@ -import { h } from "@stencil/core"; - +import React from 'react'; const WalletIcon = () => ( ( ( d="M52.021 1L31.0526 16.4886L34.9517 7.36063L52.021 1Z" fill="#E17726" stroke="#E17726" - stroke-width="0.5" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="0.5" + strokeLinecap="round" + strokeLinejoin="round" /> ); diff --git a/packages/sdk-install-modal-web/src/components/misc/MetamaskExtensionImage.tsx b/packages/sdk-install-modal-web/src/components/MetamaskExtensionImage.tsx similarity index 85% rename from packages/sdk-install-modal-web/src/components/misc/MetamaskExtensionImage.tsx rename to packages/sdk-install-modal-web/src/components/MetamaskExtensionImage.tsx index 0c8a7e267..0849633d3 100644 --- a/packages/sdk-install-modal-web/src/components/misc/MetamaskExtensionImage.tsx +++ b/packages/sdk-install-modal-web/src/components/MetamaskExtensionImage.tsx @@ -1,4 +1,4 @@ -import { h } from "@stencil/core"; +import React from 'react'; export const MetamaskExtensionImage = () => ( ( d="M295.952 95.4242L241.395 135.226L251.54 111.77L295.952 95.4242Z" fill="#E17726" stroke="#E17726" - stroke-width="0.94513" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="0.94513" + strokeLinecap="round" + strokeLinejoin="round" /> ( y2="266.801" gradientUnits="userSpaceOnUse" > - - + + ( y2="401.574" gradientUnits="userSpaceOnUse" > - - - + + + ( y2="104.53" gradientUnits="userSpaceOnUse" > - - + + ( y2="72.8792" gradientUnits="userSpaceOnUse" > - - + + ( y2="183.406" gradientUnits="userSpaceOnUse" > - - + + ( y2="163.003" gradientUnits="userSpaceOnUse" > - - - + + + ( y2="241.328" gradientUnits="userSpaceOnUse" > - - + + ( y2="182.925" gradientUnits="userSpaceOnUse" > - - + + ( y2="245.537" gradientUnits="userSpaceOnUse" > - - + + ( y2="280.762" gradientUnits="userSpaceOnUse" > - - + + ( y2="100.028" gradientUnits="userSpaceOnUse" > - - + + ( y2="157.571" gradientUnits="userSpaceOnUse" > - - + + ( y2="243.911" gradientUnits="userSpaceOnUse" > - - + + ( y2="38.8076" gradientUnits="userSpaceOnUse" > - - + + ( y2="104.041" gradientUnits="userSpaceOnUse" > - - + + ( y2="302.269" gradientUnits="userSpaceOnUse" > - - + + ( y2="197.95" gradientUnits="userSpaceOnUse" > - - - + + + ( y2="232.788" gradientUnits="userSpaceOnUse" > - - - + + + ( y2="273.774" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/sdk-install-modal-web/src/components/misc/SDKVersion.tsx b/packages/sdk-install-modal-web/src/components/SDKVersion.tsx similarity index 60% rename from packages/sdk-install-modal-web/src/components/misc/SDKVersion.tsx rename to packages/sdk-install-modal-web/src/components/SDKVersion.tsx index d573c4f90..dfb32b0d4 100644 --- a/packages/sdk-install-modal-web/src/components/misc/SDKVersion.tsx +++ b/packages/sdk-install-modal-web/src/components/SDKVersion.tsx @@ -1,7 +1,7 @@ -import { h } from "@stencil/core"; +import React from 'react' export default function SDKVersion({version}: {version?: string}) { return ( -
SDK Version {version ? `v${version}`:`unknown`}
+
SDK Version {version ? `v${version}`:`unknown`}
) } diff --git a/packages/sdk-install-modal-web/src/components/misc/WalletIcon.tsx b/packages/sdk-install-modal-web/src/components/WalletIcon.tsx similarity index 96% rename from packages/sdk-install-modal-web/src/components/misc/WalletIcon.tsx rename to packages/sdk-install-modal-web/src/components/WalletIcon.tsx index a380a1f0c..fa15468c0 100644 --- a/packages/sdk-install-modal-web/src/components/misc/WalletIcon.tsx +++ b/packages/sdk-install-modal-web/src/components/WalletIcon.tsx @@ -1,5 +1,4 @@ -import { h } from "@stencil/core"; - +import React from 'react'; const LockIcon = () => ( -
-
-
-
- - - -
-
-
- -
-
-
-
-
this.setTab(1)} - class={`tab flexItem ${this.tab === 1 ? 'tabactive': ''}`} - > - {t('DESKTOP')} -
-
this.setTab(2)} - class={`tab flexItem ${this.tab === 2 ? 'tabactive': ''}`} - > - {t('MOBILE')} -
-
-
-
-
-
-
-
-
- {t('SCAN_TO_CONNECT')}
- - {t('META_MASK_MOBILE_APP')} - -
-
-
-
-
-
- -
-
- -
-
- -
- - -
-
- -
- - ) - } -} diff --git a/packages/sdk-install-modal-web/src/components/mm-pending-modal/mm-pending-modal.tsx b/packages/sdk-install-modal-web/src/components/mm-pending-modal/mm-pending-modal.tsx deleted file mode 100644 index dca8a6b1b..000000000 --- a/packages/sdk-install-modal-web/src/components/mm-pending-modal/mm-pending-modal.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { Component, Prop, h, Event, EventEmitter } from '@stencil/core'; -import { WidgetWrapper } from '../widget-wrapper/widget-wrapper'; -import SDKVersion from '../misc/SDKVersion'; -import CloseButton from '../misc/CloseButton'; -import Logo from '../misc/Logo'; -import { i18n } from 'i18next'; - -@Component({ - tag: 'mm-pending-modal', - styleUrl: '../style.css', - shadow: true, -}) -export class PendingModal { - /** - * The QR code link - */ - @Prop() displayOTP?: boolean; - - @Prop() sdkVersion?: string; - - @Prop() i18nInstance: i18n; - - @Prop() otpCode?: string; - - @Event() close: EventEmitter; - - @Event() disconnect: EventEmitter; - - @Event() updateOTPValue: EventEmitter<{ otpValue: string }>; - - onClose() { - this.close.emit(); - } - - onDisconnect() { - this.disconnect.emit(); - } - - onUpdateOTPValueHandler(otpValue: string) { - this.updateOTPValue.emit({ - otpValue, - }) - } - - disconnectedCallback() { - this.onClose(); - } - - render() { - const displayOTP = this.displayOTP ?? true; - const sdkVersion = this.sdkVersion - const t = this.i18nInstance.t; - - return ( - -
-
-
-
- - - -
-
-
- -
-
-
-
- {displayOTP - ? t('PENDING_MODAL.OPEN_META_MASK_SELECT_CODE') - : t('PENDING_MODAL.OPEN_META_MASK_CONTINUE')} -
-
{this.otpCode}
- {displayOTP && ( -
- * {t('PENDING_MODAL.NUMBER_AFTER_OPEN_NOTICE')} -
- )} -
-
- -
-
- -
- - ) - } -} diff --git a/packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx b/packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx deleted file mode 100644 index 4bd66d4cb..000000000 --- a/packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { Component, Prop, h, Event, EventEmitter, State, Watch, Element } from '@stencil/core'; -import { WidgetWrapper } from '../widget-wrapper/widget-wrapper'; -import SDKVersion from '../misc/SDKVersion'; -import CloseButton from '../misc/CloseButton'; -import Logo from '../misc/Logo'; -import { i18n } from 'i18next'; -import ConnectIcon from '../misc/ConnectIcon'; -import { MetamaskExtensionImage } from '../misc/MetamaskExtensionImage'; -import encodeQR from '@paulmillr/qr'; - -@Component({ - tag: 'mm-select-modal', - styleUrl: '../style.css', - shadow: true, -}) -export class PendingModal { - /** - * The QR code link - */ - @Prop() link: string; - - @Prop() sdkVersion?: string; - - @Prop() i18nInstance: i18n; - - @Event() close: EventEmitter<{ shouldTerminate?: boolean }>; - - @Event() connectWithExtension: EventEmitter; - - @State() tab: number = 1; - - @Element() el: HTMLElement; - - onClose(shouldTerminate = false) { - this.close.emit({ shouldTerminate }); - } - - connectWithExtensionHandler() { - this.connectWithExtension.emit(); - } - - setTab(tab: number) { - this.tab = tab; - } - - @Watch('link') - updateLink(newLink: string) { - const svgElement = encodeQR(newLink, "svg", { - ecc: "medium", - scale: 2 - }) - - if (!this.el.shadowRoot) { - return; - } - - const qrcodeDiv = this.el.shadowRoot.querySelector("#sdk-mm-qrcode"); - - if (!qrcodeDiv) { - return; - } - - qrcodeDiv.innerHTML = svgElement - } - - disconnectedCallback() { - this.onClose(); - } - - render() { - const sdkVersion = this.sdkVersion - const t = this.i18nInstance.t; - - return ( - -
this.onClose(true)}>
-
-
-
- this.onClose(true)}> - - -
-
-
- -
-
-
-
-
this.setTab(1)} - class={`tab flexItem ${this.tab === 1 ? 'tabactive' : ''}`} - > - {t('DESKTOP')} -
-
this.setTab(2)} - class={`tab flexItem ${this.tab === 2 ? 'tabactive' : ''}`} - > - {t('MOBILE')} -
-
-
-
-
-
-
-
- {t('SCAN_TO_CONNECT')} -
- - {t('META_MASK_MOBILE_APP')} - -
-
-
-
-
-
- -
-
- {t('SELECT_MODAL.CRYPTO_TAKE_CONTROL_TEXT')} -
- - -
-
- -
- - ) - } -} diff --git a/packages/sdk-install-modal-web/src/components/style.css b/packages/sdk-install-modal-web/src/components/style.css deleted file mode 100644 index 26b7575be..000000000 --- a/packages/sdk-install-modal-web/src/components/style.css +++ /dev/null @@ -1,169 +0,0 @@ -.flexContainer { - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; -} - -.flexItem { - flex: 1; - justify-content: center; - align-items: center; -} - -.flexItem11 { - flex: 11; - justify-content: center; - align-items: center; -} - -.flexItem1 { - flex: 1; - justify-content: center; - align-items: center; -} - -.tab { - padding: 8px; - cursor: pointer; - background-color: #F2F4F6; - font-size: 12px; - text-align: center; - color: #24292E; -} - -.tabcontainer { - padding: 4px; - background-color: #F2F4F6; - border-radius: 8px; - margin-bottom: 30px; - margin-top: 30px; -} - -.tabactive { - background-color: white; - -webkit-transition: background-color 300ms linear; - -ms-transition: background-color 300ms linear; - transition: background-color 300ms linear; - border-radius: 8px; -} - -.item { - font-size: 12px; - margin-bottom: 16px; - border-radius: 8px; - padding: 10px; - border: 2px #F2F4F6 solid; - color: #24292E; -} - -.extensionLabel { - font-style: normal; - font-weight: bold; - font-size: 14px; - text-align: cetner; - color: #24272A; -} - -.notice { - font-size: 12px; - margin-left: 10px; - margin-right: 10px; - color: grey; -} - -.button { - margin-top: 41.5px; - margin-bottom: 20px; - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 12px 20px; - background: #037DD6; - border-radius: 32px; - color: white; - border: 0; - font-size: 14px; - cursor: pointer; -} - -.backdrop { - visibility: visible; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - z-index: 99998; - background: rgba(0, 0, 0, 0.87); - opacity: 0.3; -} - -.modal { - visibility: visible; - position: fixed; - left: 50%; - transform: translate(-50%, -50%); - z-index: 99999; - background: white; - padding: 20px; - border-radius: 8px; - top: 50%; - max-width: 100%; - width: 460px; - min-width: 300px; - box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px; - -webkit-font-smoothing: antialiased; -} - -.closeButton { - color: #BBC0C5; - cursor: pointer; -} - -.logoContainer { - margin-left: 24px; - margin-right: 24px; - margin-top: 24px; - display: flex; - align-items: center; - justify-content: center; -} - -.connectMobileText { - font-size: 14px; - color: black; - margin-top: 28px; - margin-bottom: 28px; - line-height: 2; -} - -.blue { - color: #037DD6; - font-weight: 700; -} - -.installExtensionText { - margin-left: 10px; -} - -.center { - display: flex; - justify-content: center; - align-items: center; -} - -.right { - display: flex; - align-items: center; - justify-content: right; -} - -#sdk-mm-qrcode { - svg { - width: 50%; - } -} \ No newline at end of file diff --git a/packages/sdk-install-modal-web/src/index.ts b/packages/sdk-install-modal-web/src/index.ts index f8aa438c3..d08ef7aa4 100644 --- a/packages/sdk-install-modal-web/src/index.ts +++ b/packages/sdk-install-modal-web/src/index.ts @@ -1,12 +1 @@ -/** - * @fileoverview entry point for your component library - * - * This is the entry point for your component library. Use this file to export utilities, - * constants or data structure that accompany your components. - * - * DO NOT use this file to export your components. Instead, use the recommended approaches - * to consume components of this package as outlined in the `README.md`. - */ - -export type { Components, MmInstallModalCustomEvent, MmPendingModalCustomEvent, MmSelectModalCustomEvent, JSX } from './components' - +export { ModalLoader, type InstallWidgetProps, type PendingWidgetProps, type SelectWidgetProps } from './ModalLoader'; diff --git a/packages/sdk-install-modal-web/src/components/widget-wrapper/resetStyles.css b/packages/sdk-install-modal-web/src/resetStyles.css similarity index 100% rename from packages/sdk-install-modal-web/src/components/widget-wrapper/resetStyles.css rename to packages/sdk-install-modal-web/src/resetStyles.css diff --git a/packages/sdk-install-modal-web/src/styles.ts b/packages/sdk-install-modal-web/src/styles.ts new file mode 100644 index 000000000..02d512908 --- /dev/null +++ b/packages/sdk-install-modal-web/src/styles.ts @@ -0,0 +1,149 @@ +const styles = { + flexContainer: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'row' as 'row', + }, + flexItem: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + flexItem11: { + flex: 11, + justifyContent: 'center', + alignItems: 'center', + }, + flexItem1: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + tab: { + padding: 8, + cursor: 'pointer', + backgroundColor: '#F2F4F6', + fontSize: 12, + textAlign: 'center', + color: '#24292E', + }, + tabcontainer: { + padding: '4px', + backgroundColor: '#F2F4F6', + borderRadius: '8px', + marginBottom: 30, + marginTop: 30, + }, + tabactive: { + backgroundColor: 'white', + WebkitTransition: 'background-color 300ms linear', + msTransition: 'background-color 300ms linear', + transition: 'background-color 300ms linear', + borderRadius: '8px', + }, + item: { + fontSize: '12px', + marginBottom: 16, + borderRadius: '8px', + padding: '10px', + border: '2px #F2F4F6 solid', + color: '#24292E', + }, + extensionLabel: { + fontsStyle: 'normal', + fontWeight: 'bold', + fontSize: 14, + textAlign: 'center' as 'center', + color: '#24272A', + }, + notice: { + fontSize: 12, + marginLeft: 10, + marginRight: 10, + color: 'grey', + }, + button: { + marginTop: '41.5px', + marginBottom: '20px', + width: '100%', + display: 'flex', + flexDirection: 'row' as 'row', + justifyContent: 'center', + alignItems: 'center', + padding: '12px 20px', + background: '#037DD6', + borderRadius: '32px', + color: 'white', + border: '0', + fontSize: '14px', + cursor: 'pointer', + }, + backdrop: { + visibility: 'visible' as 'visible', + position: 'fixed' as 'fixed', + top: '0', + left: '0', + right: '0', + bottom: '0', + width: '100%', + zIndex: 99998, + background: 'rgba(0, 0, 0, 0.87)', + opacity: 0.3, + }, + modal: { + visibility: 'visible' as 'visible', + position: 'fixed' as 'fixed', + left: '50%', + transform: 'translate(-50%, -50%)', + zIndex: 99999, + background: '#fff', + padding: '20px', + borderRadius: '8px', + top: '50%', + maxWidth: '100%', + width: 460, + minWidth: 300, + boxShadow: + 'rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px', + WebkitFontSmoothing: 'antialiased', + }, + closeButton: { + color: '#BBC0C5', + cursor: 'pointer', + }, + closeButtonContainer: {}, + logoContainer: { + marginHorizontal: 24, + marginTop: 24, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + connectMobileText: { + fontSize: 14, + color: 'black', + marginTop: 28, + marginBottom: 28, + lineHeight: 2, + }, + blue: { + color: '#037DD6', + fontWeight: 700, + }, + installExtensionText: { + marginLeft: 10, + }, + center: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + right: { + display: 'flex', + alignItems: 'center', + justifyContent: 'right', + }, +}; + +export default styles; diff --git a/packages/sdk-install-modal-web/stencil.config.ts b/packages/sdk-install-modal-web/stencil.config.ts deleted file mode 100644 index c384e6770..000000000 --- a/packages/sdk-install-modal-web/stencil.config.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Config } from '@stencil/core'; - -export const config: Config = { - namespace: 'sdk-install-modal-web', - outputTargets: [ - { - type: 'dist', - esmLoaderPath: '../loader', - }, - { - type: 'dist-custom-elements', - customElementsExportBehavior: 'auto-define-custom-elements', - externalRuntime: false, - }, - ], - testing: { - browserHeadless: "new", - }, -}; \ No newline at end of file diff --git a/packages/sdk-install-modal-web/tsconfig.json b/packages/sdk-install-modal-web/tsconfig.json index c450a3960..2f363a5cd 100644 --- a/packages/sdk-install-modal-web/tsconfig.json +++ b/packages/sdk-install-modal-web/tsconfig.json @@ -4,10 +4,10 @@ "declaration": true, "declarationMap": true, "sourceMap": true, + "outDir": "./dist", "baseUrl": "./", "strict": true, - "strictPropertyInitialization": false, - "target": "es2017", + "target": "es5", "lib": ["es6", "dom", "es2016", "es2017"], "allowSyntheticDefaultImports": true, "esModuleInterop": true, @@ -16,12 +16,8 @@ "moduleResolution": "Node", "jsx": "react", "composite": true, - "skipLibCheck": true, - "jsxFactory": "h", - "module": "esnext", - "noUnusedLocals": true, - "noUnusedParameters": true + "skipLibCheck": true }, - "include": ["./src"], - "exclude": ["node_modules", "dist", "loader"] + "include": ["./src/**/*.ts", "./src/**/*.tsx"], + "exclude": ["node_modules", "dist"] } diff --git a/packages/sdk/package.json b/packages/sdk/package.json index 8ee7fb53c..c87f4450c 100644 --- a/packages/sdk/package.json +++ b/packages/sdk/package.json @@ -115,6 +115,8 @@ "jest-environment-jsdom": "^29.3.1", "prettier": "^2.3.0", "process": "^0.11.10", + "react": "^18.2.0", + "react-dom": "18.2.0", "rimraf": "^4.4.0", "rollup": "^4.26.0", "rollup-plugin-analyzer": "^4.0.0", @@ -136,6 +138,18 @@ "url": "^0.11.0", "webpack": "^5.0.0" }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + }, "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" diff --git a/packages/sdk/src/ui/InstallModal/InstallModal-web.test.ts b/packages/sdk/src/ui/InstallModal/InstallModal-web.test.ts index cf099e5c4..870ca4b29 100644 --- a/packages/sdk/src/ui/InstallModal/InstallModal-web.test.ts +++ b/packages/sdk/src/ui/InstallModal/InstallModal-web.test.ts @@ -1,9 +1,9 @@ +import { ModalLoader } from '@metamask/sdk-install-modal-web'; import { i18n } from 'i18next'; import * as loggerModule from '../../utils/logger'; import sdkWebInstallModal from './InstallModal-web'; -import ModalLoader from './Modal-web'; -jest.mock('./Modal-web'); +jest.mock('@metamask/sdk-install-modal-web'); jest.mock('i18next', () => ({ t: jest.fn((key) => key), })); diff --git a/packages/sdk/src/ui/InstallModal/InstallModal-web.ts b/packages/sdk/src/ui/InstallModal/InstallModal-web.ts index bd5009935..182ea1ffe 100644 --- a/packages/sdk/src/ui/InstallModal/InstallModal-web.ts +++ b/packages/sdk/src/ui/InstallModal/InstallModal-web.ts @@ -1,8 +1,9 @@ +import { ModalLoader } from '@metamask/sdk-install-modal-web'; + import { i18n } from 'i18next'; import { logger } from '../../utils/logger'; import { MetaMaskInstaller } from '../../Platform/MetaMaskInstaller'; import packageJson from '../../../package.json'; -import ModalLoader from './Modal-web'; const sdkWebInstallModal = ({ link, diff --git a/packages/sdk/src/ui/InstallModal/Modal-web.ts b/packages/sdk/src/ui/InstallModal/Modal-web.ts deleted file mode 100644 index f7a6c6be2..000000000 --- a/packages/sdk/src/ui/InstallModal/Modal-web.ts +++ /dev/null @@ -1,174 +0,0 @@ -import { defineCustomElements } from '@metamask/sdk-install-modal-web/loader'; -import { Components } from '@metamask/sdk-install-modal-web'; - -export const FOX_IMAGE = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA2CAYAAACbZ/oUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAb1SURBVHgB3Vrdcds4EN4FJVo/fnAqOKWCOBVEqcBKBbbeLvLNWFeBnQpiz+SUe4tTwckVWK4gTgVRB9ZD9BNaBG4XJGiIon4oUYrtb0YiCIIEFvuD3QUQLPxslI8cUG98wJvdVv8SnihUc29v5HknVKyAKz8Uz0dd8wxNYfhnoaKE+GG916WHHRDya/HTqAOPHJrI8WgflHOqlKqaekTsFP/pv43uTYG5K0B9CasvENSB4hkK0JVKXTg7qm3P1mPA8K9CVUmnpkAdEjF7XMdEEtE9Ktb0vStfmnEL86KDcGgal1r9Jkj5Vin4Gj6uCMSPyhM/hsfla54cnlH4TeC+h43S6eC49E1JcU01JyGxPVDqb+boL9etR+1/Yc2UNYdtcUbAetHS32GjcETzcmpxO/gIfZxmq70tkWci+96o5qBzaItsBMTvUnlHu637W1PFzOG2tlhrgm1xttkfvUgTIlGcYSgFCaD2eIWuf561yCeJ7DTwQktl4rssAQDE8Rcvznu9gMNmJgAui61BfVbng+NiExSewsyOA5XwSRVc8G591+nBqvDEoQRo4ry+eKKFrM+SsDuSih3P+6HHS6Je+jw8R1ucSWfflT8P2jAH3B4c50uiWG0VeFF082dIXJvXiqT3XLCOh2KN/felGonqfzxbxN2XsCT6jdIZvXMKW8YirsYRF2uRR+zyDenId0iBcmtwhlK+1APYGvCi4Lqv0xjJoK3qUrHHOizcVp+tGokF/gEpUfx3pKWCLPYH2CB4UlHIt2yYFolwHFoFASsk0tp663U4vNm/W3Ft3TC322m5aoNWl319VeqGr5pgsqpanN1fXhVWxAa43XMEvCu1Bu/ScjUG7XQIITv6GtT5mt3E6SqsiSy4zRaV/IHXO5/mrxhLQcArvoxyhQeRdiQFCRrqADIAc3tEYijJyEA6RK5hFg4M6y8qYJG+fRFKiTADDC1Z5S4jH5k72GUjQ8ZmKW6Ta8hcZecAMoIvnKr+NBFs6qLgQSnUSp337muQIdjYKKvDObjO2i3FyDkKaGNEBFM4qAfFCQDICCxS7LZCaDjmQqkmR0CQIcih0rQ45OaaugeCnYBg4kYVMsDPRn6fXNbrNC4o9X3GEzRs8tq5HrxGmXW3Qr+ea0VQEcGhFWPFrqzb4ahRPBGQ/waxkHIZ8ARR3H3t0YTBGvBAGyvjY0SICNahU/jQDpjTIAzMv5B1XtfwVMY0YeuIOAUMmgYV+hgP9RaMA0KEv4KU0Prqed9ILI8gI7CID47LH1dcObT+ksR07MrcZBt2QAR3xLNTX/RFkzjjAF3ODdDXABkzimlrP98XL1wcd2x9nAXW3zEoPRaxIyfao30TBsx3XM7B/eukj3O45fu47whxQP7p/kaInANOLTmUTR1ThsVx/U7SUjZ4T4kKysElhbwTHGY9HjSKXY4uxipXBbi/ZQPmk047JOaUgagpCXsCtahMztaWwBPM42AdJeMGg0ZJp5OlgKtSzu2w343EDB5fUsg7NWZKCFyGuatuWFWBpwQ2vCR5uhymdezHIt5eOPIyLFbgqRHLMMQSkPLo8cdTBDtyjcTb40IvSb+nCDYL9jPAHhvYeOU0h2fnnp8ceLmM100QrFO2vz39miXUFPMmPa0wfnxGmBLrCYKzEmfec9KBP/3SvKcdBcodI8h6VglBKUU11kcA28taA20acN1OupltnGVeXnYjLyW6JcvbijicSaaDkvojGE26mugvlcUM3MAHYsPRdRWsjYot1rmHb6v1CSZHn9y9JkU45O3ADQq/DWPeGlniVVo3ORgZjL2qkHBg3FjIAKFYd7isRTojcX60sPeH9dyvk4B/CmAbYrI4RtgyzVQ+RkhPHPE13FvKLlP5WEErQJAQ4D8J4gqeOUwyPthqYWv63EHZEb5EjgdlDthKbzVdsy3YVjpahykjcoWbjZR64S8JFdgglJSRyj4QjLKDIDZDMG2UFfP56qx9XvscxiaQo2ynKUc+0L1b2Jge0zrYnrepbZ3DyBzssiZutYQ7Dx3YACi/2V3cClMdqkmBjn0z4eWacxBZg1aB7qI2ZEM2kkuTZJvs+4m8NJ+DIF1Ks5+j96N4omjmDmeFcSjFSb9Rqs77EIZbI4nPSPJ0H4hv0mZkvB23Q2uQ3c8kFi5PSAs4bZ5zJFSgHUejm2EAwuc1M3ZTJ89R6ogq8P1rtCHwZl6sHD8rHQw/BnNUz6riA5ltH+RNmQzbohM1GZ7Q41M89UUHW/Q5LAFVBYLPp1TBYlY8oRDUJXxACadJi1dXkjnfXWLzKnkQtBm+4vqqjWfer69yBIKXOJPW4RNFU9+GDWIFbvMpng9ZHmyJY+P7YdqpUOIjrU1z3VbkM58rcjUN/geU/3c0eMPNdAAAAABJRU5ErkJggg==`; - -export interface InstallWidgetProps extends Components.MmInstallModal { - parentElement: Element; - onClose: () => void; - metaMaskInstaller: { - startDesktopOnboarding: () => void; - }; -} - -export interface PendingWidgetProps extends Components.MmPendingModal { - parentElement: Element; - onClose: () => void; - onDisconnect?: () => void; - updateOTPValue: (otpValue: string) => void; -} - -export interface SelectWidgetProps extends Components.MmSelectModal { - parentElement: Element; - onClose: (shouldTerminate?: boolean) => void; - connectWithExtension: () => void; -} - -export default class ModalLoader { - private installContainer?: Element; - - private pendingContainer?: Element; - - private selectContainer?: Element; - - private debug = false; - - private sdkVersion?: string; - - constructor({ debug, sdkVersion }: { debug?: boolean; sdkVersion?: string }) { - this.debug = debug ?? false; - this.sdkVersion = sdkVersion; - } - - renderInstallModal(props: InstallWidgetProps) { - if (this.debug) { - console.debug(`ModalLoader: renderInstallModal`, props); - } - - this.installContainer = props.parentElement; - - defineCustomElements(); - - const modal = document.createElement( - 'mm-install-modal', - ) as HTMLMmInstallModalElement; - modal.link = props.link; - modal.preferDesktop = props.preferDesktop; - modal.sdkVersion = props.sdkVersion ?? this.sdkVersion; - modal.i18nInstance = props.i18nInstance; - modal.addEventListener('close', props.onClose); - modal.addEventListener( - 'startDesktopOnboarding', - props.metaMaskInstaller.startDesktopOnboarding, - ); - - props.parentElement.appendChild(modal); - } - - renderSelectModal(props: SelectWidgetProps) { - if (this.debug) { - console.debug(`ModalLoader: renderSelectModal`, props); - } - this.selectContainer = props.parentElement; - - defineCustomElements(); - - const modal = document.createElement( - 'mm-select-modal', - ) as HTMLMmSelectModalElement; - modal.link = props.link; - modal.sdkVersion = props.sdkVersion ?? this.sdkVersion; - modal.i18nInstance = props.i18nInstance; - modal.addEventListener('close', ({ detail: { shouldTerminate } }) => - props.onClose(shouldTerminate), - ); - modal.addEventListener('connectWithExtension', props.connectWithExtension); - - props.parentElement.appendChild(modal); - - setTimeout(() => { - this.updateQRCode(props.link); - }, 100); - } - - renderPendingModal(props: PendingWidgetProps) { - if (this.debug) { - console.debug(`ModalLoader: renderPendingModal`, props); - } - - this.pendingContainer = props.parentElement; - - defineCustomElements(); - - const modal = document.createElement( - 'mm-pending-modal', - ) as HTMLMmPendingModalElement; - modal.sdkVersion = props.sdkVersion ?? this.sdkVersion; - modal.i18nInstance = props.i18nInstance; - modal.displayOTP = props.displayOTP; - modal.addEventListener('close', props.onClose); - modal.addEventListener('updateOTPValue', ({ detail: { otpValue } }) => - props.updateOTPValue(otpValue), - ); - - if (props.onDisconnect) { - modal.addEventListener('disconnect', props.onDisconnect); - } - - props.parentElement.appendChild(modal); - } - - updateOTPValue(otpValue: string) { - if (this.debug) { - console.debug(`ModalLoader: updateOTPValue`, otpValue); - } - - const tryUpdate = () => { - const modal = this.pendingContainer?.querySelector( - 'mm-pending-modal', - ) as HTMLMmPendingModalElement | null; - if (modal) { - modal.otpCode = otpValue; - return true; - } - return false; - }; - - // Sometime the modal is not properly initialized and the node is not found, we try again after 1s to solve the issue. - setTimeout(() => { - if (this.debug) { - console.debug(`ModalLoader: updateOTPValue: delayed otp update`); - } - tryUpdate(); - }, 800); - } - - updateQRCode(link: string) { - if (this.debug) { - console.debug(`ModalLoader: updateQRCode`, link); - } - - const modal = this.installContainer?.querySelector( - 'mm-install-modal', - ) as HTMLMmInstallModalElement | null; - if (modal) { - modal.link = link; - } else { - const selectModal = this.installContainer?.querySelector( - 'mm-select-modal', - ) as HTMLMmSelectModalElement | null; - if (selectModal) { - selectModal.link = link; - } - } - } - - unmount() { - this.pendingContainer?.parentNode?.removeChild(this.pendingContainer); - this.pendingContainer = undefined; - this.installContainer?.parentNode?.removeChild(this.installContainer); - this.installContainer = undefined; - this.selectContainer?.parentNode?.removeChild(this.selectContainer); - this.selectContainer = undefined; - } -} diff --git a/packages/sdk/src/ui/InstallModal/pendingModal-web.test.ts b/packages/sdk/src/ui/InstallModal/pendingModal-web.test.ts index 202d55e07..c55d8a270 100644 --- a/packages/sdk/src/ui/InstallModal/pendingModal-web.test.ts +++ b/packages/sdk/src/ui/InstallModal/pendingModal-web.test.ts @@ -1,8 +1,8 @@ import { i18n } from 'i18next'; +import { ModalLoader } from '@metamask/sdk-install-modal-web'; import sdkWebPendingModal from './pendingModal-web'; -import ModalLoader from './Modal-web'; -jest.mock('./Modal-web'); +jest.mock('@metamask/sdk-install-modal-web'); describe('sdkWebPendingModal', () => { const mockModalLoader = ModalLoader as jest.MockedClass; diff --git a/packages/sdk/src/ui/InstallModal/pendingModal-web.ts b/packages/sdk/src/ui/InstallModal/pendingModal-web.ts index 0c5a7ecb4..130be9e85 100644 --- a/packages/sdk/src/ui/InstallModal/pendingModal-web.ts +++ b/packages/sdk/src/ui/InstallModal/pendingModal-web.ts @@ -1,7 +1,7 @@ +import { ModalLoader } from '@metamask/sdk-install-modal-web'; import { i18n } from 'i18next'; import packageJson from '../../../package.json'; import { logger } from '../../utils/logger'; -import ModalLoader from './Modal-web'; const sdkWebPendingModal = ({ onDisconnect, diff --git a/tsconfig.base.json b/tsconfig.base.json index 44d272ff4..29551cee7 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -17,7 +17,7 @@ "@metamask/sdk-communication-layer": [ "packages/sdk-communication-layer/src/index.ts" ], - "@metamask/sdk-install-modal-web": ["packages/sdk-install-modal-web/src/index.ts"], + "@metamask/sdk-install-modal-web": ["packages/sdk-install-modal-web/src/EmbeddableWidget.ts"], "@metamask/sdk-react": ["packages/sdk-react/src/index.ts"], "@metamask/sdk-react-native": ["packages/sdk-react-native/src/index.ts"] } diff --git a/yarn.lock b/yarn.lock index efd12f1d9..670fe0b41 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9976,19 +9976,21 @@ __metadata: languageName: node linkType: hard -"@metamask/sdk-install-modal-web@workspace:*, @metamask/sdk-install-modal-web@workspace:packages/sdk-install-modal-web": +"@metamask/sdk-install-modal-web@workspace:*, @metamask/sdk-install-modal-web@workspace:^, @metamask/sdk-install-modal-web@workspace:packages/sdk-install-modal-web": version: 0.0.0-use.local resolution: "@metamask/sdk-install-modal-web@workspace:packages/sdk-install-modal-web" dependencies: "@lavamoat/allow-scripts": ^2.3.1 "@metamask/auto-changelog": 3.1.0 "@paulmillr/qr": ^0.2.1 + "@rollup/plugin-commonjs": ^25.0.7 + "@rollup/plugin-node-resolve": ^15.0.2 + "@rollup/plugin-terser": ^0.4.1 + "@rollup/plugin-typescript": ^11.1.1 "@size-limit/preset-big-lib": ^11.0.2 - "@stencil/core": ^4.22.2 - "@types/i18n": ^0.13.12 - "@types/jest": ^29.5.14 - "@types/node": ^22.9.0 "@types/prettier": ^2 + "@types/react": ^18.2.37 + "@types/react-dom": ^18.2.15 "@typescript-eslint/eslint-plugin": ^5.56.0 "@typescript-eslint/parser": ^5.56.0 eslint: ^8.36.0 @@ -10001,13 +10003,31 @@ __metadata: eslint-plugin-react: ^7.32.2 i18next: 23.11.5 jest: ^29.6.4 + postcss: ^8.4.35 prettier: ^2.8.8 - puppeteer: ^23.8.0 + react: ^18.2.0 + react-dom: ^18.2.0 rimraf: ^5.0.0 + rollup: ^4.26.0 + rollup-plugin-peer-deps-external: ^2.2.4 + rollup-plugin-postcss: ^4.0.2 + rollup-plugin-sizes: ^1.0.6 + rollup-plugin-typescript2: ^0.36.0 + rollup-plugin-visualizer: ^5.12.0 size-limit: ^11.0.2 typescript: ^5.6.3 peerDependencies: i18next: 23.11.5 + react: ^18.2.0 + react-dom: ^18.2.0 + react-native: "*" + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + react-native: + optional: true languageName: unknown linkType: soft @@ -10561,6 +10581,8 @@ __metadata: prettier: ^2.3.0 process: ^0.11.10 pump: ^3.0.0 + react: ^18.2.0 + react-dom: 18.2.0 react-native-webview: ^11.26.0 readable-stream: ^3.6.2 rimraf: ^4.4.0 @@ -10586,6 +10608,14 @@ __metadata: util: ^0.12.4 uuid: ^8.3.2 webpack: ^5.0.0 + peerDependencies: + react: ^18.2.0 + react-dom: ^18.2.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true languageName: unknown linkType: soft @@ -11577,24 +11607,6 @@ __metadata: languageName: node linkType: hard -"@puppeteer/browsers@npm:2.4.1": - version: 2.4.1 - resolution: "@puppeteer/browsers@npm:2.4.1" - dependencies: - debug: ^4.3.7 - extract-zip: ^2.0.1 - progress: ^2.0.3 - proxy-agent: ^6.4.0 - semver: ^7.6.3 - tar-fs: ^3.0.6 - unbzip2-stream: ^1.4.3 - yargs: ^17.7.2 - bin: - browsers: lib/cjs/main-cli.js - checksum: 1e8193ae4ad84cf5a4f1ad59abe92f77a8ba4a902670f8a54002b9b772bf4df081de9e2ccb47efc465c31a0c6a649cbf7b7be8318f9fd3a6af466836b6835327 - languageName: node - linkType: hard - "@radix-ui/number@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/number@npm:1.0.1" @@ -14097,6 +14109,25 @@ __metadata: languageName: node linkType: hard +"@rollup/plugin-typescript@npm:^11.1.1": + version: 11.1.2 + resolution: "@rollup/plugin-typescript@npm:11.1.2" + dependencies: + "@rollup/pluginutils": ^5.0.1 + resolve: ^1.22.1 + peerDependencies: + rollup: ^2.14.0||^3.0.0 + tslib: "*" + typescript: ">=3.7.0" + peerDependenciesMeta: + rollup: + optional: true + tslib: + optional: true + checksum: f4655a35e08639574e86dbce578b76468ee8627e4a3d8a46b7e0703d5d98c39a9bda9aa7144510aae11c5d8ce9c3b065e7f3e52dd31fbc6780015dd7802e01f7 + languageName: node + linkType: hard + "@rollup/plugin-typescript@npm:^11.1.5": version: 11.1.5 resolution: "@rollup/plugin-typescript@npm:11.1.5" @@ -14970,15 +15001,6 @@ __metadata: languageName: node linkType: hard -"@stencil/core@npm:^4.22.2": - version: 4.22.2 - resolution: "@stencil/core@npm:4.22.2" - bin: - stencil: bin/stencil - checksum: 340bf95673f097085250c670f0df6f942b21b4d975116502884ed1ef4d231eaab7c91198ed64bc6148c136603097336b0cf24e9013ee94110068a79fea867af1 - languageName: node - linkType: hard - "@storybook/addon-actions@npm:7.5.3": version: 7.5.3 resolution: "@storybook/addon-actions@npm:7.5.3" @@ -17747,13 +17769,6 @@ __metadata: languageName: node linkType: hard -"@types/i18n@npm:^0.13.12": - version: 0.13.12 - resolution: "@types/i18n@npm:0.13.12" - checksum: dceac7da2ad985a04e2a96e450ad8a2b313e8a7be921ec7d1f05b5d9ee66309ec1845d7af70b0c2ab213de2d2f1de315038978d5c4dd86796b350fea67c6e90f - languageName: node - linkType: hard - "@types/is-function@npm:^1.0.0": version: 1.0.3 resolution: "@types/is-function@npm:1.0.3" @@ -17816,16 +17831,6 @@ __metadata: languageName: node linkType: hard -"@types/jest@npm:^29.5.14": - version: 29.5.14 - resolution: "@types/jest@npm:29.5.14" - dependencies: - expect: ^29.0.0 - pretty-format: ^29.0.0 - checksum: 18dba4623f26661641d757c63da2db45e9524c9be96a29ef713c703a9a53792df9ecee9f7365a0858ddbd6440d98fe6b65ca67895ca5884b73cbc7ffc11f3838 - languageName: node - linkType: hard - "@types/jest@npm:^29.5.6": version: 29.5.11 resolution: "@types/jest@npm:29.5.11" @@ -18037,15 +18042,6 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:^22.9.0": - version: 22.9.0 - resolution: "@types/node@npm:22.9.0" - dependencies: - undici-types: ~6.19.8 - checksum: c014eb3b8a110f1b87b614a40ef288d13e6b08ae9d5dafbd38951a2eebc24d352dc55330ed9d00c97ee9e64483c3cc14c4aa914c5df7ca7b9eaa1a30b2340dbd - languageName: node - linkType: hard - "@types/normalize-package-data@npm:^2.4.0": version: 2.4.1 resolution: "@types/normalize-package-data@npm:2.4.1" @@ -23675,19 +23671,6 @@ __metadata: languageName: node linkType: hard -"chromium-bidi@npm:0.8.0": - version: 0.8.0 - resolution: "chromium-bidi@npm:0.8.0" - dependencies: - mitt: 3.0.1 - urlpattern-polyfill: 10.0.0 - zod: 3.23.8 - peerDependencies: - devtools-protocol: "*" - checksum: 5c5b12e00564b6f145511ca4c159db24b07bfc6a1eb6add26d88c4331d74ef6cc8cd2f58bc169e0726c689910a1888313722f39ccab1bac14284d1918155d5e9 - languageName: node - linkType: hard - "ci-info@npm:^2.0.0": version: 2.0.0 resolution: "ci-info@npm:2.0.0" @@ -24608,23 +24591,6 @@ __metadata: languageName: node linkType: hard -"cosmiconfig@npm:^9.0.0": - version: 9.0.0 - resolution: "cosmiconfig@npm:9.0.0" - dependencies: - env-paths: ^2.2.1 - import-fresh: ^3.3.0 - js-yaml: ^4.1.0 - parse-json: ^5.2.0 - peerDependencies: - typescript: ">=4.9.5" - peerDependenciesMeta: - typescript: - optional: true - checksum: a30c424b53d442ea0bdd24cb1b3d0d8687c8dda4a17ab6afcdc439f8964438801619cdb66e8e79f63b9caa3e6586b60d8bab9ce203e72df6c5e80179b971fe8f - languageName: node - linkType: hard - "craco-babel-loader@npm:^1.0.4": version: 1.0.4 resolution: "craco-babel-loader@npm:1.0.4" @@ -25294,18 +25260,6 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.3.7": - version: 4.3.7 - resolution: "debug@npm:4.3.7" - dependencies: - ms: ^2.1.3 - peerDependenciesMeta: - supports-color: - optional: true - checksum: 822d74e209cd910ef0802d261b150314bbcf36c582ccdbb3e70f0894823c17e49a50d3e66d96b633524263975ca16b6a833f3e3b7e030c157169a5fabac63160 - languageName: node - linkType: hard - "decamelize-keys@npm:^1.1.0": version: 1.1.1 resolution: "decamelize-keys@npm:1.1.1" @@ -25811,6 +25765,7 @@ __metadata: "@metamask/providers": 16.1.0 "@metamask/sdk": "workspace:^" "@metamask/sdk-communication-layer": "workspace:^" + "@metamask/sdk-install-modal-web": "workspace:^" "@metamask/sdk-lab": "workspace:^" "@metamask/sdk-react": "workspace:^" "@metamask/sdk-react-ui": "workspace:^" @@ -26038,13 +25993,6 @@ __metadata: languageName: node linkType: hard -"devtools-protocol@npm:0.0.1367902": - version: 0.0.1367902 - resolution: "devtools-protocol@npm:0.0.1367902" - checksum: ef1115f4b287ab033c5342f7ba7fbf45314c3b46db2195978db0096b368ffbb79157a69dc361fa539874a37fea87101267049957285b1ecbaa1a96f6df6cf344 - languageName: node - linkType: hard - "dezalgo@npm:^1.0.4": version: 1.0.4 resolution: "dezalgo@npm:1.0.4" @@ -26815,7 +26763,7 @@ __metadata: languageName: node linkType: hard -"env-paths@npm:^2.2.0, env-paths@npm:^2.2.1": +"env-paths@npm:^2.2.0": version: 2.2.1 resolution: "env-paths@npm:2.2.1" checksum: 65b5df55a8bab92229ab2b40dad3b387fad24613263d103a97f91c9fe43ceb21965cd3392b1ccb5d77088021e525c4e0481adb309625d0cb94ade1d1fb8dc17e @@ -29662,7 +29610,7 @@ __metadata: languageName: node linkType: hard -"extract-zip@npm:2.0.1, extract-zip@npm:^2.0.1": +"extract-zip@npm:2.0.1": version: 2.0.1 resolution: "extract-zip@npm:2.0.1" dependencies: @@ -38605,7 +38553,7 @@ __metadata: languageName: node linkType: hard -"ms@npm:2.1.3, ms@npm:^2.0.0, ms@npm:^2.1.1, ms@npm:^2.1.3": +"ms@npm:2.1.3, ms@npm:^2.0.0, ms@npm:^2.1.1": version: 2.1.3 resolution: "ms@npm:2.1.3" checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d @@ -41562,6 +41510,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.35": + version: 8.4.35 + resolution: "postcss@npm:8.4.35" + dependencies: + nanoid: ^3.3.7 + picocolors: ^1.0.0 + source-map-js: ^1.0.2 + checksum: cf3c3124d3912a507603f6d9a49b3783f741075e9aa73eb592a6dd9194f9edab9d20a8875d16d137d4f779fe7b6fbd1f5727e39bfd1c3003724980ee4995e1da + languageName: node + linkType: hard + "postcss@npm:^8.4.4": version: 8.4.29 resolution: "postcss@npm:8.4.29" @@ -41768,7 +41727,7 @@ __metadata: languageName: node linkType: hard -"progress@npm:2.0.3, progress@npm:^2.0.0, progress@npm:^2.0.1, progress@npm:^2.0.3": +"progress@npm:2.0.3, progress@npm:^2.0.0, progress@npm:^2.0.1": version: 2.0.3 resolution: "progress@npm:2.0.3" checksum: f67403fe7b34912148d9252cb7481266a354bd99ce82c835f79070643bb3c6583d10dbcfda4d41e04bbc1d8437e9af0fb1e1f2135727878f5308682a579429b7 @@ -41905,7 +41864,7 @@ __metadata: languageName: node linkType: hard -"proxy-agent@npm:6.4.0, proxy-agent@npm:^6.4.0": +"proxy-agent@npm:6.4.0": version: 6.4.0 resolution: "proxy-agent@npm:6.4.0" dependencies: @@ -42043,20 +42002,6 @@ __metadata: languageName: node linkType: hard -"puppeteer-core@npm:23.8.0": - version: 23.8.0 - resolution: "puppeteer-core@npm:23.8.0" - dependencies: - "@puppeteer/browsers": 2.4.1 - chromium-bidi: 0.8.0 - debug: ^4.3.7 - devtools-protocol: 0.0.1367902 - typed-query-selector: ^2.12.0 - ws: ^8.18.0 - checksum: 98d92c0bc839cc779d1d40f014c3d61cb7d897bd18d61b54a6e25ddb36a54eeaa128735852ceaa3daa3c6e8516f5a976613f409c5b5774c1f904e5bb86ce1de8 - languageName: node - linkType: hard - "puppeteer-core@npm:^2.1.1": version: 2.1.1 resolution: "puppeteer-core@npm:2.1.1" @@ -42075,22 +42020,6 @@ __metadata: languageName: node linkType: hard -"puppeteer@npm:^23.8.0": - version: 23.8.0 - resolution: "puppeteer@npm:23.8.0" - dependencies: - "@puppeteer/browsers": 2.4.1 - chromium-bidi: 0.8.0 - cosmiconfig: ^9.0.0 - devtools-protocol: 0.0.1367902 - puppeteer-core: 23.8.0 - typed-query-selector: ^2.12.0 - bin: - puppeteer: lib/cjs/puppeteer/node/cli.js - checksum: 7983fc9c18fcb74321d77a42c403ed5eda28b7f618ce420dba94c2c4dd8c65b9f40a9de20515966fe9a9a94171ff92141fd7f8f3e2cefe36cbf3ca9e30957eed - languageName: node - linkType: hard - "pure-rand@npm:^6.0.0": version: 6.0.2 resolution: "pure-rand@npm:6.0.2" @@ -45238,15 +45167,6 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.6.3": - version: 7.6.3 - resolution: "semver@npm:7.6.3" - bin: - semver: bin/semver.js - checksum: 4110ec5d015c9438f322257b1c51fe30276e5f766a3f64c09edd1d7ea7118ecbc3f379f3b69032bacf13116dc7abc4ad8ce0d7e2bd642e26b0d271b56b61a7d8 - languageName: node - linkType: hard - "semver@npm:~2.3.1": version: 2.3.2 resolution: "semver@npm:2.3.2" @@ -47300,23 +47220,6 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^3.0.6": - version: 3.0.6 - resolution: "tar-fs@npm:3.0.6" - dependencies: - bare-fs: ^2.1.1 - bare-path: ^2.1.0 - pump: ^3.0.0 - tar-stream: ^3.1.5 - dependenciesMeta: - bare-fs: - optional: true - bare-path: - optional: true - checksum: b4fa09c70f75caf05bf5cf87369cd2862f1ac5fb75c4ddf9d25d55999f7736a94b58ad679d384196cba837c5f5ff14086e060fafccef5474a16e2d3058ffa488 - languageName: node - linkType: hard - "tar-stream@npm:^2.1.4": version: 2.2.0 resolution: "tar-stream@npm:2.2.0" @@ -48323,13 +48226,6 @@ __metadata: languageName: node linkType: hard -"typed-query-selector@npm:^2.12.0": - version: 2.12.0 - resolution: "typed-query-selector@npm:2.12.0" - checksum: c4652f2eec16112d69e0da30c2effab3f03d1710f9559da1e1209bbfc9a20990d5de4ba97890c11f9d17d85c8ae3310953a86c198166599d4c36abc63664f169 - languageName: node - linkType: hard - "typedarray-to-buffer@npm:3.1.5, typedarray-to-buffer@npm:^3.1.5": version: 3.1.5 resolution: "typedarray-to-buffer@npm:3.1.5" @@ -48585,7 +48481,7 @@ __metadata: languageName: node linkType: hard -"unbzip2-stream@npm:1.4.3, unbzip2-stream@npm:^1.4.3": +"unbzip2-stream@npm:1.4.3": version: 1.4.3 resolution: "unbzip2-stream@npm:1.4.3" dependencies: @@ -48616,13 +48512,6 @@ __metadata: languageName: node linkType: hard -"undici-types@npm:~6.19.8": - version: 6.19.8 - resolution: "undici-types@npm:6.19.8" - checksum: de51f1b447d22571cf155dfe14ff6d12c5bdaec237c765085b439c38ca8518fc360e88c70f99469162bf2e14188a7b0bcb06e1ed2dc031042b984b0bb9544017 - languageName: node - linkType: hard - "undici@npm:^6.10.1": version: 6.19.2 resolution: "undici@npm:6.19.2" @@ -50929,21 +50818,6 @@ __metadata: languageName: node linkType: hard -"ws@npm:^8.18.0": - version: 8.18.0 - resolution: "ws@npm:8.18.0" - peerDependencies: - bufferutil: ^4.0.1 - utf-8-validate: ">=5.0.2" - peerDependenciesMeta: - bufferutil: - optional: true - utf-8-validate: - optional: true - checksum: 91d4d35bc99ff6df483bdf029b9ea4bfd7af1f16fc91231a96777a63d263e1eabf486e13a2353970efc534f9faa43bdbf9ee76525af22f4752cbc5ebda333975 - languageName: node - linkType: hard - "ws@npm:~8.11.0": version: 8.11.0 resolution: "ws@npm:8.11.0" @@ -51141,7 +51015,7 @@ __metadata: languageName: node linkType: hard -"yargs@npm:17.7.2, yargs@npm:^17.0.0, yargs@npm:^17.0.1, yargs@npm:^17.3.1, yargs@npm:^17.5.1, yargs@npm:^17.6.2, yargs@npm:^17.7.1, yargs@npm:^17.7.2": +"yargs@npm:17.7.2, yargs@npm:^17.0.0, yargs@npm:^17.0.1, yargs@npm:^17.3.1, yargs@npm:^17.5.1, yargs@npm:^17.6.2, yargs@npm:^17.7.1": version: 17.7.2 resolution: "yargs@npm:17.7.2" dependencies: @@ -51228,13 +51102,6 @@ __metadata: languageName: node linkType: hard -"zod@npm:3.23.8": - version: 3.23.8 - resolution: "zod@npm:3.23.8" - checksum: 15949ff82118f59c893dacd9d3c766d02b6fa2e71cf474d5aa888570c469dbf5446ac5ad562bb035bf7ac9650da94f290655c194f4a6de3e766f43febd432c5c - languageName: node - linkType: hard - "zod@npm:^3.21.4": version: 3.22.2 resolution: "zod@npm:3.22.2"