V8.4.0 (#698)

* ♻️ refactor(InitPage): Remove unnecessary localStorage clear and simplify dispatch calls

* 🏗️ build: 升级依赖包版本

* ♻️ refactor: 移除本地存储迁移逻辑

* 🏗️ build: 更新 package.json 中的依赖版本

* 🏗️ build: 更新 electron-vite 配置和依赖版本

* 🔁 ci: 更新 pnpm 动作版本至 v4

* 🔁 ci: 更新 pnpm 动作版本至 v4

* ♻️ refactor(package): 更新依赖包版本

-更新 babel-plugin-react-compiler 版本为 19.0.0-beta-a7bf2bd-20241110
-更新 react 和 react-dom 版本为 19.0.0-rc-b01722d5-20241114

* ✨ chore(deps): update dependencies

- 更新以下依赖包至最新版本：
- 【@types/react】
- 【@types/react-dom】
- 【@vitejs/plugin-react】
- 【@vitejs/plugin-react-swc】
- 【antd】
- 【babel-plugin-react-compiler】
- 【electron】
- 【generate-react-cli】
- 【react】
- 【react-dom】
- 【react-router-dom】
- 【sass】
- 【sortablejs】
- 【typescript】
- 【vite】
- 【electron-log】
- 【undici】

* ✨ chore(deps): update sass and related styles

- 将sass升级到sass-embedded，移除sass-loader
- 更新并移动样式文件，优化项目结构
- 从组件中移除多余的样式导入，简化代码
- 更新antd样式导入方式，提升性能

💄 style(renderer): adjust stylesheet import

- 将所有scss样式文件合并到app.scss中，简化样式管理
- 更新antd样式导入方式，使用dist/reset.css，并删除多余的全局样式
- 更新所有scss文件导入路径，优化可维护性
- 将组件内样式导入移动到app.tsx，使样式管理集中化

* ✨ chore(package): improve dev environment configuration

- 细化 devEngines 配置，明确指定 node 和 npm 版本及失败处理方式
-  【node】 使用 runtime 字段指定版本及错误处理
-  【npm】 使用 packageManager 字段指定版本及错误处理
-  【onFail】 设置为 error，确保在不满足版本要求时报错，防止潜在问题

* 🐛 fix(io): 修复保存图片时可能出现的错误

- 将Buffer转换为Uint8Array，解决写入文件时可能出现的类型不兼容问题
- 提升了代码的健壮性和稳定性

* ✨ feat(dependencies): update dependencies and refactor worker usage

- 更新了 `vite`、`comlink` 等依赖
- 使用 `Comlink` 重构了 Worker 的使用方式，提高了性能和代码可维护性
- 移除 `promise-worker` 依赖，优化项目体积【依赖更新】
- 将搜索功能相关代码迁移到 Worker 线程中，提升了主线程性能【性能优化】
- 使用 Comlink 替换 PromiseWorker，优化代码结构和可读性【代码重构】

* ♻️ refactor(utils): 优化静态资源导入

- 将 import.meta.url 赋值给 metaUrl 变量，提高代码可读性
- 使用 metaUrl 变量替换 ImportStatic 函数中的 import.meta.url，避免重复代码

* ✨ feat(renderer): 移除首页组件的懒加载

* Revert "✨ feat(renderer): 移除首页组件的懒加载"

This reverts commit 35a527b.

* Revert "♻️ refactor(utils): 优化静态资源导入"

This reverts commit d738003.

* 📦 chore: 重构静态资源路径

- 将所有静态资源文件从 `src/renderer/static` 移动到 `src/renderer/public` 目录下。
- 更新所有组件中引用静态资源文件的路径，使其指向新的 `public` 目录。
- 删除 `Utils.ImportStatic` 方法，因为它不再需要。
- 更新钱包图标的加载方式，使用新的路径。
-【修改】调整图片引用路径
-【修改】调整二维码图片路径
-【修改】调整钱包图片路径
-【修改】调整icon图片路径
-【删除】删除无用函数ImportStatic

* ✨ refactor(wallet): 优化钱包图标路径

- 将钱包图标文件从 `public/wallet` 目录移动到 `static/wallet` 目录【文件移动】
- 更新 `walletIcons` 数组，使用 `import.meta.url` 获取正确的图标路径【代码修改】
- 确保所有钱包图标都能正确加载【功能增强】

* ✨ chore(package): 更新依赖包

- 更新了以下依赖包到最新版本：
- 【@reduxjs/toolkit】:  ^2.4.0
- 【@types/color】: ^4.2.0
- 【@types/node】: 22.10.1
- 【@types/react】: ^19.0.0
- 【@types/react-dom】: ^19.0.0
- 【ahooks】: ^3.8.4
- 【antd】: ^5.22.3
- 【electron】: ^33.2.1
- 【electron-builder】: ^25.1.8
- 【electron-log】: ^5.2.4
- 【electron-vite】: ^2.3.0
- 【fetch-socks】: ^1.3.2
- 【react】: ^19.0.0
- 【react-dom】: ^19.0.0
- 【react-icons】: ^5.4.0
- 【react-router-dom】: ^7.0.2
- 【sass-embedded】: ^1.82.0
- 【sortablejs】: ^1.15.6
- 【typescript】: ^5.7.2
- 【vite】: ^6.0.3
- 【undici】: ^7.1.0

- 确保项目依赖的稳定性和安全性。

* ✨ feat(component): 优化组件类型定义和ref使用

- 将MarketVolume和SearchHistory组件的类型定义修改为React.FC，并使用React.RefObject来处理ref。
- 【MarketVolume】添加了ref属性，用于在父组件中调用refresh方法刷新数据。
- 【SearchHistory】添加了ref属性，用于在父组件中添加搜索历史记录。
- 优化代码结构，提高代码可读性和可维护性。
- 确保类型安全，避免潜在的运行时错误。

* ```
✨ feat(wallet): 添加持有收益率显示

- 【样式】钱包组件中添加持有收益率展示
  - 修改样式文件，添加 `slogan`、`pal` 样式
  - 更新 `timeBar` 样式
- 【功能】钱包组件中添加持有收益率计算和显示逻辑
  - 在 `CalcWallet` 工具函数中添加 `cysy`（持有收益）和 `cysyl`（持有收益率）的计算逻辑
  - 在钱包组件中添加 `displayCysy` 和 `displayCysyl` 的计算逻辑
  - 在钱包组件中添加持有收益率的显示，仅在非迷你模式且开启明文状态下显示
  - 根据持有收益的正负显示不同的颜色
```

* chore: 更新依赖版本

- 更新 react, react-dom 版本到 19.0.1
- 更新应用版本到 8.4.0

* 📝 docs(README): 更新 macOS 下载链接

- 添加 macOS 10.15 下载链接

* 📦 chore(build): remove macOS entitlements

- 删除了 macOS 授权文件 `entitlements.mac.plist`，简化构建流程。
- 此文件不再需要，因为它与当前的构建配置不兼容。

* ✨ chore(deps): 更新依赖项

- 更新 `@types/react-dom` 至 `19.0.2`
- 更新 `antd` 至 `5.22.4`
- 降级 `undici` 至 `6.21.0`
- 【依赖更新】为了保证项目稳定性和安全性，对部分依赖包进行了版本更新。

* 📦 build(deps): 更新依赖包版本

- 更新 @reduxjs/toolkit 到 2.5.0
- 更新 @types/react 到 19.0.2
- 更新 antd 到 5.22.6
- 更新 react-redux 到 9.2.0
- 更新 react-router-dom 到 7.1.1
- 更新 sass-embedded 到 1.83.0
- 更新 vite 到 6.0.5

* 📦 build(deps): 更新依赖包版本

- 更新 antd 版本到 5.22.7
- 更新 echarts 版本到 5.6.0
- 更新 electron 版本到 34.0.0-beta.14
- 更新 vite 版本到 6.0.6
- 添加 @ant-design/v5-patch-for-react-19 依赖

💄 style(theme): antd主题配置调整

- 开启 cssVar 属性
- 关闭 hashed 属性

✨ feat(renderer): 添加 react 19 兼容补丁

- 引入 @ant-design/v5-patch-for-react-19 以兼容 react 19

* 📦 build(deps): 更新 babel 插件版本

- 更新 babel-plugin-react-compiler 依赖至 19.0.0-beta-55955c9-20241229

* 🐛 fix(echart): 修复 echart hook 的类型问题
  -  修改 chartInstanceRef 的类型为允许 null，避免初始值报错
  -  修改 unMountRef 的类型为允许 null，避免初始值报错
  -  修改 useEchartEventEffect 和 useRenderEcharts 的 instance 参数为允许 null，避免类型错误

* ✨ feat(home): 股票添加ETF分类

- 将股票类型标签的显示名称从截取前两个字符改为完整名称
- 修改股票类型配置，调整部分名称，使之更简洁

* 📦 build(deps): 更新依赖版本
  - 更新 @types/node 到 22.10.6
  - 更新 @types/react 到 19.0.6
  - 更新 @types/react-dom 到 19.0.3
  - 更新 antd 到 5.23.1
  - 更新 babel-plugin-react-compiler 到 19.0.0-beta-e552027-20250112
  - 更新 sass-embedded 到 1.83.3
  - 更新 typescript 到 5.7.3
  - 更新 vite 到 6.0.7
  - 更新 undici 到 7.2.1

* 📦 build(deps): 更新依赖版本

- 更新 @types/react 从 19.0.6 到 19.0.7
- 更新 electron 从 34.0.0-beta.14 到 34.0.0
- 更新 sass-embedded 从 1.83.3 到 1.83.4

* 📦 build(deps): 更新 undici 到 6.21.0
  - 更新 undici 依赖版本到 6.21.0

.github/workflows/beta.yml

@@ -27,7 +27,7 @@ jobs:
           node-version: latest
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: latest
 

.github/workflows/publish.yml

@@ -25,7 +25,7 @@ jobs:
           node-version: latest
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: latest
 

.github/workflows/test.yml

@@ -32,7 +32,7 @@ jobs:
           node-version: latest
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: latest
 

README.md

@@ -72,6 +72,7 @@ sudo xattr -d com.apple.quarantine "/Applications/Fishing Funds.app"
 
 - [windows 7/8 下载](https://github.com/1zilc/fishing-funds/releases/tag/v7.0.2)
 - [macOS 10.13/10.14 下载](https://github.com/1zilc/fishing-funds/releases/tag/v8.1.0)
+- [macOS 10.15 下载](https://github.com/1zilc/fishing-funds/releases/tag/v8.2.3)
 
 ## 讨论交流
 

electron.vite.config.ts

@@ -1,5 +1,4 @@
 import path from 'path';
-import mkcert from 'vite-plugin-mkcert';
 import react from '@vitejs/plugin-react';
 import reactSWC from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'electron-vite';
@@ -43,7 +42,6 @@ export default defineConfig(({ command }) => {
       server: {
         port: 3456,
         strictPort: true,
-        https: {},
       },
       plugins: [
         prod
@@ -53,20 +51,12 @@ export default defineConfig(({ command }) => {
               },
             })
           : reactSWC(),
-        mkcert(),
       ],
       resolve: {
         alias: {
           '@': path.resolve('src/renderer'),
         },
       },
-      css: {
-        preprocessorOptions: {
-          scss: {
-            api: 'modern-compiler',
-          },
-        },
-      },
     },
   };
 });

package.json

@@ -4,7 +4,7 @@
   "description": "基金,大盘,股票,虚拟货币状态栏显示小应用,基于Electron开发,支持 MacOS,Windows,Linux客户端,数据源来自天天基金,蚂蚁基金,爱基金,腾讯证券,新浪基金等",
   "main": "release/app/dist/main/index.mjs",
   "scripts": {
-    "dev": "electron-vite dev",
+    "dev": "bunx --bun electron-vite dev",
     "build": "electron-vite build",
     "preview": "electron-vite preview",
     "build:icon": "electron-icon-builder --input=./build/icon.png --output=./icon-build",
@@ -48,12 +48,7 @@
           "x64",
           "arm64"
         ]
-      },
-      "type": "distribution",
-      "hardenedRuntime": true,
-      "entitlements": "build/entitlements.mac.plist",
-      "entitlementsInherit": "build/entitlements.mac.plist",
-      "gatekeeperAssess": false
+      }
     },
     "dmg": {
       "contents": [
@@ -134,59 +129,67 @@
   ],
   "homepage": "https://github.com/1zilc",
   "devDependencies": {
-    "@reduxjs/toolkit": "^2.2.7",
-    "@types/color": "^3.0.6",
+    "@reduxjs/toolkit": "^2.5.0",
+    "@types/color": "^4.2.0",
     "@types/color-hash": "^2.0.0",
-    "@types/node": "22.5.5",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "ahooks": "^3.8.1",
-    "antd": "^5.21.1",
-    "babel-plugin-react-compiler": "0.0.0-experimental-57db2f6-20240926",
+    "@types/node": "22.10.6",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "ahooks": "^3.8.4",
+    "antd": "^5.23.1",
+    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
     "cheerio": "1.0.0",
     "clsx": "^2.1.1",
     "color": "^4.2.3",
     "color-hash": "^2.0.2",
+    "comlink": "^4.4.2",
     "compare-versions": "^6.1.1",
     "dayjs": "^1.11.13",
-    "echarts": "^5.5.1",
-    "electron": "33.0.0-beta.4",
-    "electron-builder": "^25.0.5",
+    "echarts": "^5.6.0",
+    "electron": "34.0.0",
+    "electron-builder": "^25.1.8",
     "electron-icon-builder": "^2.0.1",
     "electron-vite": "^2.3.0",
-    "generate-react-cli": "^8.4.8",
+    "generate-react-cli": "^8.4.9",
     "hxc3-indicator-formula": "^1.0.9",
     "js-base64": "^3.7.7",
     "number-precision": "^1.6.0",
-    "promise-worker": "^2.0.1",
-    "query-string": "^9.1.0",
-    "react": "19.0.0-rc-67fee58b-20240926",
-    "react-dom": "19.0.0-rc-67fee58b-20240926",
-    "react-icons": "^5.3.0",
-    "react-redux": "^9.1.2",
-    "react-router-dom": "^6.26.2",
+    "query-string": "^9.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.1.1",
     "react-sortablejs": "^6.1.4",
     "redux": "^5.0.1",
-    "sass": "^1.79.3",
-    "sortablejs": "^1.15.3",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.8",
-    "vite-plugin-mkcert": "^1.17.6"
+    "sass-embedded": "^1.83.4",
+    "sortablejs": "^1.15.6",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7"
   },
   "dependencies": {
+    "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@json2csv/plainjs": "^7.0.6",
-    "electron-log": "^5.2.0",
+    "electron-log": "^5.2.4",
     "electron-store": "^10.0.0",
-    "electron-updater": "^6.3.4",
+    "electron-updater": "^6.3.9",
     "electron-window-state": "^5.0.3",
-    "fetch-socks": "^1.3.0",
-    "menubar": "^9.5.0",
-    "undici": "^6.19.8"
+    "fetch-socks": "^1.3.2",
+    "menubar": "^9.5.1",
+    "undici": "^6.21.0"
   },
   "devEngines": {
-    "node": ">=20.x",
-    "npm": ">=10.x"
+    "runtime": {
+      "name": "node",
+      "version": ">=20.x",
+      "onFail": "error"
+    },
+    "packageManager": {
+      "name": "npm",
+      "version": ">=10.9.x",
+      "onFail": "error"
+    }
   }
 }

