feat: add new modal ui package with cleaned styles and code.

package.json

@@ -9,6 +9,7 @@
   "workspaces": [
     "packages/sdk-socket-server-next",
     "packages/sdk-install-modal-web",
+    "packages/sdk-multichain-ui",
     "packages/sdk-communication-layer",
     "packages/sdk",
     "packages/sdk-react",

packages/sdk-multichain-ui/.change

@@ -0,0 +1 @@
+0.30.2

packages/sdk-multichain-ui/.eslintrc.js

@@ -0,0 +1,62 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+
+  // extends: ['@metamask/eslint-config'],
+  // TODO check if we can integrate to @metamask/eslint-config
+  extends: ['eslint:recommended'],
+
+  parser: '@typescript-eslint/parser',
+
+  ignorePatterns: [
+    '.eslintrc.js',
+    'dist',
+    'rollup.config.js',
+    '**/coverage/**',
+    'postcss.config.js',
+    'jest-preload.js',
+    'loader',
+    '.stencil',
+    'stencil.config.ts',
+  ],
+
+  parserOptions: {
+    project: true,
+    // sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    // ecmaVersion: 2018,
+    tsconfigRootDir: __dirname,
+  },
+
+  plugins: ['@typescript-eslint', 'react'],
+
+  env: {
+    browser: true,
+    node: true,
+    'shared-node-browser': true,
+  },
+
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        'no-restricted-syntax': 'off',
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': ['error'],
+        '@typescript-eslint/consistent-type-exports': [
+          'error',
+          {
+            fixMixedExportsWithInlineTypeSpecifier: true,
+          },
+        ],
+        '@typescript-eslint/consistent-type-definitions': [
+          'error',
+          'interface',
+        ],
+        'import/no-named-as-default': 0,
+      },
+    },
+  ],
+};

packages/sdk-multichain-ui/.gitignore

@@ -0,0 +1,85 @@
+packages/*/yarn.lock
+packages/*/package-lock.json
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+junit.xml
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+examples/biz-website/public/
+examples/blog/public/
+*.un~
+dist
+bin/published.js
+
+
+test/**/public
+.gatsby-context.js
+.DS_Store
+node_modules/
+.cache/
+.netlify
+
+# IDE specific
+.idea/
+.vscode/
+*.sw*
+
+# misc
+.serverless/
+
+# 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
+# ====

packages/sdk-multichain-ui/.prettierrc.js

@@ -0,0 +1,8 @@
+// All of these are defaults except singleQuote, but we specify them
+// for explicitness
+module.exports = {
+  quoteProps: 'as-needed',
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+};

packages/sdk-multichain-ui/.size-limit.json

@@ -0,0 +1,6 @@
+[
+  {
+    "path": "dist/components/*.js",
+    "limit": "30 KB"
+  }
+]

packages/sdk-multichain-ui/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+[Unreleased]: https://github.com/MetaMask/metamask-sdk/

packages/sdk-multichain-ui/LICENSE

@@ -0,0 +1,18 @@
+Copyright ConsenSys Software Inc. 2022. All rights reserved.
+
+You acknowledge and agree that ConsenSys Software Inc. (“ConsenSys”) (or ConsenSys’s licensors) own all legal right, title and interest in and to the work, software, application, source code, documentation and any other documents in this repository (collectively, the “Program”), including any intellectual property rights which subsist in the Program (whether those rights happen to be registered or not, and wherever in the world those rights may exist), whether in source code or any other form.
+
+Subject to the limited license below, you may not (and you may not permit anyone else to) distribute, publish, copy, modify, merge, combine with another program, create derivative works of, reverse engineer, decompile or otherwise attempt to extract the source code of, the Program or any part thereof, except that you may contribute to this repository.
+
+You are granted a non-exclusive, non-transferable, non-sublicensable license to distribute, publish, copy, modify, merge, combine with another program or create derivative works of the Program (such resulting program, collectively, the “Resulting Program”) solely for Non-Commercial Use as long as you:
+ 1. give prominent notice (“Notice”) with each copy of the Resulting Program that the Program is used in the Resulting Program and that the Program is the copyright of ConsenSys; and
+ 2. subject the Resulting Program and any distribution, publication, copy, modification, merger therewith, combination with another program or derivative works thereof to the same Notice requirement and Non-Commercial Use restriction set forth herein.
+
+“Non-Commercial Use” means each use as described in clauses (1)-(3) below, as reasonably determined by ConsenSys in its sole discretion: 
+ 1. personal use for research, personal study, private entertainment, hobby projects or amateur pursuits, in each case without any anticipated commercial application;
+ 2. use by any charitable organization, educational institution, public research organization, public safety or health organization, environmental protection organization or government institution; or
+ 3. the number of monthly active users of the Resulting Program across all versions thereof and platforms globally do not exceed 10,000 at any time.
+
+You will not use any trade mark, service mark, trade name, logo of ConsenSys or any other company or organization in a way that is likely or intended to cause confusion about the owner or authorized user of such marks, names or logos.
+
+If you have any questions, comments or interest in pursuing any other use cases, please reach out to us at metamask.license@consensys.net.

