improve path

src/components/asset-change.tsx

@@ -1,9 +1,9 @@
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "../utils/hook";
-import { timestampToDate } from "../utils/date";
-import { AssetChangeData, CurrencyRateDetail } from "../middlelayers/types";
+import { useWindowSize } from "@/utils/hook";
+import { timestampToDate } from "@/utils/date";
+import { AssetChangeData, CurrencyRateDetail } from "@/middlelayers/types";
 import _ from 'lodash'
-import { currencyWrapper } from '../utils/currency'
+import { currencyWrapper } from '@/utils/currency'
 
 const App = ({
   data,

src/components/coins-amount-and-value-change.tsx

@@ -2,13 +2,13 @@ import _ from "lodash";
 import React from "react";
 import { useEffect, useState } from "react";
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "../utils/hook";
-import { timestampToDate } from "../utils/date";
+import { useWindowSize } from "@/utils/hook";
+import { timestampToDate } from "@/utils/date";
 import {
   CoinsAmountAndValueChangeData,
   CurrencyRateDetail,
-} from "../middlelayers/types";
-import { currencyWrapper } from "../utils/currency";
+} from "@/middlelayers/types";
+import { currencyWrapper } from "@/utils/currency";
 import { ButtonGroup, ButtonGroupItem } from "./ui/button-group";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from './ui/select'
 

src/components/configuration.tsx

@@ -5,9 +5,8 @@ import {
   saveConfiguration,
 } from "../middlelayers/configuration";
 import { toast } from "react-hot-toast";
-import deleteIcon from "../../assets/icons/delete-icon.png";
+import deleteIcon from "@/assets/icons/delete-icon.png";
 import { GlobalConfig, TokenConfig } from "../middlelayers/datafetch/types";
-import { LoadingContext } from "../App";
 import { CurrencyRateDetail } from "../middlelayers/types";
 import { listAllCurrencyRates } from "../middlelayers/currency";
 import { Separator } from "./ui/separator";

src/components/data-management.tsx

@@ -2,7 +2,7 @@ import { toast } from "react-hot-toast";
 import {
   exportHistoricalData,
   importHistoricalData,
-} from "../middlelayers/data";
+} from "@/middlelayers/data";
 import { useEffect, useState } from "react";
 
 import _ from "lodash";
@@ -17,9 +17,9 @@ import {
   signIn,
   signOut,
   syncAssetsToCloudAndLocal,
-} from "../middlelayers/cloudsync";
-import { timestampToDate } from "../utils/date";
-import { trackEventWithClientID } from "../utils/app";
+} from "@/middlelayers/cloudsync";
+import { timestampToDate } from "@/utils/date";
+import { trackEventWithClientID } from "@/utils/app";
 import { Separator } from "./ui/separator";
 import { Checkbox } from "./ui/checkbox";
 import { Label } from "./ui/label";

src/components/historical-data/index.tsx

@@ -3,25 +3,25 @@ import {
   deleteHistoricalDataByUUID,
   deleteHistoricalDataDetailById,
   queryHistoricalData,
-} from "../../middlelayers/charts";
-import { CurrencyRateDetail, HistoricalData } from "../../middlelayers/types";
-import deleteIcon from "../../assets/icons/delete-icon.png";
+} from "@/middlelayers/charts";
+import { CurrencyRateDetail, HistoricalData } from "@/middlelayers/types";
+import deleteIcon from "@/assets/icons/delete-icon.png";
 import _ from "lodash";
 
 import "./index.css";
 import { toast } from "react-hot-toast";
-import { LoadingContext } from "../../App";
-import { timestampToDate } from "../../utils/date";
+import { LoadingContext } from "@/App";
+import { timestampToDate } from "@/utils/date";
 import {
   currencyWrapper,
   prettyNumberToLocaleString,
   prettyPriceNumberToLocaleString,
-} from "../../utils/currency";
+} from "@/utils/currency";
 import Modal from "../common/modal";
-import { downloadCoinLogos } from "../../middlelayers/data";
+import { downloadCoinLogos } from "@/middlelayers/data";
 import { appCacheDir as getAppCacheDir } from "@tauri-apps/api/path";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
