Revert "Make SDK Modal with StencilJS" (#1136)

Revert "Make SDK Modal with StencilJS (#1124)" This reverts commit b9e131e.
MetaMask · Nov 20, 2024 · dbc1cc1 · dbc1cc1
1 parent b9e131e
commit dbc1cc1
Show file tree

Hide file tree

Showing 41 changed files with 1,049 additions and 1,545 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
-# ====
diff --git a/packages/sdk-install-modal-web/package.json b/packages/sdk-install-modal-web/package.json
@@ -13,52 +13,26 @@
   },
   "author": "MetaMask",
   "packageManager": "[email protected]",
-  "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,22 +41,23 @@
     "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!\""
   },
   "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
@@ -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
@@ -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<number>(props.preferDesktop ? 1 : 2);
+  const qrCodeContainer = useRef<HTMLDivElement>(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 (
+    <WidgetWrapper className="install-model">
+      <div style={styles.backdrop} onClick={props.onClose}></div>
+      <div style={styles.modal}>
+        <div style={styles.closeButtonContainer}>
+          <div style={styles.right}>
+            <span style={styles.closeButton} onClick={props.onClose}>
+              <CloseButton />
+            </span>
+          </div>
+        </div>
+        <div style={styles.logoContainer}>
+          <Logo />
+        </div>
+        <div>
+          <div style={styles.tabcontainer}>
+            <div style={styles.flexContainer}>
+              <div
+                onClick={() => setTab(1)}
+                style={
+                  {
+                    ...styles.tab,
+                    ...(tab === 1 ? styles.tabactive : {}),
+                    ...styles.flexItem,
+                  } as CSSProperties
+                }
+              >
+                {t('DESKTOP')}
+              </div>
+              <div
+                onClick={() => setTab(2)}
+                style={
+                  {
+                    ...styles.tab,
+                    ...(tab === 2 ? styles.tabactive : {}),
+                    ...styles.flexItem,
+                  } as CSSProperties
+                }
+              >
+                {t('MOBILE')}
+              </div>
+            </div>
+          </div>
+          <div style={{ display: tab === 1 ? 'none' : 'block' }}>
+            <div style={styles.flexContainer}>
+              <div
+                style={{
+                  textAlign: 'center',
+                  marginTop: 4,
+                  ...styles.flexItem,
+                }}
+              >
+                <div ref={qrCodeContainer} style={styles.center} />
+                <div style={styles.connectMobileText}>
+                  {t('SCAN_TO_CONNECT')} <br />
+                  <span style={styles.blue}>
+                    <b>{t('META_MASK_MOBILE_APP')}</b>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style={{ display: tab === 2 ? 'none' : 'block' }}>
+            <div style={styles.item}>
+              <AdvantagesListItem
+                Icon={HeartIcon}
+                text={t('INSTALL_MODAL.TRUSTED_BY_USERS')}
+              />
+            </div>
+            <div style={styles.item}>
+              <AdvantagesListItem
+                Icon={WalletIcon}
+                text={t('INSTALL_MODAL.LEADING_CRYPTO_WALLET')}
+              />
+            </div>
+            <div style={styles.item}>
+              <AdvantagesListItem
+                Icon={LockIcon}
+                text={t('INSTALL_MODAL.CONTROL_DIGITAL_INTERACTIONS')}
+              />
+            </div>
+
+            <button
+              style={styles.button}
+              onClick={props.metaMaskInstaller.startDesktopOnboarding}
+            >
+              <InstallIcon />
+              <span style={styles.installExtensionText}>
+                {t('INSTALL_MODAL.INSTALL_META_MASK_EXTENSION')}
+              </span>
+            </button>
+          </div>
+        </div>
+        <SDKVersion version={sdkVersion} />
+      </div>
+    </WidgetWrapper>
+  );
+};