From 1245d24abfb58e3c8d85a916307069aa792d51eb Mon Sep 17 00:00:00 2001 From: Omri Dan <61094771+omridan159@users.noreply.github.com> Date: Tue, 5 Mar 2024 14:11:20 +0000 Subject: [PATCH] feat: activate sourcemap support in all packages and resolve issues (#730) * feat: enable sourcemap in all the packages and fix bugs * fix: tests --- packages/sdk-communication-layer/package.json | 4 - .../sdk-communication-layer/rollup.config.js | 14 +- packages/sdk-install-modal-web/package.json | 11 ++ .../sdk-install-modal-web/rollup.config.js | 16 +- .../src/InstallModal.tsx | 175 ++++++++-------- .../src/PendingModal.tsx | 117 ++++++----- .../sdk-install-modal-web/src/SelectModal.tsx | 156 +++++++-------- .../src/providers/TranslationWrapper.tsx | 17 -- packages/sdk-lab/rollup.config.js | 2 +- packages/sdk-react-ui/rollup.config.js | 4 +- packages/sdk-react/package.json | 3 + packages/sdk-react/rollup.config.js | 4 +- packages/sdk-ui/rollup.config.js | 81 ++++---- packages/sdk/package.json | 10 +- packages/sdk/rollup.config.js | 33 ++-- packages/sdk/src/sdk.ts | 4 +- .../initializeI18next.test.ts | 6 - .../InitializerManager/initializeI18next.ts | 86 ++++---- yarn.lock | 187 ++---------------- 19 files changed, 378 insertions(+), 552 deletions(-) delete mode 100644 packages/sdk-install-modal-web/src/providers/TranslationWrapper.tsx diff --git a/packages/sdk-communication-layer/package.json b/packages/sdk-communication-layer/package.json index cc10438c7..e36e14eb6 100644 --- a/packages/sdk-communication-layer/package.json +++ b/packages/sdk-communication-layer/package.json @@ -57,7 +57,6 @@ "@metamask/eslint-config": "^6.0.0", "@metamask/eslint-config-nodejs": "^6.0.0", "@metamask/eslint-config-typescript": "^6.0.0", - "@rollup/plugin-alias": "^5.1.0", "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.0.2", @@ -82,14 +81,11 @@ "prettier": "^2.3.0", "rimraf": "^3.0.2", "rollup": "^3.21.7", - "rollup-plugin-buble": "^0.19.8", "rollup-plugin-jscc": "^2.0.0", "rollup-plugin-natives": "^0.7.5", "rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-node-globals": "^1.4.0", - "rollup-plugin-node-polyfills": "^0.2.1", "rollup-plugin-peer-deps-external": "^2.2.4", - "rollup-plugin-polyfill-node": "^0.13.0", "rollup-plugin-sizes": "^1.0.6", "rollup-plugin-typescript2": "^0.31.2", "rollup-plugin-visualizer": "^5.9.2", diff --git a/packages/sdk-communication-layer/rollup.config.js b/packages/sdk-communication-layer/rollup.config.js index 4ff281ca1..a1a5fcddb 100644 --- a/packages/sdk-communication-layer/rollup.config.js +++ b/packages/sdk-communication-layer/rollup.config.js @@ -46,7 +46,7 @@ const config = [ { file: packageJson.browser, format: 'es', - sourcemap: false, + sourcemap: true, }, ], plugins: [ @@ -90,13 +90,13 @@ const config = [ name: 'browser', file: packageJson.unpkg, format: 'umd', - sourcemap: false, + sourcemap: true, }, { file: 'dist/browser/iife/metamask-sdk-communication-layer.js', format: 'iife', name: 'MetaMaskSDK', - sourcemap: false, + sourcemap: true, }, ], plugins: [ @@ -129,7 +129,7 @@ const config = [ { file: packageJson['react-native'], format: 'es', - sourcemap: false, + sourcemap: true, }, ], plugins: [ @@ -161,12 +161,12 @@ const config = [ { file: packageJson.main, format: 'cjs', - sourcemap: false, + sourcemap: true, }, { file: packageJson.module, format: 'es', - sourcemap: false, + sourcemap: true, }, ], plugins: [ @@ -179,7 +179,7 @@ const config = [ // This must be set to true if using a different file extension that '.node' dlopen: false, // Generate sourcemap - sourcemap: false, + sourcemap: true, }), typescript({ tsconfig: './tsconfig.json' }), nodeResolve({ diff --git a/packages/sdk-install-modal-web/package.json b/packages/sdk-install-modal-web/package.json index bc2b48ba6..af9e9f4a3 100644 --- a/packages/sdk-install-modal-web/package.json +++ b/packages/sdk-install-modal-web/package.json @@ -93,6 +93,17 @@ "react-i18next": "^13.2.2", "react-native": "*" }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + }, "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" diff --git a/packages/sdk-install-modal-web/rollup.config.js b/packages/sdk-install-modal-web/rollup.config.js index 7a9e62fbd..55e0aa5dc 100644 --- a/packages/sdk-install-modal-web/rollup.config.js +++ b/packages/sdk-install-modal-web/rollup.config.js @@ -17,37 +17,31 @@ const packageJson = require('./package.json'); */ const config = [ { - external: [ - 'react', - 'react-dom', - 'react-native', - 'react-i18next', - 'i18next', - ], + external: ['react', 'react-dom', 'react-native', 'i18next'], input: 'src/index.ts', output: [ { file: packageJson.module, format: 'es', - sourcemap: false, + sourcemap: true, }, { name: 'browser', file: packageJson.unpkg, format: 'umd', - sourcemap: false, + sourcemap: true, }, { file: packageJson.main, format: 'cjs', - sourcemap: false, + sourcemap: true, }, ], plugins: [ external(), resolve(), commonjs(), - typescript({ sourceMap: false }), + typescript(), postcss({ // Extract CSS to the same location as the JS file extract: true, diff --git a/packages/sdk-install-modal-web/src/InstallModal.tsx b/packages/sdk-install-modal-web/src/InstallModal.tsx index 2ac314afe..4cf15b59d 100644 --- a/packages/sdk-install-modal-web/src/InstallModal.tsx +++ b/packages/sdk-install-modal-web/src/InstallModal.tsx @@ -9,7 +9,6 @@ import WalletIcon from './components/LockIcon'; import Logo from './components/Logo'; import LockIcon from './components/WalletIcon'; import { FOX_IMAGE } from './constants'; -import TranslationWrapper from './providers/TranslationWrapper'; import styles from './styles'; import SDKVersion from './components/SDKVersion'; @@ -60,102 +59,100 @@ export const InstallModal = (props: InstallModalProps) => { }, [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')} -
+
+
+ +
+
+
+
+
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, - }} - > -
-
- {t('SCAN_TO_CONNECT')}
- - {t('META_MASK_MOBILE_APP')} - -
-
+ } as CSSProperties + } + > + {t('MOBILE')}
-
-
- -
-
- -
-
- -
- - +
+
+ {t('SCAN_TO_CONNECT')}
+ + {t('META_MASK_MOBILE_APP')} + +
+
- +
+
+ +
+
+ +
+
+ +
+ + +
- - + +
+ ); }; diff --git a/packages/sdk-install-modal-web/src/PendingModal.tsx b/packages/sdk-install-modal-web/src/PendingModal.tsx index 03d514e0f..79e75b09f 100644 --- a/packages/sdk-install-modal-web/src/PendingModal.tsx +++ b/packages/sdk-install-modal-web/src/PendingModal.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { WidgetWrapper } from './WidgetWrapper'; import CloseButton from './components/CloseButton'; import Logo from './components/Logo'; -import TranslationWrapper from './providers/TranslationWrapper'; import styles from './styles'; import SDKVersion from './components/SDKVersion'; @@ -22,72 +21,70 @@ export const PendingModal = (props: PendingModalProps) => { 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')} -
- )} -
-
- + {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 index b9db1cc4a..384c79f7e 100644 --- a/packages/sdk-install-modal-web/src/SelectModal.tsx +++ b/packages/sdk-install-modal-web/src/SelectModal.tsx @@ -5,7 +5,6 @@ import CloseButton from './components/CloseButton'; import ConnectIcon from './components/ConnectIcon'; import Logo from './components/Logo'; import { MetamaskExtensionImage } from './components/MetamaskExtensionImage'; -import TranslationWrapper from './providers/TranslationWrapper'; import styles from './styles'; import SDKVersion from './components/SDKVersion'; @@ -25,98 +24,93 @@ export const SelectModal = (props: SelectModalProps) => { const t = props.i18nInstance.t; 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')} -
+
+
+ +
+
+
+
+
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, - }} - > -
-
- {t('SCAN_TO_CONNECT')} -
- - {t('META_MASK_MOBILE_APP')} - -
-
+ } as CSSProperties + } + > + {t('MOBILE')}
-
+
+
+
- -
-
- {t('SELECT_MODAL.CRYPTO_TAKE_CONTROL_TEXT')} +
+
+ {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/providers/TranslationWrapper.tsx b/packages/sdk-install-modal-web/src/providers/TranslationWrapper.tsx deleted file mode 100644 index 403537dc9..000000000 --- a/packages/sdk-install-modal-web/src/providers/TranslationWrapper.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { I18nextProvider } from 'react-i18next'; - -import { i18n } from 'i18next'; - -const TranslationWrapper = (props: { - children: React.ReactNode; - i18nInstance: i18n; -}) => { - return ( - - {props.children} - - ); -}; - -export default TranslationWrapper; diff --git a/packages/sdk-lab/rollup.config.js b/packages/sdk-lab/rollup.config.js index 0e2b71b1f..d658188e7 100644 --- a/packages/sdk-lab/rollup.config.js +++ b/packages/sdk-lab/rollup.config.js @@ -20,7 +20,7 @@ const config = [ file: packageJson.module, inlineDynamicImports: true, format: 'esm', - sourcemap: false, + sourcemap: true, sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => { // Not sure why rollup otherwise adds an extra '../' to the path diff --git a/packages/sdk-react-ui/rollup.config.js b/packages/sdk-react-ui/rollup.config.js index 296f8ae88..a1912d5f9 100644 --- a/packages/sdk-react-ui/rollup.config.js +++ b/packages/sdk-react-ui/rollup.config.js @@ -20,13 +20,13 @@ const config = [ file: packageJson.module, inlineDynamicImports: true, format: 'esm', - sourcemap: false, + sourcemap: true, }, { file: packageJson.main, inlineDynamicImports: true, format: 'cjs', - sourcemap: false, + sourcemap: true, }, ], plugins: [ diff --git a/packages/sdk-react/package.json b/packages/sdk-react/package.json index d5f863715..53c18a6a6 100644 --- a/packages/sdk-react/package.json +++ b/packages/sdk-react/package.json @@ -110,6 +110,9 @@ "react": { "optional": false }, + "react-dom": { + "optional": false + }, "react-native": { "optional": true } diff --git a/packages/sdk-react/rollup.config.js b/packages/sdk-react/rollup.config.js index 9ad25186c..da28ea6e4 100644 --- a/packages/sdk-react/rollup.config.js +++ b/packages/sdk-react/rollup.config.js @@ -19,7 +19,7 @@ const config = [ file: packageJson.module, inlineDynamicImports: true, format: 'esm', - sourcemap: false, + sourcemap: true, sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => { // Not sure why rollup otherwise adds an extra '../' to the path @@ -31,7 +31,7 @@ const config = [ file: packageJson.main, inlineDynamicImports: true, format: 'cjs', - sourcemap: false, + sourcemap: true, sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => { // Not sure why rollup otherwise adds an extra '../' to the path diff --git a/packages/sdk-ui/rollup.config.js b/packages/sdk-ui/rollup.config.js index f6ac06020..1ac279404 100644 --- a/packages/sdk-ui/rollup.config.js +++ b/packages/sdk-ui/rollup.config.js @@ -6,52 +6,53 @@ import external from 'rollup-plugin-peer-deps-external'; import json from '@rollup/plugin-json'; import image from '@rollup/plugin-image'; // import image from 'rollup-plugin-img'; -import copy from 'rollup-plugin-copy' +import copy from 'rollup-plugin-copy'; const packageJson = require('./package.json'); /** * @type {import('rollup').RollupOptions} */ -const config = - [ - { - external: ["react", "react-dom", "react-native","react-native-qrcode-svg"], - input: 'src/index.ts', - output: [ - { - file: packageJson.module, - inlineDynamicImports: false, - format: 'esm', - sourcemap: false, - sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => { - // Not sure why rollup otherwise adds an extra '../' to the path - console.log(`relativeSourcePath: ${relativeSourcePath} --> sourceMapPath: ${sourcemapPath}`) - // Adjust the path transformation logic as needed - return relativeSourcePath.replace(/^..\//, ''); - }, +const config = [ + { + external: ['react', 'react-dom', 'react-native', 'react-native-qrcode-svg'], + input: 'src/index.ts', + output: [ + { + file: packageJson.module, + inlineDynamicImports: false, + format: 'esm', + sourcemap: true, + sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => { + // Not sure why rollup otherwise adds an extra '../' to the path + console.log( + `relativeSourcePath: ${relativeSourcePath} --> sourceMapPath: ${sourcemapPath}`, + ); + // Adjust the path transformation logic as needed + return relativeSourcePath.replace(/^..\//, ''); }, - ], - plugins: [ - external(), - image(), - // copy({ - // verbose: true, - // targets: [ - // { src: 'assets/**/*', dest: 'dist/assets'}, - // // { src: ['assets/fonts/arial.woff', 'assets/fonts/arial.woff2'], dest: 'dist/public/fonts' }, - // // { src: 'assets/images/**/*', dest: 'dist/public/images' } - // ] - // }), - nodeResolve({ - browser: true, - }), - commonjs(), - typescript({ tsconfig: './tsconfig.json', allowJs: true }), - json(), - terser(), - ], - }, - ]; + }, + ], + plugins: [ + external(), + image(), + // copy({ + // verbose: true, + // targets: [ + // { src: 'assets/**/*', dest: 'dist/assets'}, + // // { src: ['assets/fonts/arial.woff', 'assets/fonts/arial.woff2'], dest: 'dist/public/fonts' }, + // // { src: 'assets/images/**/*', dest: 'dist/public/images' } + // ] + // }), + nodeResolve({ + browser: true, + }), + commonjs(), + typescript({ tsconfig: './tsconfig.json', allowJs: true }), + json(), + terser(), + ], + }, +]; export default config; diff --git a/packages/sdk/package.json b/packages/sdk/package.json index 744e9a0f6..3d9593b7e 100644 --- a/packages/sdk/package.json +++ b/packages/sdk/package.json @@ -59,11 +59,10 @@ "eventemitter2": "^6.4.7", "extension-port-stream": "^2.0.1", "i18next": "22.5.1", - "i18next-browser-languagedetector": "^7.1.0", + "i18next-browser-languagedetector": "7.1.0", "obj-multiplex": "^1.0.0", "pump": "^3.0.0", "qrcode-terminal-nooctal": "^0.12.1", - "react-i18next": "^13.2.2", "react-native-webview": "^11.26.0", "readable-stream": "^3.5.0", "rollup-plugin-visualizer": "^5.9.2", @@ -100,13 +99,13 @@ "jest-environment-jsdom": "^29.3.1", "prettier": "^2.3.0", "react": "^18.2.0", + "react-dom": "18.2.0", "rimraf": "^4.4.0", "rollup": "^3.21.7", "rollup-plugin-jscc": "^2.0.0", "rollup-plugin-natives": "^0.7.5", "rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-node-globals": "^1.4.0", - "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-polyfill-node": "^0.11.0", "rollup-plugin-sizes": "^1.0.6", "rollup-plugin-typescript2": "^0.31.2", @@ -118,13 +117,16 @@ }, "peerDependencies": { "react": "^18.2.0", - "react-dom": "18.2.0", + "react-dom": "^18.2.0", "react-native": "*" }, "peerDependenciesMeta": { "react": { "optional": true }, + "react-dom": { + "optional": true + }, "react-native": { "optional": true } diff --git a/packages/sdk/rollup.config.js b/packages/sdk/rollup.config.js index da7ebca9b..feab0f1d0 100644 --- a/packages/sdk/rollup.config.js +++ b/packages/sdk/rollup.config.js @@ -9,7 +9,6 @@ import builtins from 'rollup-plugin-node-builtins'; import globals from 'rollup-plugin-node-globals'; import { visualizer } from 'rollup-plugin-visualizer'; import sizes from 'rollup-plugin-sizes'; -import external from 'rollup-plugin-peer-deps-external'; const packageJson = require('./package.json'); @@ -21,8 +20,18 @@ const baseExternalDeps = ['@react-native-async-storage/async-storage']; // Dependencies for rollup to consider as external const listDepForRollup = [...baseExternalDeps]; -const webExternalDeps = [...listDepForRollup, 'qrcode-terminal-nooctal']; -const rnExternalDeps = [...listDepForRollup, 'qrcode-terminal-nooctal']; +const webExternalDeps = [ + ...listDepForRollup, + 'qrcode-terminal-nooctal', + 'react', + 'react-dom', +]; +const rnExternalDeps = [ + ...listDepForRollup, + 'qrcode-terminal-nooctal', + 'react', + 'react-native', +]; /** * @type {import('rollup').RollupOptions} @@ -37,11 +46,10 @@ const config = [ file: 'dist/browser/es/metamask-sdk.js', format: 'es', inlineDynamicImports: true, - sourcemap: false, + sourcemap: true, }, ], plugins: [ - external(), jscc({ values: { _WEB: 1 }, }), @@ -75,18 +83,17 @@ const config = [ file: packageJson.unpkg, inlineDynamicImports: true, format: 'umd', - sourcemap: false, + sourcemap: true, }, { file: 'dist/browser/iife/metamask-sdk.js', format: 'iife', name: 'MetaMaskSDK', inlineDynamicImports: true, - sourcemap: false, + sourcemap: true, }, ], plugins: [ - external(), jscc({ values: { _WEB: 1 }, }), @@ -117,11 +124,10 @@ const config = [ file: 'dist/react-native/es/metamask-sdk.js', format: 'es', inlineDynamicImports: true, - sourcemap: false, + sourcemap: true, }, ], plugins: [ - external(), jscc({ values: { _REACTNATIVE: 1 }, }), @@ -149,18 +155,17 @@ const config = [ { file: 'dist/node/cjs/metamask-sdk.js', format: 'cjs', - sourcemap: false, + sourcemap: true, inlineDynamicImports: true, }, { file: 'dist/node/es/metamask-sdk.js', format: 'es', - sourcemap: false, + sourcemap: true, inlineDynamicImports: true, }, ], plugins: [ - external(), jscc({ values: { _NODEJS: 1 }, }), @@ -169,7 +174,7 @@ const config = [ // This must be set to true if using a different file extension that '.node' dlopen: false, // Generate sourcemap - sourcemap: false, + sourcemap: true, }), typescript({ tsconfig: './tsconfig.json' }), nodeResolve({ diff --git a/packages/sdk/src/sdk.ts b/packages/sdk/src/sdk.ts index 4d8a5ec04..0427f39c3 100644 --- a/packages/sdk/src/sdk.ts +++ b/packages/sdk/src/sdk.ts @@ -254,7 +254,9 @@ export class MetaMaskSDK extends EventEmitter2 { this.init() .then(() => { logger(`[MetaMaskSDK: constructor()]: initialized`); - window.mmsdk = this; + if (typeof window !== 'undefined') { + window.mmsdk = this; + } }) .catch((err) => { console.error( diff --git a/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeI18next.test.ts b/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeI18next.test.ts index 4ee7c2f79..365e67fd2 100644 --- a/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeI18next.test.ts +++ b/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeI18next.test.ts @@ -1,5 +1,4 @@ import LanguageDetector from 'i18next-browser-languagedetector'; -import { initReactI18next } from 'react-i18next'; import { MetaMaskSDK } from '../../../sdk'; import { initializeI18next } from './initializeI18next'; @@ -9,10 +8,6 @@ jest.mock('i18next', () => ({ init: jest.fn(), })); -jest.mock('react-i18next', () => ({ - initReactI18next: jest.fn(), -})); - jest.mock('i18next-browser-languagedetector', () => jest.fn()); describe('initializeI18next', () => { @@ -53,7 +48,6 @@ describe('initializeI18next', () => { it('should call i18n.use and i18n.init with correct arguments', async () => { await initializeI18next(mockMetaMaskSDKInstance); - expect(mockI18nUse).toHaveBeenCalledWith(initReactI18next); expect(mockI18nUse).toHaveBeenCalledWith(LanguageDetector); expect(mockI18nInit).toHaveBeenCalledWith( expect.objectContaining({ diff --git a/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeI18next.ts b/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeI18next.ts index eaa86bdcb..f2ab08a1c 100644 --- a/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeI18next.ts +++ b/packages/sdk/src/services/MetaMaskSDK/InitializerManager/initializeI18next.ts @@ -1,5 +1,4 @@ import LanguageDetector from 'i18next-browser-languagedetector'; -import { initReactI18next } from 'react-i18next'; import en from '../../../locales/en.json'; import es from '../../../locales/es.json'; import fr from '../../../locales/fr.json'; @@ -27,51 +26,48 @@ export async function initializeI18next(instance: MetaMaskSDK) { const isEnabled = i18nOptions.enabled; - await instance.i18nInstance - .use(initReactI18next) - .use(LanguageDetector) - .init({ - debug: i18nOptions.debug ?? false, - compatibilityJSON: 'v3', - fallbackLng: 'en', - interpolation: { - escapeValue: false, - }, - resources: isEnabled - ? { - en: { - translation: en, - }, - es: { - translation: es, - }, - it: { - translation: it, - }, - fr: { - translation: fr, - }, - pt: { - translation: pt, - }, - tr: { - translation: tr, - }, - he: { - translation: he, - }, - } - : { - en: { - translation: en, - }, + await instance.i18nInstance.use(LanguageDetector).init({ + debug: i18nOptions.debug ?? false, + compatibilityJSON: 'v3', + fallbackLng: 'en', + interpolation: { + escapeValue: false, + }, + resources: isEnabled + ? { + en: { + translation: en, }, - detection: { - order: ['localStorage', 'navigator'], - lookupLocalStorage: 'MetaMaskSDKLng', - caches: ['localStorage'], - }, - }); + es: { + translation: es, + }, + it: { + translation: it, + }, + fr: { + translation: fr, + }, + pt: { + translation: pt, + }, + tr: { + translation: tr, + }, + he: { + translation: he, + }, + } + : { + en: { + translation: en, + }, + }, + detection: { + order: ['localStorage', 'navigator'], + lookupLocalStorage: 'MetaMaskSDKLng', + caches: ['localStorage'], + }, + }); instance.availableLanguages = Object.keys( instance.i18nInstance.services.resourceStore.data ?? {}, diff --git a/yarn.lock b/yarn.lock index e4f78d6ea..0477699ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7884,7 +7884,6 @@ __metadata: "@metamask/eslint-config": ^6.0.0 "@metamask/eslint-config-nodejs": ^6.0.0 "@metamask/eslint-config-typescript": ^6.0.0 - "@rollup/plugin-alias": ^5.1.0 "@rollup/plugin-commonjs": ^25.0.0 "@rollup/plugin-json": ^6.0.0 "@rollup/plugin-node-resolve": ^15.0.2 @@ -7912,14 +7911,11 @@ __metadata: prettier: ^2.3.0 rimraf: ^3.0.2 rollup: ^3.21.7 - rollup-plugin-buble: ^0.19.8 rollup-plugin-jscc: ^2.0.0 rollup-plugin-natives: ^0.7.5 rollup-plugin-node-builtins: ^2.1.2 rollup-plugin-node-globals: ^1.4.0 - rollup-plugin-node-polyfills: ^0.2.1 rollup-plugin-peer-deps-external: ^2.2.4 - rollup-plugin-polyfill-node: ^0.13.0 rollup-plugin-sizes: ^1.0.6 rollup-plugin-typescript2: ^0.31.2 rollup-plugin-visualizer: ^5.9.2 @@ -8002,6 +7998,13 @@ __metadata: react-dom: ^18.2.0 react-i18next: ^13.2.2 react-native: "*" + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + react-native: + optional: true languageName: unknown linkType: soft @@ -8178,6 +8181,8 @@ __metadata: peerDependenciesMeta: react: optional: false + react-dom: + optional: false react-native: optional: true languageName: unknown @@ -8496,7 +8501,7 @@ __metadata: eventemitter2: ^6.4.7 extension-port-stream: ^2.0.1 i18next: 22.5.1 - i18next-browser-languagedetector: ^7.1.0 + i18next-browser-languagedetector: 7.1.0 jest: ^29.3.1 jest-environment-jsdom: ^29.3.1 obj-multiplex: ^1.0.0 @@ -8504,7 +8509,7 @@ __metadata: pump: ^3.0.0 qrcode-terminal-nooctal: ^0.12.1 react: ^18.2.0 - react-i18next: ^13.2.2 + react-dom: 18.2.0 react-native-webview: ^11.26.0 readable-stream: ^3.5.0 rimraf: ^4.4.0 @@ -8513,7 +8518,6 @@ __metadata: rollup-plugin-natives: ^0.7.5 rollup-plugin-node-builtins: ^2.1.2 rollup-plugin-node-globals: ^1.4.0 - rollup-plugin-peer-deps-external: ^2.2.4 rollup-plugin-polyfill-node: ^0.11.0 rollup-plugin-sizes: ^1.0.6 rollup-plugin-typescript2: ^0.31.2 @@ -8528,11 +8532,13 @@ __metadata: uuid: ^8.3.2 peerDependencies: react: ^18.2.0 - react-dom: 18.2.0 + react-dom: ^18.2.0 react-native: "*" peerDependenciesMeta: react: optional: true + react-dom: + optional: true react-native: optional: true languageName: unknown @@ -10732,20 +10738,6 @@ __metadata: languageName: node linkType: hard -"@rollup/plugin-alias@npm:^5.1.0": - version: 5.1.0 - resolution: "@rollup/plugin-alias@npm:5.1.0" - dependencies: - slash: ^4.0.0 - peerDependencies: - rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 - peerDependenciesMeta: - rollup: - optional: true - checksum: e9f0a27b0f6f166c4c72757a2ecf23411dcc6da22ae2e020ddf30fa95526c8ab36ad372ed994dde806de4dcc47b2f1305138b953764a8f879c85fd725ac2a493 - languageName: node - linkType: hard - "@rollup/plugin-babel@npm:^5.2.0": version: 5.3.1 resolution: "@rollup/plugin-babel@npm:5.3.1" @@ -10868,22 +10860,6 @@ __metadata: languageName: node linkType: hard -"@rollup/plugin-inject@npm:^5.0.4": - version: 5.0.5 - resolution: "@rollup/plugin-inject@npm:5.0.5" - dependencies: - "@rollup/pluginutils": ^5.0.1 - estree-walker: ^2.0.2 - magic-string: ^0.30.3 - peerDependencies: - rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 - peerDependenciesMeta: - rollup: - optional: true - checksum: 22cb772fd6f7178308b2ece95cdde5f8615f6257197832166294552a7e4c0d3976dc996cbfa6470af3151d8b86c00091aa93da5f4db6ec563f11b6db29fd1b63 - languageName: node - linkType: hard - "@rollup/plugin-json@npm:^6.0.0": version: 6.0.0 resolution: "@rollup/plugin-json@npm:6.0.0" @@ -16721,15 +16697,6 @@ __metadata: languageName: node linkType: hard -"acorn-dynamic-import@npm:^4.0.0": - version: 4.0.0 - resolution: "acorn-dynamic-import@npm:4.0.0" - peerDependencies: - acorn: ^6.0.0 - checksum: ef7298e632e9d107b2be06b47d607de94d7213ca2417fced02af76b0c71e13074d98924e270c7bfec421c1049ed9001a97ed4d0f28020d9cfa1aae16ca20664a - languageName: node - linkType: hard - "acorn-globals@npm:^6.0.0": version: 6.0.0 resolution: "acorn-globals@npm:6.0.0" @@ -16759,7 +16726,7 @@ __metadata: languageName: node linkType: hard -"acorn-jsx@npm:^5.0.1, acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2": +"acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2": version: 5.3.2 resolution: "acorn-jsx@npm:5.3.2" peerDependencies: @@ -16791,15 +16758,6 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^6.1.1": - version: 6.4.2 - resolution: "acorn@npm:6.4.2" - bin: - acorn: bin/acorn - checksum: 44b07053729db7f44d28343eed32247ed56dc4a6ec6dff2b743141ecd6b861406bbc1c20bf9d4f143ea7dd08add5dc8c290582756539bc03a8db605050ce2fb4 - languageName: node - linkType: hard - "acorn@npm:^7.1.1, acorn@npm:^7.4.0, acorn@npm:^7.4.1": version: 7.4.1 resolution: "acorn@npm:7.4.1" @@ -18895,24 +18853,6 @@ __metadata: languageName: node linkType: hard -"buble@npm:^0.19.8": - version: 0.19.8 - resolution: "buble@npm:0.19.8" - dependencies: - acorn: ^6.1.1 - acorn-dynamic-import: ^4.0.0 - acorn-jsx: ^5.0.1 - chalk: ^2.4.2 - magic-string: ^0.25.3 - minimist: ^1.2.0 - os-homedir: ^2.0.0 - regexpu-core: ^4.5.4 - bin: - buble: ./bin/buble - checksum: 87d02523d4861e9e013264b2a6718e55b2a0c45cc2efe0da9ca1abcb4e17e052a1af49334b2b7527a6b1e0ba06806de0dd88d1326710bf603de07241dd2d05ee - languageName: node - linkType: hard - "buffer-alloc-unsafe@npm:^1.1.0": version: 1.1.0 resolution: "buffer-alloc-unsafe@npm:1.1.0" @@ -26706,7 +26646,7 @@ __metadata: languageName: node linkType: hard -"i18next-browser-languagedetector@npm:^7.1.0": +"i18next-browser-languagedetector@npm:7.1.0, i18next-browser-languagedetector@npm:^7.1.0": version: 7.1.0 resolution: "i18next-browser-languagedetector@npm:7.1.0" dependencies: @@ -31211,7 +31151,7 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:^0.25.0, magic-string@npm:^0.25.1, magic-string@npm:^0.25.3, magic-string@npm:^0.25.7, magic-string@npm:^0.25.9": +"magic-string@npm:^0.25.0, magic-string@npm:^0.25.1, magic-string@npm:^0.25.7, magic-string@npm:^0.25.9": version: 0.25.9 resolution: "magic-string@npm:0.25.9" dependencies: @@ -33798,13 +33738,6 @@ __metadata: languageName: node linkType: hard -"os-homedir@npm:^2.0.0": - version: 2.0.0 - resolution: "os-homedir@npm:2.0.0" - checksum: 8cdffa0f78df03e93f9f19e303bea24fab16d677d01a06af7bd439143673b2b17b931199e756b9a7524e8c87223cecd8e413352aa459e5209776eab7d2089936 - languageName: node - linkType: hard - "os-tmpdir@npm:^1.0.0, os-tmpdir@npm:~1.0.2": version: 1.0.2 resolution: "os-tmpdir@npm:1.0.2" @@ -37297,15 +37230,6 @@ __metadata: languageName: node linkType: hard -"regenerate-unicode-properties@npm:^9.0.0": - version: 9.0.0 - resolution: "regenerate-unicode-properties@npm:9.0.0" - dependencies: - regenerate: ^1.4.2 - checksum: 62df21c274259a68c6fa1373e5ddb4d6f6374ad72c08dd488b7802880bc1c3b6de716303ec56c9f793a73d01815e9d81f03a8fbe3f32bc0f7fdf8d70d4841b64 - languageName: node - linkType: hard - "regenerate@npm:^1.4.2": version: 1.4.2 resolution: "regenerate@npm:1.4.2" @@ -37381,20 +37305,6 @@ __metadata: languageName: node linkType: hard -"regexpu-core@npm:^4.5.4": - version: 4.8.0 - resolution: "regexpu-core@npm:4.8.0" - dependencies: - regenerate: ^1.4.2 - regenerate-unicode-properties: ^9.0.0 - regjsgen: ^0.5.2 - regjsparser: ^0.7.0 - unicode-match-property-ecmascript: ^2.0.0 - unicode-match-property-value-ecmascript: ^2.0.0 - checksum: df92e3e6482409f0a0de162ca1b4e17897e9b0b0687caead6804f04e9b89847e47abbfd0bfc62f52a0b833acf764ea5bdb7b707bb088034824a675ee95d31dec - languageName: node - linkType: hard - "regexpu-core@npm:^5.3.1": version: 5.3.2 resolution: "regexpu-core@npm:5.3.2" @@ -37435,24 +37345,6 @@ __metadata: languageName: node linkType: hard -"regjsgen@npm:^0.5.2": - version: 0.5.2 - resolution: "regjsgen@npm:0.5.2" - checksum: 87c83d8488affae2493a823904de1a29a1867a07433c5e1142ad749b5606c5589b305fe35bfcc0972cf5a3b0d66b1f7999009e541be39a5d42c6041c59e2fb52 - languageName: node - linkType: hard - -"regjsparser@npm:^0.7.0": - version: 0.7.0 - resolution: "regjsparser@npm:0.7.0" - dependencies: - jsesc: ~0.5.0 - bin: - regjsparser: bin/parser - checksum: fefff9adcab47650817d2c492aac774f11a44b824a4a814e466ebc76313e03e79c50d2babde7e04888296f6ec0fd094e3eeeafa8122c60184de92cdb30636a57 - languageName: node - linkType: hard - "regjsparser@npm:^0.9.1": version: 0.9.1 resolution: "regjsparser@npm:0.9.1" @@ -37885,16 +37777,6 @@ __metadata: languageName: node linkType: hard -"rollup-plugin-buble@npm:^0.19.8": - version: 0.19.8 - resolution: "rollup-plugin-buble@npm:0.19.8" - dependencies: - buble: ^0.19.8 - rollup-pluginutils: ^2.3.3 - checksum: 0affacf8b2ecf1bc0b8a70b2d2ab1def0ab79dd546957ab1564468cda21dfbb3492c572ead9a34039430b1d42c52fdd82b10a2f835d01775ffe77de4cd5d7a0d - languageName: node - linkType: hard - "rollup-plugin-copy-assets@npm:^2.0.3": version: 2.0.3 resolution: "rollup-plugin-copy-assets@npm:2.0.3" @@ -37954,17 +37836,6 @@ __metadata: languageName: node linkType: hard -"rollup-plugin-inject@npm:^3.0.0": - version: 3.0.2 - resolution: "rollup-plugin-inject@npm:3.0.2" - dependencies: - estree-walker: ^0.6.1 - magic-string: ^0.25.3 - rollup-pluginutils: ^2.8.1 - checksum: a014972c80fe34b8c8154056fa2533a8440066a31de831e3793fc21b15d108d92c22d8f7f472397bd5783d7c5e04d8cbf112fb72c5a26e997726e4eb090edad1 - languageName: node - linkType: hard - "rollup-plugin-jscc@npm:^2.0.0": version: 2.0.0 resolution: "rollup-plugin-jscc@npm:2.0.0" @@ -38016,15 +37887,6 @@ __metadata: languageName: node linkType: hard -"rollup-plugin-node-polyfills@npm:^0.2.1": - version: 0.2.1 - resolution: "rollup-plugin-node-polyfills@npm:0.2.1" - dependencies: - rollup-plugin-inject: ^3.0.0 - checksum: e84645212c443aca3cfae2ba69f01c6d8c5c250f0bf651416b69a4572b60aae9da7cdd687de3ab9b903f7a1ab96b06b71f0c4927d1b02a37485360d2b563937b - languageName: node - linkType: hard - "rollup-plugin-peer-deps-external@npm:^2.2.4": version: 2.2.4 resolution: "rollup-plugin-peer-deps-external@npm:2.2.4" @@ -38045,17 +37907,6 @@ __metadata: languageName: node linkType: hard -"rollup-plugin-polyfill-node@npm:^0.13.0": - version: 0.13.0 - resolution: "rollup-plugin-polyfill-node@npm:0.13.0" - dependencies: - "@rollup/plugin-inject": ^5.0.4 - peerDependencies: - rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0 - checksum: 73c5b9086955afa108c940c13205fab4cece149d020a3faa696c5711bbb391d11aecd4c913ad2cc5ac24f9d43a4969ad8d087d085dd8d423dece45b6be4039bb - languageName: node - linkType: hard - "rollup-plugin-postcss@npm:^4.0.2": version: 4.0.2 resolution: "rollup-plugin-postcss@npm:4.0.2" @@ -38212,7 +38063,7 @@ __metadata: languageName: node linkType: hard -"rollup-pluginutils@npm:^2.0.1, rollup-pluginutils@npm:^2.3.1, rollup-pluginutils@npm:^2.3.3, rollup-pluginutils@npm:^2.8.1, rollup-pluginutils@npm:^2.8.2": +"rollup-pluginutils@npm:^2.0.1, rollup-pluginutils@npm:^2.3.1, rollup-pluginutils@npm:^2.8.2": version: 2.8.2 resolution: "rollup-pluginutils@npm:2.8.2" dependencies: @@ -41757,7 +41608,7 @@ __metadata: languageName: node linkType: hard -"unicode-match-property-value-ecmascript@npm:^2.0.0, unicode-match-property-value-ecmascript@npm:^2.1.0": +"unicode-match-property-value-ecmascript@npm:^2.1.0": version: 2.1.0 resolution: "unicode-match-property-value-ecmascript@npm:2.1.0" checksum: 8d6f5f586b9ce1ed0e84a37df6b42fdba1317a05b5df0c249962bd5da89528771e2d149837cad11aa26bcb84c35355cb9f58a10c3d41fa3b899181ece6c85220