refactor(sdk-install-modal-web): migrate from i18next to custom Simpl…

…eI18n implementation (#1141)

* feat: migrate i18n away from sdk dependency

* refactor(sdk-install-modal-web): replace i18next with SimpleI18n implementation

- Remove i18next dependency in favor of lighter custom i18n solution
- Add SimpleI18n class for handling translations
- Update modal components to use new i18n implementation
- Improve translation loading with proper error handling

* build: optimize build configurations and add size limits

- Enable build optimizations in stencil config
- Add proper size limits for bundle tracking
- Enable file name hashing for better caching
- Add build statistics tracking
- Update size limit configurations across packages

* chore: clean up dependencies

- Remove unused react-refresh from devnext
- Remove react-native-webview direct dependency
- Update size-limit dependency version
- Clean up redundant peer dependencies

* refactor(sdk): improve code organization and error handling

- Refactor ModalLoader class for better maintainability
- Add proper error handling for modal rendering
- Improve mobile port stream documentation
- Update rollup config with better bundle visualization
- Remove debug console logs
- Add type improvements

* feat: remove i18n temporarily

* build: lazy loading but esm error

* feat: working state but still included in bundle

* feat: add browser language detection and dynamic translation loading

Implemented browser language detection and dynamic loading of translations from a remote URL. Removed hardcoded locale files and updated the SimpleI18n class to handle supported locales and fallback mechanisms.

* feat: fully working simple i18n

* chore: cleanup

* chore: cleanup

* fix: unit tests

* fix: types export

* chore: nodenv conf

* chore: reset sdk version

* fix: build wip

* feat: move global types

* fix: build issues

* fix: sdk react unit tests

packages/devnext/next.config.js

@@ -33,13 +33,27 @@ const nextConfig = withExpo({
   experimental: {
     forceSwcTransforms: true,
   },
-  webpack: (config) => {
+  webpack: (config, { dev, isServer }) => {
     config.resolve = {
       ...config.resolve,
       symlinks: false, // tells webpack to follow the real path of symlinked module instead of the symlink path itself
+      fallback: {
+        ...config.resolve.fallback,
+        stream: require.resolve('stream-browserify'),
+        crypto: require.resolve('crypto-browserify'),
+        http: require.resolve('stream-http'),
+        https: require.resolve('https-browserify'),
+        os: require.resolve('os-browserify/browser'),
+        path: require.resolve('path-browserify'),
+        zlib: require.resolve('browserify-zlib'),
+      },
       alias: {
         ...config.resolve.alias,
         // Make sure the react version used is from our node_modules
+        '@babel/runtime': path.resolve(
+          __dirname,
+          './node_modules/@babel/runtime',
+        ),
         react: path.resolve(__dirname, './node_modules/react'),
         'react-native$': require.resolve('react-native-web'),
         // 'expo-asset': path.resolve(__dirname, './node_modules/expo-asset'),
@@ -62,6 +76,36 @@ const nextConfig = withExpo({
         ),
       },
     };
+
+    // Disable caching for development
+    config.cache = {
+      type: 'filesystem',
+      buildDependencies: {
+        config: [__filename],
+      },
+      cacheDirectory: path.resolve(__dirname, '.next/cache/webpack'),
+      // Only cache node_modules except for sdk-install-modal-web
+      managedPaths: [
+        // Include all node_modules except sdk-install-modal-web
+        path.resolve(__dirname, 'node_modules'),
+      ],
+      // Exclude the sdk package from caching using version check
+      version: `${
+        require('@metamask/sdk-install-modal-web/package.json').version
+      }-${Date.now()}`,
+    };
+
+    // Add watch options to detect changes
+    config.watchOptions = {
+      aggregateTimeout: 300,
+      poll: 1000,
+      ignored: [
+        '**/.git/**',
+        '**/node_modules/**',
+        '!**/node_modules/@metamask/sdk-install-modal-web/**',
+      ],
+    };
+
     config.module.rules.push(
       {
         test: /\.(js|jsx)$/,
@@ -127,6 +171,41 @@ const nextConfig = withExpo({
       },
     );
 
+    // Find the rule that handles JavaScript files
+    const jsRule = config.module.rules.find(
+      (rule) => rule.test && rule.test.test('.js'),
+    );
+
+    if (jsRule) {
+      // Include @babel/runtime in the Babel loader
+      jsRule.include = [
+        ...(Array.isArray(jsRule.include)
+          ? jsRule.include
+          : [jsRule.include]
+        ).filter(Boolean),
+        path.resolve(__dirname, 'node_modules/@babel/runtime'),
+      ];
+    }
+
+    // Add the babel-plugin-transform-import-meta to the loader options
+    config.module.rules.forEach((rule) => {
+      if (rule.use) {
+        const use = Array.isArray(rule.use) ? rule.use : [rule.use];
+        use.forEach((loader) => {
+          if (
+            typeof loader === 'object' &&
+            loader.loader &&
+            loader.loader.includes('babel-loader') &&
+            loader.options
+          ) {            loader.options.plugins = [
+              ...(loader.options.plugins || []),
+              'babel-plugin-transform-import-meta',
+            ];
+          }
+        });
+      }
+    });
+
     // write config to disk for debugging
     fs.writeFileSync(
       './next.webpack.config.json',

packages/devnext/package.json

@@ -16,7 +16,6 @@
     "prepack": "../../scripts/prepack.sh"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
@@ -63,27 +62,40 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
     "@babel/preset-flow": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.26.0",
     "@expo/next-adapter": "^5.0.2",
     "@lavamoat/allow-scripts": "^2.3.1",
     "@svgr/webpack": "^8.1.0",
     "@types/eslint": "^8",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
+    "assert": "^2.1.0",
     "autoprefixer": "^10.4.16",
     "babel-loader": "^9.1.3",
     "babel-plugin-react-native-web": "^0.19.12",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-preset-expo": "^9.5.2",
+    "browserify-zlib": "^0.2.0",
+    "crypto-browserify": "^3.12.1",
     "eslint": "^8.53.0",
     "eslint-config-next": "13.2.4",
     "expo": "^49.0.18",
+    "https-browserify": "^1.0.0",
     "jest": "^29.6.4",
     "next": "13.2.4",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
-    "tailwindcss": "^3.3.5"
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "tailwindcss": "^3.3.5",
+    "url": "^0.11.4"
   }
 }

packages/devnext/tsconfig.json

@@ -38,13 +38,16 @@
       "@metamask/sdk": [
         "../sdk/src"
       ],
-      "react": ["./node_modules/@types/react"]
+      "react": [
+        "./node_modules/@types/react"
+      ]
     }
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx" ],
+    "**/*.tsx"
+  ],
   "exclude": [
     "node_modules"
   ],

packages/sdk-install-modal-web/.size-limit.json

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

packages/sdk-install-modal-web/package.json

@@ -13,37 +13,20 @@
   },
   "author": "MetaMask",
   "packageManager": "[email protected]",
-  "main": "dist/components/index.js",
-  "module": "dist/components/index.js",
-  "types": "dist/components/index.d.ts",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "collection": "dist/collection/collection-manifest.json",
+  "types": "dist/types/index.d.ts",
   "files": [
     "./dist"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/components/index.js",
-      "types": "./dist/components/index.d.ts"
-    },
-    "./components/mm-install-modal": {
-      "import": "./dist/components/mm-install-modal.js",
-      "types": "./dist/components/mm-install-modal.d.ts"
-    },
-    "./components/mm-pending-modal": {
-      "import": "./dist/components/mm-pending-modal.js",
-      "types": "./dist/components/mm-pending-modal.d.ts"
-    },
-    "./components/mm-select-modal": {
-      "import": "./dist/components/mm-select-modal.js",
-      "types": "./dist/components/mm-select-modal.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: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'",
@@ -84,17 +67,14 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.32.2",
-    "i18next": "23.11.5",
     "jest": "^29.6.4",
     "prettier": "^2.8.8",
     "puppeteer": "^23.8.0",
     "rimraf": "^5.0.0",
-    "size-limit": "^11.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "size-limit": "^11.1.6",
     "typescript": "^5.6.3"
   },
-  "peerDependencies": {
-    "i18next": "23.11.5"
-  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

packages/sdk-install-modal-web/rollup.config.js

@@ -28,15 +28,7 @@ const config = [
         format: 'umd',
         exports: 'named',
         name: 'MetaMaskSDKInstallModal',
-        sourcemap: true,
-        globals: {
-          'react': 'React',
-          'react-dom': 'ReactDOM',
-          'react-dom/client': 'ReactDOM.createRoot',
-          'react-native': 'ReactNative',
-          'i18next': 'i18next',
-          'tslib': 'tslib'
-        }
+        sourcemap: true
       },
       {
         file: packageJson.main,
@@ -45,12 +37,6 @@ const config = [
       },
     ],
     external: [
-      'react',
-      'react-dom',
-      'react-dom/client',
-      'react-native',
-      'i18next',
-      'tslib',
       external(),
     ],
     plugins: [

packages/sdk-install-modal-web/src/components.d.ts

@@ -5,11 +5,8 @@
  * 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
          */
@@ -22,12 +19,10 @@ export namespace Components {
           * The QR code link
          */
         "displayOTP"?: boolean;
-        "i18nInstance": i18n;
         "otpCode"?: string;
         "sdkVersion"?: string;
     }
     interface MmSelectModal {
-        "i18nInstance": i18n;
         /**
           * The QR code link
          */
@@ -111,7 +106,6 @@ declare global {
 }
 declare namespace LocalJSX {
     interface MmInstallModal {
-        "i18nInstance"?: i18n;
         /**
           * The QR code link
          */
@@ -126,15 +120,13 @@ declare namespace LocalJSX {
           * The QR code link
          */
         "displayOTP"?: boolean;
-        "i18nInstance"?: i18n;
         "onClose"?: (event: MmPendingModalCustomEvent<any>) => void;
         "onDisconnect"?: (event: MmPendingModalCustomEvent<any>) => void;
         "onUpdateOTPValue"?: (event: MmPendingModalCustomEvent<{ otpValue: string }>) => void;
         "otpCode"?: string;
         "sdkVersion"?: string;
     }
     interface MmSelectModal {
-        "i18nInstance"?: i18n;
         /**
           * The QR code link
          */