refactor: replace qr-code-styling with smaller library (#1129)

ecp4224 · web-flow · commit 02ed9491c8bf · 2024-11-20T10:31:03.000+08:00
* chore: replace qrcode lib

* chore: clean up

* chore: style css + fixed loader

* chore: remove references of qrcode-terminal-nooctal

* fix: tests

* chore: lint
diff --git a/packages/examples/nodejs/package.json b/packages/examples/nodejs/package.json
@@ -15,8 +15,7 @@
     "allow-scripts": "echo 'n/a'"
   },
   "dependencies": {
-    "@metamask/sdk": "^0.30.0",
-    "qrcode-terminal": "^0.12.0"
+    "@metamask/sdk": "^0.30.0"
   },
   "devDependencies": {
     "@types/node": "^20.4.1",
diff --git a/packages/examples/nodejs/src/index.ts b/packages/examples/nodejs/src/index.ts
@@ -1,36 +1,10 @@
 import { MetaMaskSDK, MetaMaskSDKOptions, SDKProvider } from '@metamask/sdk';
-import * as fs from 'fs';
-
-const qrcode = require('qrcode-terminal');
 
 const options: MetaMaskSDKOptions = {
   shouldShimWeb3: false,
-  communicationServerUrl: 'http://192.168.50.10:4000',
   dappMetadata: {
     name: 'NodeJS example',
-  },
-  logging: {
-    sdk: false,
-  },
-  checkInstallationImmediately: false,
-  // Optional: customize modal text
-  modals: {
-    install: ({ link }) => {
-      qrcode.generate(link, { small: true }, (qr) => console.log(qr));
-      return {};
-    },
-    otp: () => {
-      return {
-        mount() {},
-        updateOTPValue: (otpValue) => {
-          if (otpValue !== '') {
-            console.debug(
-              `[CUSTOMIZE TEXT] Choose the following value on your metamask mobile wallet: ${otpValue}`,
-            );
-          }
-        },
-      };
-    },
+    url: 'http://localhost',
   },
 };
 
diff --git a/packages/examples/nodejs/yarn.lock b/packages/examples/nodejs/yarn.lock
@@ -2554,4 +2554,4 @@ __metadata:
   resolution: "yn@npm:3.1.1"
   checksum: 2c487b0e149e746ef48cda9f8bad10fc83693cd69d7f9dcd8be4214e985de33a29c9e24f3c0d6bcf2288427040a8947406ab27f7af67ee9456e6b84854f02dd6
   languageName: node
-  linkType: hard
+  linkType: hard
diff --git a/packages/sdk-install-modal-web/package.json b/packages/sdk-install-modal-web/package.json
@@ -47,9 +47,6 @@
     "preversion": "yarn test",
     "postversion": "git push --tags && yarn publish . --tag $npm_package_version && git push && echo \"Successfully released version $npm_package_version!\""
   },
-  "dependencies": {
-    "qr-code-styling": "^1.8.4"
-  },
   "devDependencies": {
     "@lavamoat/allow-scripts": "^2.3.1",
     "@metamask/auto-changelog": "3.1.0",
@@ -113,5 +110,8 @@
       "webpack-dev-server>ws>bufferutil": false,
       "webpack-dev-server>ws>utf-8-validate": false
     }
+  },
+  "dependencies": {
+    "@paulmillr/qr": "^0.2.1"
   }
 }
diff --git a/packages/sdk-install-modal-web/src/InstallModal.tsx b/packages/sdk-install-modal-web/src/InstallModal.tsx
@@ -8,9 +8,9 @@ import InstallIcon from './components/InstallIcon';
 import WalletIcon from './components/LockIcon';
 import Logo from './components/Logo';
 import LockIcon from './components/WalletIcon';
-import { FOX_IMAGE } from './constants';
 import styles from './styles';
 import SDKVersion from './components/SDKVersion';