packages/sdk-multichain-ui/README.md

@@ -0,0 +1 @@
+# sdk-install-modal-web

packages/sdk-multichain-ui/jest-preload.js

@@ -0,0 +1,8 @@
+global.console = {
+  ...console,
+  log: jest.fn(),
+  debug: jest.fn(),
+  info: jest.fn(),
+  warn: jest.fn(),
+  error: jest.fn(),
+};

packages/sdk-multichain-ui/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@metamask/sdk-multichain-ui",
+  "version": "0.32.1",
+  "description": "MetaMask SDK Install Modal for Web",
+  "homepage": "https://github.com/MetaMask/metamask-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/MetaMask/metamask-sdk/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MetaMask/metamask-sdk.git",
+    "directory": "packages/sdk-multichain-ui"
+  },
+  "author": "MetaMask",
+  "packageManager": "yarn@3.5.0",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "collection": "dist/collection/collection-manifest.json",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "./dist"
+  ],
+  "scripts": {
+    "allow-scripts": "",
+    "generate": "stencil generate",
+    "build:types": "tsc --project tsconfig.json --emitDeclarationOnly --outDir dist/types",
+    "build:clean": "yarn clean && yarn build",
+    "dev": "stencil build --dev --watch --serve",
+    "build": "stencil build --prod",
+    "build:dev": "NODE_ENV=development stencil build --debug --dev",
+    "build:tsc": "tsc --build tsconfig.json --verbose",
+    "build:watch": "stencil build --watchAll",
+    "build:post-tsc": "echo 'N/A'",
+    "build:pre-tsc": "echo 'N/A'",
+    "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-multichain-ui",
+    "lint:eslint": "eslint . --cache --ext js,ts",
+    "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
+    "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' --ignore-path ../../.gitignore",
+    "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",
+    "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",
+    "@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",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-jsdoc": "^44.2.4",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.32.2",
+    "jest": "^29.6.4",
+    "prettier": "^2.8.8",
+    "puppeteer": "^23.8.0",
+    "rimraf": "^5.0.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "size-limit": "^11.1.6",
+    "typescript": "^5.6.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "lavamoat": {
+    "allowScripts": {
+      "webpack-dev-server>ws>bufferutil": false,
+      "webpack-dev-server>ws>utf-8-validate": false
+    }
+  },
+  "dependencies": {
+    "@paulmillr/qr": "^0.2.1",
+    "qr-code-styling": "^1.9.2"
+  }
+}

packages/sdk-multichain-ui/rollup.config.js

@@ -0,0 +1,72 @@
+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 { 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 = [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.module,
+        format: 'es',
+        sourcemap: true,
+      },
+      {
+        file: packageJson.unpkg,
+        format: 'umd',
+        exports: 'named',
+        name: 'MetaMaskSDKInstallModal',
+        sourcemap: true
+      },
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+    ],
+    external: [],
+    plugins: [
+      external(),
+      resolve({
+        browser: true,
+        extensions: ['.ts', '.tsx']
+      }),
+      commonjs(),
+      typescript({
+        tsconfigOverride: {
+          compilerOptions: {
+            importHelpers: true,
+            noEmitHelpers: true,
+          },
+        },
+        useTsconfigDeclarationDir: true,
+      }),
+      postcss({
+        extract: true,
+        plugins: [],
+        sourceMap: true,
+        modules: true,
+      }),
+      terser(),
+      isDev && visualizer({
+        filename: `bundle_stats/${packageJson.version}/stats.html`,
+        gzipSize: true,
+        brotliSize: true,
+      }),
+    ].filter(Boolean),
+  },
+];
+
+export default config;