feat: activate sourcemap support in all packages and resolve issues (#…

…730) * feat: enable sourcemap in all the packages and fix bugs * fix: tests
MetaMask · Mar 5, 2024 · 1245d24 · 1245d24
1 parent 4ecc000
commit 1245d24
Show file tree

Hide file tree

Showing 19 changed files with 378 additions and 552 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
-    <TranslationWrapper i18nInstance={props.i18nInstance}>
-      <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>
+    <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 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 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>
-            <div style={{ display: tab === 1 ? 'none' : 'block' }}>
-              <div style={styles.flexContainer}>
-                <div
-                  style={{
-                    textAlign: 'center',
-                    marginTop: 4,
+              <div
+                onClick={() => setTab(2)}
+                style={
+                  {
+                    ...styles.tab,
+                    ...(tab === 2 ? styles.tabactive : {}),
                     ...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>
+                  } as CSSProperties
+                }
+              >
+                {t('MOBILE')}
               </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}
+          </div>
+          <div style={{ display: tab === 1 ? 'none' : 'block' }}>
+            <div style={styles.flexContainer}>
+              <div
+                style={{
+                  textAlign: 'center',
+                  marginTop: 4,
+                  ...styles.flexItem,
+                }}
               >
-                <InstallIcon />
-                <span style={styles.installExtensionText}>
-                  {t('INSTALL_MODAL.INSTALL_META_MASK_EXTENSION')}
-                </span>
-              </button>
+                <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>
-          <SDKVersion version={sdkVersion} />
+          <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>
-      </WidgetWrapper>
-    </TranslationWrapper>
+        <SDKVersion version={sdkVersion} />
+      </div>
+    </WidgetWrapper>
   );
 };