Add empty loader for image files (#1216)

package.json

@@ -32,7 +32,7 @@
     "lint": "polkadot-dev-run-lint",
     "postinstall": "polkadot-dev-yarn-only",
     "start": "yarn watch",
-    "test": "EXTENSION_PREFIX='test' polkadot-dev-run-test --env browser ^:.spec.tsx",
+    "test": "EXTENSION_PREFIX='test' polkadot-dev-run-test --loader ./packages/extension-mocks/src/loader-empty.js --env browser ^:.spec.tsx",
     "test:one": "EXTENSION_PREFIX='test' polkadot-dev-run-test --env browser",
     "watch": "cd packages/extension && yarn polkadot-exec-webpack --config webpack.watch.cjs --mode development --watch"
   },

packages/extension-mocks/src/empty.js

@@ -0,0 +1,4 @@
+// Copyright 2019-2023 @polkadot/extension-mocks authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export default '';

packages/extension-mocks/src/loader-empty.js

@@ -0,0 +1,21 @@
+// Copyright 2019-2023 @polkadot/extension-mocks authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import path from 'node:path';
+import process from 'node:process';
+import { pathToFileURL } from 'node:url';
+
+// Adjusts the resolver to point to empty files for .svg
+export function resolve (specifier, context, nextResolve) {
+  if (/\.(png|svg)$/.test(specifier)) {
+    return {
+      format: 'module',
+      shortCircuit: true,
+      url: pathToFileURL(
+        path.join(process.cwd(), 'packages/extension-mocks/src/empty.js')
+      ).href
+    };
+  }
+
+  return nextResolve(specifier, context);
+}

packages/extension-ui/src/Popup/Export.tsx

@@ -3,7 +3,7 @@
 
 import type { ThemeProps } from '../types';
 
-import { saveAs } from 'file-saver';
+import fileSaver from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
@@ -46,7 +46,8 @@ function Export ({ className, match: { params: { address } } }: Props): React.Re
         .then(({ exportedJson }) => {
           const blob = new Blob([JSON.stringify(exportedJson)], { type: 'application/json; charset=utf-8' });
 
-          saveAs(blob, `${address}.json`);
+          // eslint-disable-next-line deprecation/deprecation
+          fileSaver.saveAs(blob, `${address}.json`);
 
           onAction('/');
         })

packages/extension-ui/src/Popup/ExportAll.tsx

@@ -3,7 +3,7 @@
 
 import type { ThemeProps } from '../types';
 
-import { saveAs } from 'file-saver';
+import fileSaver from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
@@ -47,7 +47,8 @@ function ExportAll ({ className }: Props): React.ReactElement<Props> {
         .then(({ exportedJson }) => {
           const blob = new Blob([JSON.stringify(exportedJson)], { type: 'application/json; charset=utf-8' });
 
-          saveAs(blob, `batch_exported_account_${Date.now()}.json`);
+          // eslint-disable-next-line deprecation/deprecation
+          fileSaver.saveAs(blob, `batch_exported_account_${Date.now()}.json`);
 
           onAction('/');
         })

packages/extension-ui/src/components/TextInputs.ts

@@ -3,7 +3,9 @@
 
 import type { ThemeProps } from '../types';
 
-import styled, { css } from 'styled-components';
+import { css } from 'styled-components';
+
+import { styled } from '../styled';
 
 interface Props extends ThemeProps {
   withError?: boolean;

packages/extension-ui/src/partials/MenuSettings.tsx

@@ -5,7 +5,7 @@ import type { Theme, ThemeProps } from '../types';
 
 import { faExpand, faTasks } from '@fortawesome/free-solid-svg-icons';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import styled, { ThemeContext } from 'styled-components';
+import { ThemeContext } from 'styled-components';
 
 import settings from '@polkadot/ui-settings';
 
@@ -13,6 +13,7 @@ import { ActionContext, ActionText, Checkbox, Dropdown, Menu, MenuDivider, MenuI
 import useIsPopup from '../hooks/useIsPopup';
 import useTranslation from '../hooks/useTranslation';
 import { setNotification, windowOpen } from '../messaging';
+import { styled } from '../styled';
 import getLanguageOptions from '../util/getLanguageOptions';
 
 interface Option {