-import { useWindowSize } from "../../utils/hook";
+import { useWindowSize } from "@/utils/hook";
 import ImageStack from "../common/image-stack";
 
 type RankData = {

src/components/latest-assets-percentage.tsx

@@ -1,6 +1,6 @@
 import { Doughnut } from "react-chartjs-2";
-import { useWindowSize } from "../utils/hook";
-import { LatestAssetsPercentageData } from "../middlelayers/types";
+import { useWindowSize } from "@/utils/hook";
+import { LatestAssetsPercentageData } from "@/middlelayers/types";
 
 const App = ({ data }: { data: LatestAssetsPercentageData }) => {
   const size = useWindowSize();

src/components/top-coins-percentage-change.tsx

@@ -1,12 +1,12 @@
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "../utils/hook";
-import { timestampToDate } from "../utils/date";
-import { TopCoinsPercentageChangeData } from "../middlelayers/types";
+import { useWindowSize } from "@/utils/hook";
+import { timestampToDate } from "@/utils/date";
+import { TopCoinsPercentageChangeData } from "@/middlelayers/types";
 import { useRef, useState } from "react";
 import _ from "lodash";
 import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
 import { BubbleDataPoint, Point } from "chart.js";
-import { legendOnClick } from "../utils/legend";
+import { legendOnClick } from "@/utils/legend";
 import { ButtonGroup, ButtonGroupItem } from "./ui/button-group";
 
 const prefix = "tcpc";

src/components/top-coins-rank.tsx

@@ -1,12 +1,12 @@
 import { Line } from "react-chartjs-2";
-import { useWindowSize } from "../utils/hook";
-import { timestampToDate } from "../utils/date";
-import { TopCoinsRankData } from "../middlelayers/types";
+import { useWindowSize } from "@/utils/hook";
+import { timestampToDate } from "@/utils/date";
+import { TopCoinsRankData } from "@/middlelayers/types";
 import { useRef } from "react";
 import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
 import { BubbleDataPoint, Point } from "chart.js";
 import _ from "lodash";
-import { legendOnClick } from "../utils/legend";
+import { legendOnClick } from "@/utils/legend";
 
 const App = ({ data }: { data: TopCoinsRankData }) => {
   const size = useWindowSize();

src/components/wallet-analyzer.tsx

@@ -1,13 +1,13 @@
 import { useContext, useEffect, useState } from "react";
 import WalletAssetsPercentage from "./wallet-assets-percentage";
 import WalletAssetsChange from "./wallet-assets-change";
-import { LoadingContext } from "../App";
+import { LoadingContext } from "@/App";
 import {
   CurrencyRateDetail,
   WalletAssetsChangeData,
   WalletAssetsPercentageData,
-} from "../middlelayers/types";
-import { WALLET_ANALYZER } from "../middlelayers/charts";
+} from "@/middlelayers/types";
+import { WALLET_ANALYZER } from "@/middlelayers/charts";
 import { Separator } from "./ui/separator";
 
 const App = ({ currency }: { currency: CurrencyRateDetail }) => {

src/components/wallet-assets-change.tsx

@@ -2,12 +2,12 @@ import _ from "lodash";
 import {
   CurrencyRateDetail,
   WalletAssetsChangeData,
-} from "../middlelayers/types";
+} from "@/middlelayers/types";
 import {
   currencyWrapper,
   prettyNumberToLocaleString,
-} from "../utils/currency";
-import { insertEllipsis } from "../utils/string";
+} from "@/utils/currency";
+import { insertEllipsis } from "@/utils/string";
 import {
   TableHead,
   TableRow,

src/components/wallet-assets-percentage.tsx

@@ -1,13 +1,13 @@
 import { Bar } from "react-chartjs-2";
-import { useWindowSize } from "../utils/hook";
+import { useWindowSize } from "@/utils/hook";
 import {
   CurrencyRateDetail,
   WalletAssetsPercentageData,
-} from "../middlelayers/types";
-import { currencyWrapper, prettyNumberToLocaleString } from "../utils/currency";
+} from "@/middlelayers/types";
+import { currencyWrapper, prettyNumberToLocaleString } from "@/utils/currency";
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { insertEllipsis } from '../utils/string'
+import { insertEllipsis } from '@/utils/string'
 
 const App = ({
   data,