release/app/package.json

@@ -2,7 +2,7 @@
   "name": "fishing-funds",
   "productName": "Fishing Funds",
   "description": "基金,大盘,股票,虚拟货币状态栏显示小应用,基于Electron开发,支持 MacOS,Windows,Linux客户端,数据源来自天天基金,蚂蚁基金,爱基金,腾讯证券,新浪基金等",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "main": "./dist/main/index.mjs",
   "dependencies": {}
 }

src/main/io.ts

@@ -5,7 +5,7 @@ export async function saveImage(filePath: string, dataUrl: string) {
   const data = dataUrl.match(/^data:([A-Za-z-+/]+);base64,(.+)$/);
   const imageBuffer = Buffer.from(data![2], 'base64');
   return new Promise((resolve, reject) => {
-    fs.writeFile(filePath, imageBuffer, resolve);
+    fs.writeFile(filePath, new Uint8Array(imageBuffer), resolve);
   });
 }
 

src/main/util.ts

@@ -14,7 +14,7 @@ export const rendererPath = path.join(appPath, 'renderer');
 export function resolveHtmlPath() {
   if (import.meta.env.DEV) {
     const port = 3456;
-    return `https://localhost:${port}`;
+    return `http://localhost:${port}`;
   } else {
     return `file://${path.resolve(rendererPath, 'index.html')}`;
   }

src/renderer/app.scss

@@ -1,14 +1,3 @@
-/*
- * @NOTE: Prepend a `~` to css file paths that are in your node_modules
- *        See https://github.com/webpack-contrib/sass-loader#imports
- @import '~@fortawesome/fontawesome-free/css/all.css';
- */
-@import 'antd/dist/reset.css';
-@import '@/styles/antd.scss';
-@import '@/styles/button.scss';
-@import '@/styles/color.scss';
-@import '@/styles/common.scss';
-
 body {
   position: relative;
   margin: 0;

src/renderer/app.tsx

@@ -4,6 +4,12 @@ import LoadingScreen from '@/components/LoadingScreen';
 import ThemeProvider from '@/components/ThemeProvider';
 import { useAppSelector, useThemeColor } from '@/utils/hooks';
 import * as CONST from '@/constants';
+
+import 'antd/dist/reset.css';
+import '@/styles/antd.scss';
+import '@/styles/button.scss';
+import '@/styles/color.scss';
+import '@/styles/common.scss';
 import '@/app.scss';
 
 const HomePage = React.lazy(() => import('@/containers/HomePage'));

src/renderer/components/Home/CoinView/AddCoinContent/index.tsx

@@ -6,8 +6,7 @@ import CustomDrawerContent from '@/components/CustomDrawer/Content';
 import SearchHistory, { type SearchHistoryRef } from '@/components/SearchHistory';
 import Empty from '@/components/Empty';
 import { addCoinAction } from '@/store/features/coin';
-import { SearchPromiseWorker } from '@/workers';
-import { SearchRemoteCoinParams } from '@/workers/search.worker';
+import { searchWorkerWarp } from '@/workers';
 import { useDrawer, useAppDispatch, useAppSelector } from '@/utils/hooks';
 import * as Helpers from '@/helpers';
 import * as Enums from '@/utils/enums';
@@ -54,14 +53,10 @@ const AddCoinContent: React.FC<AddCoinContentProps> = (props) => {
     if (!value) {
       setCoins([]);
     } else {
-      const searchPromiseWorker = new SearchPromiseWorker();
-      const searchList = await searchPromiseWorker
-        .postMessage<typeof remoteCoins, SearchRemoteCoinParams>({
-          module: Enums.TabKeyType.Coin,
-          list: remoteCoins,
-          value,
-        })
-        .finally(() => searchPromiseWorker.terminate());
+      const searchList = await searchWorkerWarp.searchRemoteCoin({
+        list: remoteCoins,
+        value,
+      });
       searchHistoryRef.current?.addSearchHistory(value);
       setCoins(searchList);
     }

src/renderer/components/Home/CoinView/Calculator/index.tsx

@@ -7,8 +7,7 @@ import CustomDrawer from '@/components/CustomDrawer';
 import WebAppIcon from '@/components/Toolbar/AppCenterContent/WebAppIcon';
 import PureCard from '@/components/Card/PureCard';
 import ChartCard from '@/components/Card/ChartCard';
-import { SearchPromiseWorker } from '@/workers';
-import { SearchRemoteCoinParams } from '@/workers/search.worker';
+import { searchWorkerWarp } from '@/workers';
 import { useDrawer, useAppSelector } from '@/utils/hooks';
 import * as Helpers from '@/helpers';
 import * as Enums from '@/utils/enums';
@@ -32,26 +31,17 @@ const Calculator: React.FC<CalculatorProps> = (props) => {
   const [coins, setCoins] = useState<Coin.RemoteCoin[]>(remoteCoins);
   const [price, setPrice] = useState({ cny: 0, btc: 0, usd: 0 });
 
-  const {
-    data: detailCoinCode,
-    show: showDetailDrawer,
-    set: setDetailDrawer,
-    close: closeDetailDrawer,
-  } = useDrawer('');
+  const { data: detailCoinCode, show: showDetailDrawer, set: setDetailDrawer, close: closeDetailDrawer } = useDrawer('');
 
   const { run: onSearch } = useDebounceFn(async (_value: string) => {
     const value = _value.trim();
     if (!value) {
       setCoins(remoteCoins);
     } else {
-      const searchPromiseWorker = new SearchPromiseWorker();
-      const searchList = await searchPromiseWorker
-        .postMessage<typeof remoteCoins, SearchRemoteCoinParams>({
-          module: Enums.TabKeyType.Coin,
-          list: remoteCoins,
-          value,
-        })
-        .finally(() => searchPromiseWorker.terminate());
+      const searchList = await searchWorkerWarp.searchRemoteCoin({
+        list: remoteCoins,
+        value,
+      });
       setCoins(searchList);
     }
   });

src/renderer/components/Home/FundView/AddFundContent/index.tsx

@@ -5,8 +5,7 @@ import CustomDrawer from '@/components/CustomDrawer';
 import CustomDrawerContent from '@/components/CustomDrawer/Content';
 import { addFundAction } from '@/store/features/fund';
 import { useDrawer, useAppDispatch, useAppSelector } from '@/utils/hooks';
-import { SearchPromiseWorker } from '@/workers';
-import { SearchRemoteFundParams } from '@/workers/search.worker';
+import { searchWorkerWarp } from '@/workers';
 import * as Enums from '@/utils/enums';
 import * as Helpers from '@/helpers';
 import styles from './index.module.scss';
@@ -60,15 +59,11 @@ const AddFundContent: React.FC<AddFundContentProps> = (props) => {
     if (!value) {
       setFundlist([]);
     } else {
-      const searchPromiseWorker = new SearchPromiseWorker();
-      const searchList = await searchPromiseWorker
-        .postMessage<typeof remoteFunds, SearchRemoteFundParams>({
-          module: Enums.TabKeyType.Fund,
-          list: remoteFunds,
-          type,
-          value,
-        })
-        .finally(() => searchPromiseWorker.terminate());
+      const searchList = await searchWorkerWarp.searchRemoteFund({
+        list: remoteFunds,
+        type,
+        value,
+      });
       setFundlist(searchList);
     }
   });

src/renderer/components/Home/FundView/DetailFundContent/Estimate/index.tsx

@@ -21,9 +21,9 @@ const Estimate: React.FC<EstimateProps> = React.memo(({ code }) => {
     <ChartCard onFresh={runGetEstimatedFromEastmoney}>
       <div className={styles.estimate}>
         {estimate === '' ? (
-          <img src={Utils.ImportStatic('img/picture.svg')} />
+          <img src="img/picture.svg" />
         ) : estimate === undefined ? (
-          <img src={Utils.ImportStatic('img/picture-failed.svg')} />
+          <img src="img/picture-failed.svg" />
         ) : (
           <img src={estimate} onError={() => setEstimate(undefined)} />
         )}

src/renderer/components/Home/FundView/DetailFundContent/InvestStyle/index.tsx

@@ -22,9 +22,9 @@ const InvestStyle: React.FC<InvestStyleProps> = React.memo(({ code }) => {
     <ChartCard onFresh={runGetInverstStyleFromEastmoney}>
       <div className={styles.estimate}>
         {estimate === '' ? (
-          <img src={Utils.ImportStatic('img/picture.svg')} />
+          <img src="img/picture.svg" />
         ) : estimate === undefined ? (
-          <img src={Utils.ImportStatic('img/picture-failed.svg')} />
+          <img src="img/picture-failed.svg" />
         ) : (
           <img src={estimate} onError={() => setEstimate(undefined)} />
         )}