+import encodeQR from '@paulmillr/qr';
 
 export interface InstallModalProps {
   onClose: () => void;
@@ -32,30 +32,11 @@ export const InstallModal = (props: InstallModalProps) => {
 
   useEffect(() => {
     if (qrCodeContainer.current) {
-      // Prevent nextjs import issue: https://github.com/kozakdenys/qr-code-styling/issues/38
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const QRCodeStyling = require('qr-code-styling');
-      const qrCode = new QRCodeStyling({
-        width: 270,
-        height: 270,
-        type: 'svg',
-        data: props.link,
-        image: FOX_IMAGE,
-        dotsOptions: {
-          color: 'black',
-          type: 'rounded',
-        },
-        imageOptions: {
-          margin: 5,
-        },
-        cornersDotOptions: {
-          color: '#f66a07',
-        },
-        qrOptions: {
-          errorCorrectionLevel: 'M',
-        },
-      });
-      qrCode.append(qrCodeContainer.current);
+      const svgElement = encodeQR(props.link, "svg", {
+        ecc: "medium",
+        scale: 2
+      })
+      qrCodeContainer.current.innerHTML = svgElement
     }
   }, [qrCodeContainer]);
 
diff --git a/packages/sdk-install-modal-web/src/ModalLoader.tsx b/packages/sdk-install-modal-web/src/ModalLoader.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { FOX_IMAGE } from './constants';
 
 import { InstallModal, InstallModalProps } from './InstallModal';
 import { PendingModal, PendingModalProps } from './PendingModal';
 import { SelectModal, SelectModalProps } from './SelectModal';
+import encodeQR from '@paulmillr/qr';
 
 export interface InstallWidgetProps extends InstallModalProps {
   parentElement: Element;
@@ -131,31 +131,12 @@ export class ModalLoader {
       document.getElementById('sdk-qrcode-container');
     if (qrCodeNode) {
       qrCodeNode.innerHTML = '';
-      // Prevent nextjs import issue: https://github.com/kozakdenys/qr-code-styling/issues/38
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const QRCodeStyling = require('qr-code-styling');
-      // Prevent nextjs import issue
-      const qrCode = new QRCodeStyling({
-        width: 270,
-        height: 270,
-        type: 'svg',
-        data: link,
-        image: FOX_IMAGE,
-        dotsOptions: {
-          color: 'black',
-          type: 'rounded',
-        },
-        imageOptions: {
-          margin: 5,
-        },
-        cornersDotOptions: {
-          color: '#f66a07',
-        },
-        qrOptions: {
-          errorCorrectionLevel: 'M',
-        },
-      });
-      qrCode.append(qrCodeNode);
+
+      const svgElement = encodeQR(link, "svg", {
+        ecc: "medium",
+        scale: 2,
+      })
+      qrCodeNode.innerHTML = svgElement
     }
   };
 
diff --git a/packages/sdk-install-modal-web/src/constants.ts b/packages/sdk-install-modal-web/src/constants.ts
diff --git a/packages/sdk-install-modal-web/src/resetStyles.css b/packages/sdk-install-modal-web/src/resetStyles.css
@@ -128,3 +128,9 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
+#sdk-mm-qrcode {
+  svg {
+      width: 50%;
+  }
+}
diff --git a/packages/sdk-react-native/rollup.config.js b/packages/sdk-react-native/rollup.config.js
@@ -20,7 +20,7 @@ const listDepForRollup = [...baseExternalDeps];
 
 const rnExternalDeps = [
     ...listDepForRollup,
-    'qrcode-terminal-nooctal',
+    '@paulmillr/qr',
     'react',
     'react-native',
 ];
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
@@ -61,6 +61,7 @@
     "@metamask/providers": "16.1.0",
     "@metamask/sdk-communication-layer": "workspace:*",
     "@metamask/sdk-install-modal-web": "workspace:*",
+    "@paulmillr/qr": "^0.2.1",
     "bowser": "^2.9.0",
     "cross-fetch": "^4.0.0",
     "debug": "^4.3.4",
@@ -71,7 +72,6 @@
     "i18next-browser-languagedetector": "7.1.0",
     "obj-multiplex": "^1.0.0",
     "pump": "^3.0.0",
-    "qrcode-terminal-nooctal": "^0.12.1",
     "react-native-webview": "^11.26.0",
     "readable-stream": "^3.6.2",
     "socket.io-client": "^4.5.1",
diff --git a/packages/sdk/rollup.config.js b/packages/sdk/rollup.config.js
@@ -24,7 +24,7 @@ const dependencies = Object.keys(packageJson.dependencies || {});
 const bundledDeps = [
   // '@metamask/sdk-communication-layer',
   // '@metamask/sdk-install-modal-web',
-  'qr-code-styling',
+  '@paulmillr/qr',
   // Add other dependencies that should be bundled
 ];
 
@@ -45,11 +45,11 @@ const baseExternalDeps = [
 ];
 
 // Platform-specific externals
-const webExternalDeps = [...baseExternalDeps, 'qrcode-terminal-nooctal'].filter(
+const webExternalDeps = [...baseExternalDeps,].filter(
   excludeBundledDeps,
 );
 
-const rnExternalDeps = [...baseExternalDeps, 'qrcode-terminal-nooctal'].filter(
+const rnExternalDeps = [...baseExternalDeps,].filter(
   excludeBundledDeps,
 );
 
diff --git a/packages/sdk/src/types/globals.d.ts b/packages/sdk/src/types/globals.d.ts
@@ -1 +1 @@
-declare module 'qrcode-terminal-nooctal';
+declare module '@paulmillr/qr';
diff --git a/packages/sdk/src/ui/InstallModal/InstallModal-nodejs.test.ts b/packages/sdk/src/ui/InstallModal/InstallModal-nodejs.test.ts
@@ -1,15 +1,13 @@
-import { generate } from 'qrcode-terminal-nooctal';
+import encodeQR from '@paulmillr/qr';
 import * as loggerModule from '../../utils/logger';
 import InstallModal from './InstallModal-nodejs';
 
-jest.mock('qrcode-terminal-nooctal', () => ({
-  generate: jest.fn((_, __, callback) => callback('Mocked QR Code')),
-}));
+jest.mock('@paulmillr/qr', () => jest.fn((_, __) => 'Mocked QR Code'));
 
 describe('InstallModal-nodejs', () => {
   const spyLogger = jest.spyOn(loggerModule, 'logger');
 
-  const mockGenerate = generate as jest.Mock;
+  const mockGenerate = encodeQR as jest.Mock;
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -27,11 +25,7 @@ describe('InstallModal-nodejs', () => {
 
     InstallModal({ link: mockLink });
 
-    expect(mockGenerate).toHaveBeenCalledWith(
-      mockLink,
-      { small: true },
-      expect.any(Function),
-    );
+    expect(mockGenerate).toHaveBeenCalledWith(mockLink, 'ascii');
   });
 
   it('should log the QR code link', () => {
diff --git a/packages/sdk/src/ui/InstallModal/InstallModal-nodejs.ts b/packages/sdk/src/ui/InstallModal/InstallModal-nodejs.ts
@@ -1,10 +1,9 @@
+import encodeQR from '@paulmillr/qr';
 import { logger } from '../../utils/logger';
 
-// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-const qrcode = require('qrcode-terminal-nooctal');
-
 const InstallModal = ({ link }: { link: string; debug?: boolean }) => {
-  qrcode.generate(link, { small: true }, (qr: unknown) => console.log(qr));
+  const qr = encodeQR(link, 'ascii');
+  console.log(qr);
   logger(`[UI: InstallModal-nodejs()] qrcode url: ${link}`);
   return {
     unmount: () => undefined,
diff --git a/yarn.lock b/yarn.lock
@@ -9982,6 +9982,7 @@ __metadata:
   dependencies:
     "@lavamoat/allow-scripts": ^2.3.1
     "@metamask/auto-changelog": 3.1.0
+    "@paulmillr/qr": ^0.2.1
     "@rollup/plugin-commonjs": ^25.0.7
     "@rollup/plugin-node-resolve": ^15.0.2
     "@rollup/plugin-terser": ^0.4.1
@@ -10004,7 +10005,6 @@ __metadata:
     jest: ^29.6.4
     postcss: ^8.4.35
     prettier: ^2.8.8
-    qr-code-styling: ^1.8.4
     react: ^18.2.0
     react-dom: ^18.2.0
     rimraf: ^5.0.0
@@ -10540,6 +10540,7 @@ __metadata:
     "@metamask/providers": 16.1.0
     "@metamask/sdk-communication-layer": "workspace:*"
     "@metamask/sdk-install-modal-web": "workspace:*"
+    "@paulmillr/qr": ^0.2.1
     "@react-native-async-storage/async-storage": ^1.19.6
     "@rollup/plugin-alias": ^5.1.1
     "@rollup/plugin-commonjs": ^25.0.7
@@ -10580,7 +10581,6 @@ __metadata:
     prettier: ^2.3.0
     process: ^0.11.10
     pump: ^3.0.0
-    qrcode-terminal-nooctal: ^0.12.1
     react: ^18.2.0
     react-dom: 18.2.0
     react-native-webview: ^11.26.0
@@ -11403,6 +11403,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@paulmillr/qr@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "@paulmillr/qr@npm:0.2.1"
+  checksum: 8a7b882f74f472759b0e5911c9c902a29c5232609373af4c5775625d9aad4ebda635d84c25be27e694144ba73d8e4204e72c3b9b59e9a375ec1d19f034a2d2ad
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -42036,16 +42043,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qr-code-styling@npm:^1.8.4":
-  version: 1.8.4
-  resolution: "qr-code-styling@npm:1.8.4"
-  dependencies:
-    qrcode-generator: ^1.4.4
-  checksum: 755c5dfd242d1e3ac01de39453664eb554030226ca74d9ea68a421ac1c12f204a60aef4714b473c6a1a85ef1222c3deb77bdc4bed9554c5af700133e08f25602
-  languageName: node
-  linkType: hard
-
-"qrcode-generator@npm:^1.4.3, qrcode-generator@npm:^1.4.4":
+"qrcode-generator@npm:^1.4.3":
   version: 1.4.4
   resolution: "qrcode-generator@npm:1.4.4"
   checksum: 860cfdd2a7a608d34e92cab99774cc08182e1911432f30ed36d16f8a5cdabd7fdf40239caed91fa2691cfe66c8d95c1340a2fc9cc439eed07a9f2eb328c6f527

Original file line number	Diff line number	Diff line change
`@@ -47,9 +47,6 @@`
`47`	`47`	`"preversion": "yarn test",`
`48`	`48`	`"postversion": "git push --tags && yarn publish . --tag $npm_package_version && git push && echo \"Successfully released version $npm_package_version!\""`
`49`	`49`	`},`
`50`		`- "dependencies": {`
`51`		`- "qr-code-styling": "^1.8.4"`
`52`		`- },`
`53`	`50`	`"devDependencies": {`
`54`	`51`	`"@lavamoat/allow-scripts": "^2.3.1",`
`55`	`52`	`"@metamask/auto-changelog": "3.1.0",`
`@@ -113,5 +110,8 @@`
`113`	`110`	`"webpack-dev-server>ws>bufferutil": false,`
`114`	`111`	`"webpack-dev-server>ws>utf-8-validate": false`
`115`	`112`	`}`
	`113`	`+ },`
	`114`	`+ "dependencies": {`
	`115`	`+ "@paulmillr/qr": "^0.2.1"`
`116`	`116`	`}`
`117`	`117`	`}`