From f08cb315fbc00f0e51f1b551b55b445338c86c4b Mon Sep 17 00:00:00 2001 From: Edward Penta Date: Tue, 19 Nov 2024 00:15:08 -0500 Subject: [PATCH 01/14] feat: convert sdk-install-modal-web to stenciljs --- packages/sdk-install-modal-web/.eslintrc.js | 3 + packages/sdk-install-modal-web/.gitignore | 29 ++ packages/sdk-install-modal-web/package.json | 91 +++--- .../sdk-install-modal-web/postcss.config.js | 3 - .../sdk-install-modal-web/rollup.config.js | 67 ----- .../src/InstallModal.tsx | 159 ---------- .../sdk-install-modal-web/src/ModalLoader.tsx | 170 ----------- .../src/PendingModal.tsx | 90 ------ .../sdk-install-modal-web/src/SelectModal.tsx | 116 -------- .../sdk-install-modal-web/src/components.d.ts | 161 ++++++++++ .../{ => misc}/AdvantagesListItem.tsx | 9 +- .../src/components/{ => misc}/CloseButton.tsx | 13 +- .../src/components/{ => misc}/ConnectIcon.tsx | 7 +- .../src/components/{ => misc}/HeartIcon.tsx | 7 +- .../src/components/{ => misc}/InstallIcon.tsx | 25 +- .../src/components/{ => misc}/LockIcon.tsx | 7 +- .../src/components/{ => misc}/Logo.tsx | 179 +++++------ .../{ => misc}/MetamaskExtensionImage.tsx | 260 ++++++++-------- .../src/components/{ => misc}/SDKVersion.tsx | 4 +- .../src/components/{ => misc}/WalletIcon.tsx | 7 +- .../mm-install-modal/mm-install-modal.tsx | 182 ++++++++++++ .../src/components/mm-install-modal/readme.md | 23 ++ .../mm-pending-modal/mm-pending-modal.tsx | 121 ++++++++ .../src/components/mm-pending-modal/readme.md | 24 ++ .../mm-select-modal/mm-select-modal.tsx | 130 ++++++++ .../src/components/mm-select-modal/readme.md | 22 ++ .../src/components/style.css | 169 +++++++++++ .../widget-wrapper}/resetStyles.css | 0 .../widget-wrapper/widget-wrapper.tsx} | 10 +- .../sdk-install-modal-web/src/constants.ts | 1 - packages/sdk-install-modal-web/src/index.ts | 12 +- packages/sdk-install-modal-web/src/styles.ts | 149 ---------- .../sdk-install-modal-web/stencil.config.ts | 22 ++ packages/sdk-install-modal-web/tsconfig.json | 14 +- yarn.lock | 277 ++++++++++++++---- 35 files changed, 1432 insertions(+), 1131 deletions(-) delete mode 100644 packages/sdk-install-modal-web/postcss.config.js delete mode 100644 packages/sdk-install-modal-web/rollup.config.js delete mode 100644 packages/sdk-install-modal-web/src/InstallModal.tsx delete mode 100644 packages/sdk-install-modal-web/src/ModalLoader.tsx delete mode 100644 packages/sdk-install-modal-web/src/PendingModal.tsx delete mode 100644 packages/sdk-install-modal-web/src/SelectModal.tsx create mode 100644 packages/sdk-install-modal-web/src/components.d.ts rename packages/sdk-install-modal-web/src/components/{ => misc}/AdvantagesListItem.tsx (53%) rename packages/sdk-install-modal-web/src/components/{ => misc}/CloseButton.tsx (80%) rename packages/sdk-install-modal-web/src/components/{ => misc}/ConnectIcon.tsx (94%) rename packages/sdk-install-modal-web/src/components/{ => misc}/HeartIcon.tsx (88%) rename packages/sdk-install-modal-web/src/components/{ => misc}/InstallIcon.tsx (64%) rename packages/sdk-install-modal-web/src/components/{ => misc}/LockIcon.tsx (90%) rename packages/sdk-install-modal-web/src/components/{ => misc}/Logo.tsx (81%) rename packages/sdk-install-modal-web/src/components/{ => misc}/MetamaskExtensionImage.tsx (85%) rename packages/sdk-install-modal-web/src/components/{ => misc}/SDKVersion.tsx (60%) rename packages/sdk-install-modal-web/src/components/{ => misc}/WalletIcon.tsx (93%) create mode 100644 packages/sdk-install-modal-web/src/components/mm-install-modal/mm-install-modal.tsx create mode 100644 packages/sdk-install-modal-web/src/components/mm-install-modal/readme.md create mode 100644 packages/sdk-install-modal-web/src/components/mm-pending-modal/mm-pending-modal.tsx create mode 100644 packages/sdk-install-modal-web/src/components/mm-pending-modal/readme.md create mode 100644 packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx create mode 100644 packages/sdk-install-modal-web/src/components/mm-select-modal/readme.md create mode 100644 packages/sdk-install-modal-web/src/components/style.css rename packages/sdk-install-modal-web/src/{ => components/widget-wrapper}/resetStyles.css (100%) rename packages/sdk-install-modal-web/src/{WidgetWrapper.tsx => components/widget-wrapper/widget-wrapper.tsx} (60%) delete mode 100644 packages/sdk-install-modal-web/src/constants.ts delete mode 100644 packages/sdk-install-modal-web/src/styles.ts create mode 100644 packages/sdk-install-modal-web/stencil.config.ts diff --git a/packages/sdk-install-modal-web/.eslintrc.js b/packages/sdk-install-modal-web/.eslintrc.js index 8c7f0495e..2c588227f 100644 --- a/packages/sdk-install-modal-web/.eslintrc.js +++ b/packages/sdk-install-modal-web/.eslintrc.js @@ -15,6 +15,9 @@ 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 618729973..c79078fdb 100644 --- a/packages/sdk-install-modal-web/.gitignore +++ b/packages/sdk-install-modal-web/.gitignore @@ -54,3 +54,32 @@ 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 ac63e4a64..7bae107f3 100644 --- a/packages/sdk-install-modal-web/package.json +++ b/packages/sdk-install-modal-web/package.json @@ -13,23 +13,48 @@ }, "author": "MetaMask", "packageManager": "yarn@3.5.0", - "main": "dist/cjs/index.js", - "module": "dist/es/index.js", - "unpkg": "dist/umd/index.js", - "browser": "dist/umd/index.js", - "types": "dist/es/src/index.d.ts", + "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", "files": [ - "/dist" + "./dist", + "./loader" ], + "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": { - "build": "rollup -c --bundleConfigAsCjs", - "build:tsc": "tsc --build tsconfig.json --verbose", - "build:watch": "webpack-cli --watch", + "build": "stencil build", + "test.watch": "stencil test --spec --e2e --watchAll", + "allow-scripts": "", + "generate": "stencil generate", "build:post-tsc": "echo 'N/A'", "build:pre-tsc": "echo 'N/A'", - "size": "size-limit", - "build:release": "yarn version && webpack-cli --mode production", - "clean": "rimraf ./dist", + "build:release": "yarn version && stencil build", + "clean": "rimraf ./dist && rimraf ./loader", "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", @@ -38,26 +63,24 @@ "prepack": "../../scripts/prepack.sh", "publish:preview": "yarn npm publish --tag preview", "reset": "yarn clean && rimraf ./node_modules/", - "start": "webpack-dev-server", - "test": "echo \"Running tests for version $npm_package_version...\"", + "start": "stencil build --dev --watch --serve", + "test": "stencil test --spec --e2e", "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!\"" }, "dependencies": { - "qr-code-styling": "^1.6.0-rc.1" + "@paulmillr/qr": "^0.2.1" }, "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", @@ -70,36 +93,14 @@ "eslint-plugin-react": "^7.32.2", "i18next": "23.11.5", "jest": "^29.6.4", - "postcss": "^8.4.35", "prettier": "^2.8.8", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "puppeteer": "^23.8.0", "rimraf": "^5.0.0", - "rollup": "^3.21.7", - "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.0.2" }, "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 - } + "i18next": "23.11.5" }, "publishConfig": { "access": "public", diff --git a/packages/sdk-install-modal-web/postcss.config.js b/packages/sdk-install-modal-web/postcss.config.js deleted file mode 100644 index 9361eff3d..000000000 --- a/packages/sdk-install-modal-web/postcss.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - plugins: {}, -}; diff --git a/packages/sdk-install-modal-web/rollup.config.js b/packages/sdk-install-modal-web/rollup.config.js deleted file mode 100644 index 55e0aa5dc..000000000 --- a/packages/sdk-install-modal-web/rollup.config.js +++ /dev/null @@ -1,67 +0,0 @@ -import resolve from '@rollup/plugin-node-resolve'; -import commonjs from '@rollup/plugin-commonjs'; -import typescript from 'rollup-plugin-typescript2'; -import terser from '@rollup/plugin-terser'; -import sizes from 'rollup-plugin-sizes'; -import { visualizer } from 'rollup-plugin-visualizer'; -import external from 'rollup-plugin-peer-deps-external'; -import postcss from 'rollup-plugin-postcss'; - -// Check if environment variable is set to 'dev' -const isDev = process.env.NODE_ENV === 'dev'; - -const packageJson = require('./package.json'); - -/** - * @type {import('rollup').RollupOptions} - */ -const config = [ - { - external: ['react', 'react-dom', 'react-native', 'i18next'], - input: 'src/index.ts', - output: [ - { - file: packageJson.module, - format: 'es', - sourcemap: true, - }, - { - name: 'browser', - file: packageJson.unpkg, - format: 'umd', - sourcemap: true, - }, - { - file: packageJson.main, - format: 'cjs', - sourcemap: true, - }, - ], - plugins: [ - external(), - resolve(), - commonjs(), - typescript(), - postcss({ - // Extract CSS to the same location as the JS file - extract: true, - // Use Sass compiler - plugins: [], - // Enable source maps - sourceMap: true, - // Enable CSS modules if needed - modules: true, - // Use additional plugins like `autoprefixer` - // plugins: [require('autoprefixer')] - }), - isDev && sizes(), - terser(), - isDev && - visualizer({ - filename: `bundle_stats/browser-es-stats-${packageJson.version}.html`, - }), - ], - }, -]; - -export default config; diff --git a/packages/sdk-install-modal-web/src/InstallModal.tsx b/packages/sdk-install-modal-web/src/InstallModal.tsx deleted file mode 100644 index 127a8d2bc..000000000 --- a/packages/sdk-install-modal-web/src/InstallModal.tsx +++ /dev/null @@ -1,159 +0,0 @@ -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 { FOX_IMAGE } from './constants'; -import styles from './styles'; -import SDKVersion from './components/SDKVersion'; - -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) { - // Prevent nextjs import issue: https://github.com/kozakdenys/qr-code-styling/issues/38 - // eslint-disable-next-line @typescript-eslint/no-var-requires - const QRCodeStyling = require('qr-code-styling'); - const qrCode = new QRCodeStyling({ - width: 270, - height: 270, - type: 'svg', - data: props.link, - image: FOX_IMAGE, - dotsOptions: { - color: 'black', - type: 'rounded', - }, - imageOptions: { - margin: 5, - }, - cornersDotOptions: { - color: '#f66a07', - }, - qrOptions: { - errorCorrectionLevel: 'M', - }, - }); - qrCode.append(qrCodeContainer.current); - } - }, [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 deleted file mode 100644 index ea1f0abe9..000000000 --- a/packages/sdk-install-modal-web/src/ModalLoader.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import React from 'react'; -import { createRoot } from 'react-dom/client'; -import { FOX_IMAGE } from './constants'; - -import { InstallModal, InstallModalProps } from './InstallModal'; -import { PendingModal, PendingModalProps } from './PendingModal'; -import { SelectModal, SelectModalProps } from './SelectModal'; - -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 = ''; - // Prevent nextjs import issue: https://github.com/kozakdenys/qr-code-styling/issues/38 - // eslint-disable-next-line @typescript-eslint/no-var-requires - const QRCodeStyling = require('qr-code-styling'); - // Prevent nextjs import issue - const qrCode = new QRCodeStyling({ - width: 270, - height: 270, - type: 'svg', - data: link, - image: FOX_IMAGE, - dotsOptions: { - color: 'black', - type: 'rounded', - }, - imageOptions: { - margin: 5, - }, - cornersDotOptions: { - color: '#f66a07', - }, - qrOptions: { - errorCorrectionLevel: 'M', - }, - }); - qrCode.append(qrCodeNode); - } - }; - - 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 deleted file mode 100644 index 79e75b09f..000000000 --- a/packages/sdk-install-modal-web/src/PendingModal.tsx +++ /dev/null @@ -1,90 +0,0 @@ -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 deleted file mode 100644 index aa9531ebe..000000000 --- a/packages/sdk-install-modal-web/src/SelectModal.tsx +++ /dev/null @@ -1,116 +0,0 @@ -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.d.ts b/packages/sdk-install-modal-web/src/components.d.ts new file mode 100644 index 000000000..29d80bd84 --- /dev/null +++ b/packages/sdk-install-modal-web/src/components.d.ts @@ -0,0 +1,161 @@ +/* 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/AdvantagesListItem.tsx b/packages/sdk-install-modal-web/src/components/misc/AdvantagesListItem.tsx similarity index 53% rename from packages/sdk-install-modal-web/src/components/AdvantagesListItem.tsx rename to packages/sdk-install-modal-web/src/components/misc/AdvantagesListItem.tsx index e482d8666..cc6dc983d 100644 --- a/packages/sdk-install-modal-web/src/components/AdvantagesListItem.tsx +++ b/packages/sdk-install-modal-web/src/components/misc/AdvantagesListItem.tsx @@ -1,12 +1,11 @@ -import React from 'react'; -import styles from '../styles'; +import { h } from '@stencil/core'; const AdvantagesListItem = ({ Icon, text }: { Icon: any; text: string }) => ( -
-
+
+
-
+
{text}
diff --git a/packages/sdk-install-modal-web/src/components/CloseButton.tsx b/packages/sdk-install-modal-web/src/components/misc/CloseButton.tsx similarity index 80% rename from packages/sdk-install-modal-web/src/components/CloseButton.tsx rename to packages/sdk-install-modal-web/src/components/misc/CloseButton.tsx index ecd395eef..ac12f4fd7 100644 --- a/packages/sdk-install-modal-web/src/components/CloseButton.tsx +++ b/packages/sdk-install-modal-web/src/components/misc/CloseButton.tsx @@ -1,16 +1,17 @@ -import React from 'react'; +import { h } from "@stencil/core"; + const CloseButton = () => ( - + diff --git a/packages/sdk-install-modal-web/src/components/ConnectIcon.tsx b/packages/sdk-install-modal-web/src/components/misc/ConnectIcon.tsx similarity index 94% rename from packages/sdk-install-modal-web/src/components/ConnectIcon.tsx rename to packages/sdk-install-modal-web/src/components/misc/ConnectIcon.tsx index 0c98ac64a..61e20b04b 100644 --- a/packages/sdk-install-modal-web/src/components/ConnectIcon.tsx +++ b/packages/sdk-install-modal-web/src/components/misc/ConnectIcon.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import { h } from "@stencil/core"; + const ConnectIcon = () => ( ( ( ( ); diff --git a/packages/sdk-install-modal-web/src/components/LockIcon.tsx b/packages/sdk-install-modal-web/src/components/misc/LockIcon.tsx similarity index 90% rename from packages/sdk-install-modal-web/src/components/LockIcon.tsx rename to packages/sdk-install-modal-web/src/components/misc/LockIcon.tsx index 7ce947e1c..16a9ac49e 100644 --- a/packages/sdk-install-modal-web/src/components/LockIcon.tsx +++ b/packages/sdk-install-modal-web/src/components/misc/LockIcon.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import { h } from "@stencil/core"; + const WalletIcon = () => ( ( ( d="M52.021 1L31.0526 16.4886L34.9517 7.36063L52.021 1Z" fill="#E17726" stroke="#E17726" - strokeWidth="0.5" - strokeLinecap="round" - strokeLinejoin="round" + stroke-width="0.5" + stroke-linecap="round" + stroke-linejoin="round" /> ); diff --git a/packages/sdk-install-modal-web/src/components/MetamaskExtensionImage.tsx b/packages/sdk-install-modal-web/src/components/misc/MetamaskExtensionImage.tsx similarity index 85% rename from packages/sdk-install-modal-web/src/components/MetamaskExtensionImage.tsx rename to packages/sdk-install-modal-web/src/components/misc/MetamaskExtensionImage.tsx index 0849633d3..0c8a7e267 100644 --- a/packages/sdk-install-modal-web/src/components/MetamaskExtensionImage.tsx +++ b/packages/sdk-install-modal-web/src/components/misc/MetamaskExtensionImage.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { h } from "@stencil/core"; export const MetamaskExtensionImage = () => ( ( d="M295.952 95.4242L241.395 135.226L251.54 111.77L295.952 95.4242Z" fill="#E17726" stroke="#E17726" - strokeWidth="0.94513" - strokeLinecap="round" - strokeLinejoin="round" + stroke-width="0.94513" + stroke-linecap="round" + stroke-linejoin="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/SDKVersion.tsx b/packages/sdk-install-modal-web/src/components/misc/SDKVersion.tsx similarity index 60% rename from packages/sdk-install-modal-web/src/components/SDKVersion.tsx rename to packages/sdk-install-modal-web/src/components/misc/SDKVersion.tsx index dfb32b0d4..4dd14fee5 100644 --- a/packages/sdk-install-modal-web/src/components/SDKVersion.tsx +++ b/packages/sdk-install-modal-web/src/components/misc/SDKVersion.tsx @@ -1,7 +1,7 @@ -import React from 'react' +import { h } from "@stencil/core"; 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/WalletIcon.tsx b/packages/sdk-install-modal-web/src/components/misc/WalletIcon.tsx similarity index 93% rename from packages/sdk-install-modal-web/src/components/WalletIcon.tsx rename to packages/sdk-install-modal-web/src/components/misc/WalletIcon.tsx index fa15468c0..9fc05bd52 100644 --- a/packages/sdk-install-modal-web/src/components/WalletIcon.tsx +++ b/packages/sdk-install-modal-web/src/components/misc/WalletIcon.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import { h } from "@stencil/core"; + const LockIcon = () => ( +
+ + + ) + } +} diff --git a/packages/sdk-install-modal-web/src/components/mm-install-modal/readme.md b/packages/sdk-install-modal-web/src/components/mm-install-modal/readme.md new file mode 100644 index 000000000..6652ea76b --- /dev/null +++ b/packages/sdk-install-modal-web/src/components/mm-install-modal/readme.md @@ -0,0 +1,23 @@ +# my-component + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ---------------- | --------------------- | ----------- | +| `i18nInstance` | -- | | `i18n` | `undefined` | +| `link` | `link` | The QR code link | `string` | `undefined` | +| `preferDesktop` | `prefer-desktop` | | `boolean` | `undefined` | +| `sdkVersion` | `sdk-version` | | `string \| undefined` | `undefined` | + +## Events + +| Event | Description | Type | +| ------------------------ | ----------- | ------------------ | +| `close` | | `CustomEvent` | +| `startDesktopOnboarding` | | `CustomEvent` | + +--- + +_Built with [StencilJS](https://stenciljs.com/)_ 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 new file mode 100644 index 000000000..dca8a6b1b --- /dev/null +++ b/packages/sdk-install-modal-web/src/components/mm-pending-modal/mm-pending-modal.tsx @@ -0,0 +1,121 @@ +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 ( + +
+ +
+ ) + } +} diff --git a/packages/sdk-install-modal-web/src/components/mm-pending-modal/readme.md b/packages/sdk-install-modal-web/src/components/mm-pending-modal/readme.md new file mode 100644 index 000000000..97579639f --- /dev/null +++ b/packages/sdk-install-modal-web/src/components/mm-pending-modal/readme.md @@ -0,0 +1,24 @@ +# mm-pending-modal + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ---------------- | ---------------------- | ----------- | +| `displayOTP` | `display-o-t-p` | The QR code link | `boolean \| undefined` | `undefined` | +| `i18nInstance` | -- | | `i18n` | `undefined` | +| `otpCode` | `otp-code` | | `string \| undefined` | `undefined` | +| `sdkVersion` | `sdk-version` | | `string \| undefined` | `undefined` | + +## Events + +| Event | Description | Type | +| ---------------- | ----------- | ------------------------------------ | +| `close` | | `CustomEvent` | +| `disconnect` | | `CustomEvent` | +| `updateOTPValue` | | `CustomEvent<{ otpValue: string; }>` | + +--- + +_Built with [StencilJS](https://stenciljs.com/)_ 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 new file mode 100644 index 000000000..21c8b0281 --- /dev/null +++ b/packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx @@ -0,0 +1,130 @@ +import { Component, Prop, h, Event, EventEmitter, State } 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'; + +@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; + + onClose(shouldTerminate = false) { + this.close.emit({ shouldTerminate }); + } + + connectWithExtensionHandler() { + this.connectWithExtension.emit(); + } + + setTab(tab: number) { + this.tab = tab; + } + + disconnectedCallback() { + this.onClose(); + } + + render() { + const sdkVersion = this.sdkVersion + const t = this.i18nInstance.t; + + return ( + +
this.onClose(true)}>
+